React 开发环境&项目结构详解

🥭 导语

React 作为一个强大的 JavaScript 库，在现代 Web 开发中占据着重要地位。它以其高效的组件化开发方式和灵活的渲染能力，为开发者提供了构建出色用户界面的有力工具。本文将详细介绍 React 是什么，它与 ReactDOM 的关系，以及如何搭建 React 开发环境和理解项目结构，帮助读者快速上手 React 开发。

🍉 React 是什么？

React 是一个用于构建 Web 和原生交互界面的库。它既可用于开发 Web 页面应用，也可以构建跨端的原生应用。

准确来说 React 是一个用于渲染用户界面（UI）的 JavaScript 库，意思是 React 不是一个框架，因此也就不局限于 Web 开发，它可以与其他库一起使用以渲染到特定环境。例如，通过 React Native 可用于构建移动应用程序，React 360 则可用于构建 VR 应用程序。

🍒 React & ReactDOM

在构建我们常见的 Web 应用时，开发中往往将 React 与 ReactDOM 结合使用。这时我们常说的 React 框架，就是指 React 和 ReactDOM 结合的整体。

React

React 提供以组件化的方式来构建 UI，开发者可以将界面拆分成多个独立的、可复用、可嵌套的组件。比如，在 React 环境中一个简单的按钮组件可以这样定义：

jsx 复制代码

// Button.js
import React from 'react';

function Button() {
  return <button>Click Me</button>;
}

export default Button;

之后就可以在其他组件中使用自定义按钮组件：

jsx 复制代码

// App.js
import React from 'react';
import Button from './Button';

function App() {
  return (
    <div className="App">
      <Button />
    </div>
  );
}

export default App;

ReactDOM

ReactDOM，是用于将 React 组件渲染到浏览器中的库。顾名思义它跟 DOM（文档对象模型）有关，它负责处理将 React 组件渲染到 DOM 中，实现页面的展示和交互。在构建 Web 应用时，通常与 React 结合使用。

例如，要把前面自定义的Button组件渲染到页面上的一个<div id="root">元素，可以这样使用：

javascript 复制代码

// index.js
import React from 'react';
import ReactDOM from ;
import Button from './Button';

const rootElement = document.getElementById('root');
ReactDOM.render(<Button />, rootElement);

然而，更常见的是利用 ReactDOM 渲染App根组件（React 18 语法）：

jsx 复制代码

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

🍋 React 开发环境

使用 React 进行开发，必然需要构建 React 开发环境。React 本质是一个 JavaScript 库，因此可以单独引入来开发，又或者通过脚手架工具来快速搭建开发环境。

单独引入 React 库

单独引入 React 库，也就是在<script>标签中引入react.js以及react-dom.js这样的方式来配置开发环境。然而这种方式比较笨拙，对于较大的项目而言势必会拆分出很多单独的 JS 文件，而这些都需要通过<script>标签中引入，看起来十分冗长。当然，我们也可以看看这样的原始开发方式是如何实现的。

引入 React 库

在开发环境中引入react.development.js，react-dom.development.js。

html 复制代码

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

引入 babel 库

为了使 React 的代码能够运行，需要引入babel来将其转为原生 JS 代码。

html 复制代码

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

使用示例

在这段代码里，有一段看起很怪的片段root.render(<h1>Hello React</h1>)，函数中直接传递了 HTML 元素。其实这就是 React 所使用的 JSX 语法（JS 语法扩展），而前面的babel就是用来完成 JSX 到 JS 的转换的。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    
    <script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(<h1>Hello React</h1>);
    </script>
</body>
</html>

脚手架搭建环境

使用脚手架来搭建 React 开发环境是常见和推荐的方式。"脚手架" 实质上是一个开发辅助工具，它可以快速自动地帮助我们构建一个标准的项目开发流程和项目结构。

基本上很多开发框架都会官方对应提供的脚手架工具，而 React 官方提供的脚手架就是 Create React App (CRA)。

安装 Create React App

通过create-react-app可以快速搭建 React 开发环境。其底层是由 Webpack 构建，封装了配置细节，开箱即用。

使用create-react-app要求具备 Node.js 环境，Node 中包括 npm（Node 程序包管理器）和 npx（Node 程序包运行器）

执行命令安装create-react-app：

shell 复制代码

npm install -g create-react-app

创建 CRA 项目

执行命令创建一个 React 应用，项目名称为react-demo：

shell 复制代码

npx create-react-app react-demo

等待执行直到终端出现以下信息即成功：

运行 CRA 项目

进入项目并启动应用：

shell 复制代码

cd react-demo
npm start

出现以下信息即代表应用启动成功：

在浏览器中访问http://localhost:3000：

🍊 React 项目结构

我们通过create-react-app就能快速搭建和运行一个 React 应用。

在创建的过程中，脚手架帮我们做了很多工作：

给项目安装一些 npm 包；
写入 react 应用启动所需要的脚本文件；
创建一系列结构化的目录和文件，建立应用程序的基础架构；
如果本地环境安装了 git 的话，也会顺便应用版本控制。

打印输出刚才的 React 项目目录结构，如下：

shell 复制代码

react-demo
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

根目录文件

根目录文件就是这些：

README.md：项目说明文件，开发者可以用Markdown语法编写项目说明。
package.json：包含了项目基本信息和依赖管理。项目所用到的或在开发过程中安装的第三方模块都可以在这里看到。开发者在克隆这个新项目，通过运行npm install命令初始化时，就会根据package.json 里的依赖配置自动安装对应的模块。
package-lock.json：在使用 npm 安装依赖时自动生成的一个文件，它的主要作用是锁定项目依赖的具体版本信息，确保在不同环境下（比如不同开发人员的电脑上、不同的部署服务器上等）安装的依赖版本完全一致。
.gitignore：用于告诉 Git 哪些文件或目录不需要被纳入版本控制，也就是不需要被 Git 跟踪和提交到代码仓库中。

node_modules 目录

node_modules就是项目中用于存放依赖模块的文件夹。

当我们在项目中使用 npm 安装各种库、框架等依赖项时，这些依赖项都会被下载并解压到node_modules文件夹下。每个依赖在node_modules里都有自己独立的文件夹，里面包含了该依赖实现其功能的源代码、配置文件以及其他必要的资源等。

public 目录

public目录的文件如下：

favicon.ico：用于在浏览器标签页、书签栏和历史记录等地方显示网站图标的文件。
index.html：项目首页的 HTML 页面模板，这是项目必要的文件。在我们开发 React 项目时，通常会以index.html的一个元素（<div id="root"></div>）作为容器渲染内容。
mainifest.json：在index.html中有这样一行片段<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />，这主要是用在 Progressive Web Apps（渐进式网页应用，简称 PWA）相关的场景中。

src 目录

src目了是 React 应用源码存放的目录，我们编写代码都应该在src目录中进行。对于底层使用 Webpack 的 CRA 项目来说，只有src中的文件才会被处理，所以 JS 文件、CSS 文件都应当放在这里。

index.js：整个项目应用的入口文件。
- 在这其中将一个<div id="root"></div>元素作为挂载点来准备渲染 React 组件。
- <React.StrictMode>是一种开发模式下的辅助组件，它能帮助开发者发现一些潜在的问题，比如过时的 API 使用、不安全的生命周期方法调用等
- <App /> 则是整个 React 应用的根组件，里面包含了应用的各种页面结构、业务逻辑、子组件等。
- reportWebVitals()主要用于测量和报告 Web 应用的关键性能指标，比如页面加载时间、交互响应速度等。

jsx 复制代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js：React 项目中最常见的根组件。
- 这其中创建了一个函数类型的组件，其内容就是访问 React 应用时所能看到的界面。

jsx 复制代码

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

🥥 精简项目结构和代码

create-react-app创建的项目中实际上是一个初始的演示用的，其中有很多并不是实际开发中需要的目录或文件。

public 目录

public目录中只保留favicon.ico和index.html。

index.html中同时删除 mainifest.json 和图片文件（如 logo192.png）相关代码。

src 目录

删除src目录中不必要的文件，只保留index.js和App.js。

简化index.js，去掉引用的样式文件和性能指标监控。

jsx 复制代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

简化App.js。

jsx 复制代码

function App() {
  return (
    <div className="App">
      hello react
    </div>
  );
}

export default App;

最后，访问 React 应用就是这样的：

🍓 小结

React 作为构建用户界面的库，与 ReactDOM 协同工作，在 Web 和原生应用开发中发挥重要作用。在开发环境搭建方面，可单独引入或使用脚手架。使用 Create React App 作为脚手架可以快速搭建结构清晰，各目录和文件分工明确的项目开发环境。同时，为适用于项目的初始开发阶段，还介绍了精简项目结构和代码的方法，助于开发者聚焦核心需求。掌握这些内容，为深入学习和高效使用 React 奠定坚实基础，使得能更好地应用于实际项目开发。