从零到一搭建一个 React 项目

date

Feb 16, 2023

slug

Building-a-React-project-from-scratch-without-scaffold

status

Published

搭建环境

安装 node 版本管理工具

安装成功后在你的 .bashrc 或 .zshrc 中加入以下命令，保存并重启命令行窗口：

安装 fnm 后，用它安装 Node 最新的 LTS（Long Term Support 长期支持）版本：

执行

我的 node 版本为 v18.14.1 。

下载 IDE

我比较推荐的 IDE 是VSCode ，下载地址在这里。

下载完成后，安装 Code 命令。Mac 快捷安装的命令为：

再键入

安装 Vite

当然，你也可以选择 webpack。

开始开发

为了更加方便的长期迭代，建议把代码放入 GitHub 或 Gitee 中。

根据提示，在 package.json 文件中键入关键信息。最后的内容大致如下：

再在项目根目录下添加一个入口 HTML 文件 index.html：

最后执行

浏览器会自动打开页面，在页面的左上角，你会看到 在这里添加内容…… 。

到这里，你就可以用 HTML + CSS + JavaScript 开发自己的页面了。但如果你想开发一个大型项目，并且希望这个项目拥有良好的可维护性，你可能需要 React 或者 Vue。

配置 React 插件

在项目的根目录下。安装 React

同时安装 Vite 的 React 插件：

创建 vite.config.js 文件：

配置 vite.config.js 文件：

在 src 目录下新建 index.js 文件

键入以下内容：

修改 index.html :

重新执行 npm start 命令打开页面，你会在左上角看到如下内容 “我是 React 页面”。

配置 Emotion

Emotion 提供了一种可能性，可以让你用写 Javascript 的方式写 CSS 代码。

安装相关依赖：

修改配置文件 vite.config.js ，利用 Emotion 的 Babel 插件为 JSX 加入 CSS 属性：

修改 index.jsx 文件（这里只是为了体验 Emotion）：

安装 ESLint

未了提高代码的质量，建议引入 ESLint。代码静态检查（Linting）是通过静态代码分析，为开发者指出代码中可能的编程错误和代码风格问题，并提出修改建议，达到提升代码质量的目的。因此代码静态检查器（Linter）可以说是开发者的好伙伴。

在根目录进行安装：

按照提示自行选择安装即可：

安装完成，项目根目录多了一个 .eslintrc.js 配置文件。

修改 package.json 文件：

执行 npm run lint 进行检查：

运行如下命令进行修正：

ESLint 自动修正了一部分错误，最终结果：

忽略这个错误，修改 .eslintrc.js 文件如下：

重新运行 npm run lint 进行检查：

完美！

后面的故事就由你自己来书写了。