React一学就会(1): 项目的创建

编程日记2024-03-20 15:35:30

前言

随着JS的发展，基于JS应用几乎是无处不在，于是乎，众多框架应运而生。react就是众多优秀框架中不可多得的之一。框架这东西，每个程序员心里都有一个不同的排名。各见所爱了。我写这个一系列的教程一是想给刚学的朋友一点参考。二是自我总结一下经验，做点笔记。这将是一个超完整超详细的一个系列教程，跟着学，可以快速打通你的任督二脉。本系列教程参考了大量的资料，有官方的，也有网友的，但每一个实例都是经过精心fj雕琢后再验证的，确保不会误人子弟。

环境的搭建

历史的车轮总会无情的淹没一些人和事。除了求索的精神，没有什么东西能够永恒。计算机技术的发展历史中出现过许多耀眼的软件产品，那些曾经一时光芒万丈而最终消失在人家的视野中的软件为人类的进步做出了巨大的贡献。紧跟时代的步伐是我们程序员时刻要牢记的。就像这个js的打包工具，也是在不段的更迭中。以前我用create-react-app这个工具来创建react项目，但自从用了vite之后，就再也回不去了。至于Vite为什么好用，这个我就不多说了，反正就是好、快。

创建项目

首先要确保你的node.js版本在18+、20+,不然会出问题，一句话要最新版本。因为vite也很年轻。

## npm方式
npm create vite@latest

## yarn方式
yarn create vite

然后就是一系列的交互操作了，按照提示操作即可！

注意：选择react, 而不是react-ts; 因为本系列教程不是ts教程。

示例：创建my-react-app项目

## npm方式
npm create vite@latest my-react-app react

## yarn方式
yarn create vite my-react-app react

## 第一次创建好后要执行以下操作
## npm方式下
cd my-react-app
npm install
npm run dev

## yarn 方式
cd my-react-app
yarn
yarn dev

[图片上传失败...(image-6c1e67-1705824716285)]
我比较喜欢yarn的方式,相对操作方便些。

运行后，我们在浏览器中打开：http://localhost:5173/,如下所示

[图片上传失败...(image-fdc0c5-1705824716286)]

项目建好后如果要停止运行就在终端执行ctrol + C快捷键就好了。为了方便开发，我习惯用Visual studio code来进行相关的管理和开发工作。以后运行项目只要进入目录运行yarn dev或 npm run dev就可以了。是不是很简单。

index.html 与项目根目录

以下是引用官方的说法：

你可能已经注意到，在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 <script type="module" src="..."> ，这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module"> 和引用 CSS 的 <link href> 也能利用 Vite 特有的功能被解析。另外，index.html 中的 URL 将被自动转换，因此不再需要 %PUBLIC_URL% 占位符了。

与静态 HTTP 服务器类似，Vite 也有 “根目录” 的概念，即服务文件的位置，在接下来的文档中你将看到它会以 <root> 代称。源码中的绝对 URL 路径将以项目的 “根” 作为基础来解析，因此你可以像在普通的静态文件服务器上一样编写代码（并且功能更强大！）。Vite 还能够处理依赖关系，解析处于根目录外的文件位置，这使得它即使在基于 monorepo 的方案中也十分有用。

指定替代根目录

vite 以当前工作目录作为根目录启动开发服务器。你也可以通过 vite serve some/sub/dir 来指定一个替代的根目录。注意 Vite 同时会解析项目根目录下的配置文件（即 vite.config.js），因此如果根目录被改变了，你需要将配置文件移动到新的根目录下。

框架的安装

为了使用我们的教程示例更加的美观和实用化，我们需要安装一个框架。学习react的不用框架我感觉没什么意思，省事。这里我们用Material UI

## yarn 安装方式
yarn add @mui/material @emotion/react @emotion/styled
yarn add @fontsource/roboto
yarn add @mui/icons-material

## npm安装方式
npm install @mui/material @emotion/react @emotion/styled
npm adinstalld @fontsource/roboto
npm install @mui/icons-material

这样就完美了。环境算是弄完整了。下面我们小试一下牛刀

在项目src目录下创建一个文件：firstTest.jsx

import * as React from 'react';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { Stack } from '@mui/material';

export default function ButtonUsage() {
    return (
        <Box>
            <Typography variant="h3" gutterBottom>
                这是H3标题, variant的值 = h1 ~ h6, 和html中的h1 ~ h6对应
            </Typography>

            <Stack spacing={2} direction="row">
                <Button variant="text">Text</Button>
                <Button variant="contained">Contained</Button>
                <Button variant="outlined">Outlined</Button>
            </Stack>
        </Box>
    )
}

我们定义了一个ButtonUsage的组件，下面我们引用它，打开我们的App.jsx文件，修改如下：

import './App.css'
import ButtonUsage from './myFirstTest'

function App() {
  return (
    <>
      <ButtonUsage />
    </>
  )
}

export default App

完美，你现在的内心是不是很激动？

查看全文

前言

环境的搭建

创建项目

index.html 与项目根目录

指定替代根目录

框架的安装

相关文章：