使用vite构建一个react网站,并部署到Netlify上

这篇教程中,我会教你如何用vite快速构建一个react网站,并把网站免费部署到Netlify上,让别人可以经由网址访问你的react网站。

1. 使用vite构建基础框架

npm create vite@latestcd vite-project
npm install
npm run dev

2. 网站内容设计

在这里插入图片描述

3. 构建nav和main的jsx文件

JSX 是 JavaScript 的一个语法扩展,它允许你在 JavaScript 代码中写类似于 HTML 的标记。JSX 最初由 React 团队开发,用于在 React 应用程序中描述用户界面。

创建components文件夹,与src文件夹在同一个级别。
在components文件夹之下,创建Navbar.jsx

export default function Navbar() {return (<nav><img src="/images/react-icon-small.png" className="nav--icon" /><h3 className="nav--logo_text">ReactFacts</h3><h4 className="nav--title">React Course - Project 1</h4></nav>)
}

在public文件夹之下,创建images文件夹,并添加两张图片。
在这里插入图片描述
public\images\react-icon-small.png
在这里插入图片描述
public\images\react-icon-large.png

写好Navbar.jsx之后,另外创建一个文件Main.jsx。

export default function Main() {return (<main><h1 className="main--title">Fun facts about React</h1><ul className="main--facts"><li>Was first released in 2013</li><li>Was originally created by Jordan Walke</li><li>Has well over 100K stars on GitHub</li><li>Is maintained by Facebook</li><li>Powers thousands of enterprise apps, including mobile apps</li></ul></main>)
}

4. 更新App的内容

更新src文件夹中App.jsx的内容

import './App.css'
import Navbar from "../components/Main"
import Main from "../components/Navbar"export default function App() {return (<div className="container"><Main /><Navbar /></div>)
}

清空App.css中的内容。

5. 更新index.css的内容

* {box-sizing: border-box;
}body {margin: 0;font-family: Inter, sans-serif;height: 100vh;background-color: #282D35;
}nav {display: flex;align-items: center;background-color: #21222A;height: 90px;padding: 30px 25px;
}/* display: flex; align-items: center; 使导航栏元素水平排列并垂直居中。 */
/* background-color: #21222A; 设置导航栏背景色为深灰色。 */.nav--logo_text, .nav--title {margin: 0;
}.nav--logo_text {margin-right: auto;color: #61DAFB;font-weight: 700;font-size: 22px;
}/* margin-right: auto; 将.nav--logo_text推到左边,使其他内容靠右对齐。 */
/* color: #61DAFB; 设置字体颜色为浅蓝色。 */
/* font-weight: 700; font-size: 22px; 设置加粗字体,字号为22px。 */.nav--title {color: #DEEBF8;font-weight: 600;
}/* color: #DEEBF8; 设置字体颜色为浅蓝白色。 */
/* font-weight: 600; 设置字体加粗程度稍弱于.nav--logo_text。 */.nav--icon {height: 30px;margin-right: 7px;
}
/* height: 30px; 设置图标高度为30px。 */
/* margin-right: 7px; 图标与后续内容之间的间距为7px。 */main {padding: 57px 27px;color: white;background-image: url(/images/react-icon-large.png);background-repeat: no-repeat;background-position: right 75%;
}
/* padding: 57px 27px; 设置顶部和底部57px,左右27px的内边距。 */
/* color: white; 设置主区域的文本颜色为白色。 */
/* background-image、background-repeat 和 background-position 在右侧75%高度处设置背景图,且不重复。 */.main--title {margin: 0;font-size: 39px;letter-spacing: -0.05em;
}
/* margin: 0; 去除外边距。 */
/* font-size: 39px; 设置字体大小为39px。 */
/* letter-spacing: -0.05em; 调整字间距,使字符更紧密。 */.main--facts {margin-top: 46px;max-width: 400px;
}
/* margin-top: 46px; 设置顶部外边距为46px。 */
/* max-width: 400px; 限制宽度为400px,以保证文本不会过宽,便于阅读。 */.main--facts > li {line-height: 19px;padding-block: 10px;
}
/* line-height: 19px; 设置行高为19px,增加行距。 */
/* padding-block: 10px; 列表项上下各有10px的内边距。 */.main--facts > li::marker {font-size: 1.4rem;color: #61DAFB;
}
/* font-size: 1.4rem; 将列表标记符号放大为1.4倍。 */
/* color: #61DAFB; 设置列表标记的颜色为浅蓝色。 */
  • box-sizing属性设置为border-box,让所有元素在计算宽度和高度时包含内边距(padding)和边框(border),方便布局的控制,避免溢出问题。

6. 在本地部署

npm run dev

7. 上传到github

8. 部署到Netlify

在这里插入图片描述

9. 成果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/58863.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Fastify Swagger:自动化API文档生成与展示

在现代软件开发中&#xff0c;API文档的生成和维护是一个不可或缺的环节。Fastify Swagger 是一个专为 Fastify 框架设计的插件&#xff0c;它能够自动生成符合 Swagger&#xff08;OpenAPI v2 或 v3&#xff09;规范的文档&#xff0c;从而帮助开发者轻松创建和维护API文档。本…

【网络原理】万字详解 UDP 和 TCP

&#x1f970;&#x1f970;&#x1f970;来都来了&#xff0c;不妨点个关注叭&#xff01; &#x1f449;博客主页&#xff1a;欢迎各位大佬!&#x1f448; 文章目录 1. UDP1.1 UDP 报文格式1.1.1 源端口/目的端口1.1.2 报文长度1.1.3 校验和 2. TCP2.1 TCP 报文结构2.2 TCP 特…

Go 中的泛型,日常如何使用

泛型从 go 的 1.18 开始支持 什么是泛型编程 在泛型出现之前&#xff0c;如果需要计算两数之和&#xff0c;可能会这样写&#xff1a; func Add(a, b int) int {returb a b } 这个很简单&#xff0c;但是只能两个参数都是 int 类型的时候才能调用 如果想要计算两个浮点数…

IoTDB 与 HBase 对比详解:架构、功能与性能

五大方向&#xff0c;洞悉 IoTDB 与 HBase 的详尽对比&#xff01; 在物联网&#xff08;IoT&#xff09;领域&#xff0c;数据的采集、存储和分析是确保系统高效运行和决策准确的重要环节。随着物联网设备数量的增加和数据量的爆炸式增长&#xff0c;开发者和决策者们需要选择…

单片机串口接收状态机STM32

单片机串口接收状态机stm32 前言 项目的芯片stm32转国产&#xff0c;国产芯片的串口DMA接收功能测试不通过&#xff0c;所以要由原本很容易配置的串口空闲中断触发DMA接收数据的方式转为串口逐字节接收的状态机接收数据 两种方式各有优劣&#xff0c;不过我的芯片已经主频跑…

词嵌入方法(Word Embedding)

词嵌入方法&#xff08;Word Embedding&#xff09; Word Embedding是NLP中的一种技术&#xff0c;通过将单词映射到一个空间向量来表示每个单词 ✨️常见的词嵌入方法&#xff1a; &#x1f31f;Word2Vec&#xff1a;由谷歌提出的方法&#xff0c;分为CBOW&#xff08;conti…

【go从零单排】实现枚举类型(Enum)

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在Go语言中&#xff0c;并没有内置的枚举类型&#xff08;Enum&#xff09;&…

Python爬虫如何处理验证码与登录

Python爬虫如何处理验证码与登录 Python 爬虫在抓取需要登录的网站数据时&#xff0c;通常会遇到两个主要问题&#xff1a;登录验证和验证码处理。这些机制是网站用来防止自动化程序过度抓取数据的主要手段。本文将详细讲解如何使用 Python 处理登录与验证码&#xff0c;以便进…

MOS管损坏原因

MOS管是什么&#xff1f; MOS管&#xff0c;全程就是MOSFET&#xff08;Metal-Oxide-Semiconductor Field-Effect Transistor&#xff09;&#xff0c;是一种场效应晶体管。‌ MOS管控制原理 MOS管的工作原理是通过栅极电压&#xff08;G&#xff09;来控制源极&#xff08…

「QT」QT5程序设计专栏目录

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…

论文阅读《机器人状态估计中的李群》

目录 摘要1 介绍2 微李理论2.1 李群 摘要 李群是一个古老的数学抽象对象&#xff0c;可以追溯到19世纪&#xff0c;当时数学家 Sophus Lie奠定了连续变换群理论的基础。多年后&#xff0c;它的影响已经蔓延到科学和技术的各个领域。在机器人领域&#xff0c;我们最近正在经历一…

EHOME视频平台EasyCVR视频融合平台使用OBS进行RTMP推流,WebRTC播放出现抖动、卡顿如何解决?

在现代视频监控领域&#xff0c;跨区域的网络化视频监控管理平台成为了大中型项目的首选。EHOME视频平台EasyCVR以其强大的功能和兼容性&#xff0c;成为了众多项目的核心组件。它不仅能够管理视频资源、设备、用户、运维和安全&#xff0c;还支持多种行业标准协议&#xff0c;…

浮动路由:实现出口线路的负载均衡冗余备份。

浮动路由 Tip&#xff1a;浮动路由指在多条默认路由基础上加入优先级参数&#xff0c;实现出口线路冗余备份。 ip routing-table //查看路由表命令 路由优先级参数&#xff1a;越小越优 本次实验测试两条默认路由&#xff0c;其中一条默认路由添加优先级参数&#xff0c;设置…

Android CCodec Codec2 (十九)C2LinearBlock

在上一篇文章的结尾&#xff0c;我们看到fetchLinearBlock方法最终创建了一个C2LinearBlock对象。这一节&#xff0c;我们将深入了解C2LinearBlock是什么&#xff0c;它的作用是什么&#xff0c;以及它是如何被创建的。 1、_C2BlockFactory 先对上一篇文章的结尾内容做简单回顾…

Axure PR 9 多级下拉选择器 设计交互

​ 大家好&#xff0c;我是大明同学。 Axure选择器是一种在交互设计中常用的组件&#xff0c;这期内容&#xff0c;我们来探讨Axure中多级下拉选择器设计与交互技巧。 下拉列表选择输入框元件 创建选择输入框所需的元件 1.在元件库中拖出一个矩形元件。 2.选中矩形元件&…

SparkSql读取数据的方式

一、读取普通文件 方式一&#xff1a;给定读取数据源的类型和地址 spark.read.format("json").load(path) spark.read.format("csv").load(path) spark.read.format("parquet").load(path) 方式二&#xff1a;直接调用对应数据源类型的方法 …

使用Python实现图像的手绘风格效果

使用Python实现图像的手绘风格效果 一、引言二、代码详细解释与示例三、完整框架流程四、运行五、结论附&#xff1a;完整代码 一、引言 在数字图像处理领域&#xff0c;模拟手绘风格是一项有趣且具有挑战性的任务。手绘风格图像通常具有独特的纹理和深浅变化&#xff0c;给人…

Oracle Select语句

SELECT语句使用方法 在Oracle中&#xff0c;表是由列和行组成。 例如&#xff0c;示例数据库中的customers表具有以下列&#xff1a;customer_id&#xff0c;name&#xff0c;address&#xff0c;website和credit_limit。customers表中这些列中也有对应的数据。 要从表的一个或…

w~大模型~合集21

我自己的原文哦~ https://blog.51cto.com/whaosoft/12459590 #大模型~微调~用带反馈的自训练 面对当前微调大模型主要依赖人类生成数据的普遍做法&#xff0c;谷歌 DeepMind 探索出了一种减少这种依赖的更高效方法。大模型微调非得依赖人类数据吗&#xff1f;用带反馈的自训…

ctfshow(316,317,318)--XSS漏洞--反射性XSS

反射型XSS相关知识 Web316 进入界面&#xff1a; 审计 显示是关于反射性XSS的题目。 思路 首先想到利用XSS平台解题&#xff0c;看其他师傅的wp提示flag是在cookie中。 当前页面的cookie是flagyou%20are%20not%20admin%20no%20flag。 但是这里我使用XSS平台&#xff0c;…