返回

你不了解的 React 项目框架搭建过程

前端

前言

在创建 React 项目时，我们经常使用脚手架工具来快速搭建项目。虽然这是一种简单快捷的方法，但它也可能会导致我们对项目框架缺乏深刻理解。为了更好地理解 React 项目是如何运作的，我们可以尝试从零开始搭建一个项目框架。

项目结构

一个 React 项目通常由以下几个部分组成：

  • src 目录： 包含项目的所有源代码，包括 JavaScript、CSS 和图像等。
  • node_modules 目录： 包含项目所依赖的第三方库。
  • package.json 文件： 包含项目的基本信息，如项目名称、版本、依赖项等。
  • webpack.config.js 文件： 包含 webpack 的配置信息，用于打包项目代码。
  • README.md 文件： 包含项目的说明文档。

依赖安装

在搭建 React 项目框架之前，我们需要先安装必要的依赖项。可以使用以下命令安装：

npm install --save react react-dom

脚本配置

接下来，我们需要在 package.json 文件中配置必要的脚本。这些脚本用于启动项目、打包代码和运行测试等。

{
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --mode=production",
    "test": "jest"
  }
}

组件创建

接下来，我们需要创建第一个 React 组件。可以使用以下命令创建：

npx create-react-app my-app

这将创建一个新的 React 项目，并包含一个名为 App.js 的组件。

测试

为了确保项目的质量，我们需要对代码进行测试。可以使用 Jest 来对 React 组件进行测试。

npm install --save-dev jest

然后在 package.json 文件中添加以下脚本：

{
  "scripts": {
    "test": "jest"
  }
}

现在，就可以使用以下命令运行测试：

npm test

示例项目

最后，我们以一个示例项目来总结 React 项目框架搭建的过程。这个示例项目是一个简单的 Todo List 应用。

项目结构

├── src
│   ├── App.js
│   ├── index.css
│   └── index.js
├── node_modules
├── package.json
├── webpack.config.js
└── README.md

依赖安装

npm install --save react react-dom

脚本配置

{
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --mode=production",
    "test": "jest"
  }
}

组件创建

npx create-react-app my-app

测试

npm install --save-dev jest

{
  "scripts": {
    "test": "jest"
  }
}

npm test

运行项目

npm start

现在，就可以访问 http://localhost:3000 来查看项目。

结论

从零开始搭建 React 项目框架是一个很有意义的学习经历。通过这个过程，我们可以更好地理解 React 项目是如何运作的，以及如何从头开始构建一个 React 项目。希望本文能帮助你更好地理解 React 项目框架搭建的过程。