React脚手架create-react-app简介

站长

2023年08月29日 17:47 · 阅读数 12

往期回顾：

React 的常用脚手架

React 的脚手架有很多，以下是比较常用的几个：

create-react-app：官方提供的脚手架，简单易用，可以快速创建一个基于 React 的项目。
Next.js：基于 React 的服务器渲染框架，可以用于构建 SSR 应用和静态网站。
Gatsby：静态网站生成器，可以生成高性能的静态网站，适合构建博客和电子商务网站。
React Native CLI：用于构建原生移动应用程序的 React 框架。
React Boilerplate：一款 React 应用程序脚手架，包含了 React、Redux、React Router 和 webpack 等相关库和工具。
UMI：它是一个完整的企业级脚手架，提供了路由、插件、中间件、构建等方面的功能，可以满足不同项目的需求；
Dva.js：它是一个基于 React 和 Redux 的数据流框架，可以用于快速构建复杂的单页应用。
vite：很好用！很快！建议直接看vite官网学习，笔者使用的就是vite！。

create-react-app

create-react-app底层采用webapck作为构建工具。

项目创建

使用 create-react-app 创建一个 React 项目的流程如下

全局安装create-react-app

npm install -g create-react-app

React脚手架create-react-app简介

创建一个名为 my-react的项目

其中 my-react 是你想要创建项目的名称，你可以把它替换成任何你想要的名称。

 create-react-app my-react

React脚手架create-react-app简介

进入 my-react 目录，启动项目，在终端里执行命令 npm start，它会自动打开一个浏览器窗口并且显示你的React应用。或者浏览器输入http://localhost:3000/也可以访问

 npm start

页面效果

React脚手架create-react-app简介

这样你就成功创建了一个 React 应用，你可以继续开发和修改它，并且使用命令 npm run build 打包生产环境的应用。

注，本文以为例来深入介绍脚手架，版本信息如下

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

脚手架目录

项目创建完毕后，我们完整的项目结构如图。

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

public 目录

public 目录用于存放一些不需要被打包的静态文件，例如：HTML 文件、图片、字体文件等

index.html: 是唯一需要存在的 HTML 文件，所有 React 组件都将被渲染在这个 HTML 文件内。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- %PUBLIC_URL%代表public文件夹的路径 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 开启理想窗口，用于移动端的适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 用于配置浏览器页签+地址栏颜色（仅支持安卓手机浏览器） -->
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- 用于指定网页添加到手机主屏幕后的图标，苹果手机 -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!-- 应用套壳时使用 -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <!-- 浏览器不支持js显示的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

manifest.json: 是一个 Web App 的配置文件，包含有关应用程序的信息，例如名称、描述、图标等。
favicon.ico: 是应用程序的图标文件，通常会在 Web 浏览器中显示。

React脚手架create-react-app简介

robots.txt: 是一个标准的互联网协议，用于告诉搜索引擎哪些页面可以抓取，哪些不能抓取。

src目录

src 文件夹是创建 React 应用程序时存放你的主要源代码的地方

└─ src
   ├─ App.css
   ├─ App.js
   ├─ App.test.js
   ├─ index.css
   ├─ index.js
   ├─ logo.svg
   ├─ reportWebVitals.js
   └─ setupTests.js

reportWebVitals.js是一个网页性能监测配置文件，我们不用关注
setupTests.js是单元测试文件，我们同样不用关注
App.js是应用程序的根组件。

// src\App.js
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;

脚手架文件中的代码导出了一个函数式组件。

App.css 是主应用程序的的样式文件。
App.test.js 是应用测试文件可以忽略不管。
index.js：应用程序的入口文件。这个文件渲染了 App 组件，并向其传递了一些配置。

// 导入 React 库，这是必需的，因为我们的应用程序要用到 React 组件
import React from 'react';
// 导入了ReactDOM，这个库是将 React 组件渲染到页面中的关键所在。
import ReactDOM from 'react-dom/client';
// 这是应用程序的样式文件
import './index.css';
// 导入了 App 组件，这是我们的应用程序的主组件，通常包含其他组件
import App from './App';
// 单元测试文件
import reportWebVitals from './reportWebVitals';
// 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 性能监测，我们可以删除
reportWebVitals();

createRoot 方法返回一个对象，该对象具有 render 方法，用于渲染 React 应用。render 方法接受一个 React 元素作为参数，表示要渲染的组件树。

在这段代码中，我们使用 React.StrictMode 组件来启用 React 的严格模式。严格模式会检查代码中的一些问题，并在开发环境下警告我们。然后我们将组件包裹在 StrictMode 组件中，表示该组件及其所有子组件都将启用严格模式。

最后，我们使用 render 方法将应用渲染到 root 元素中。这意味着 React 将会渲染组件，并将其渲染的结果插入到 root 元素中。