了解构建 React 应用程序的工作流程

2020-01-10 08:00:00 · 飞浪

介绍 React是一个开源的JavaScript库，用于开发用户界面。在本指南中，我们将了解创建React应用程序的步骤，并了解CreateReactApp工具生成的目录结构（文件/文件

介绍

React 是一个开源的 JavaScript 库，用于开发用户界面。在本指南中，我们将了解创建 React 应用程序的步骤，并了解 Create React App 工具生成的目录结构（文件/文件夹）。当我们开发基于 React 的 Web 应用程序时，无论我们开发的是单页应用程序还是多页应用程序，都需要广泛的工作流程。

为什么要遵循此工作流程

以下是我们需要遵循工作流程的一些重要原因：

• 我们需要优化代码。对于使用 React 开发的应用来说，优化代码、精简代码对于提升应用性能非常重要。

• 利用 JavaScript 的最新功能是采用 React 构建工作流的另一个重要原因。JavaScript 不断发展，有时会有新功能可用，但浏览器尚未准备好支持该特定功能。拥有一个可以将应用程序中的代码转换为浏览器可以轻松理解的代码的工具（例如 Babel 转译器）会很有帮助。

• 另一个重要原因与生产力有关。CSS 中的自动前缀是 JavaScript 的最新功能之一，有助于在各种浏览器中实现对 CSS 功能的最大支持。如果手动添加这些功能，则需要付出巨大努力。

• 此外，就生产力而言，我们可以使用 linter 工具。在我们的 IDE 中安装 linter 工具可以节省我们很多时间，因为它可以在编译和执行代码之前突出显示错误。以下代码显示了 linter 的工作方式。我们可以看到代码下方显示的错误。

      import React from "react";
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="noreferrer noopener"
        >
          Learn React
        </a>
      </header>
    </div>
  );
);
export default App;
// Error 
23:1 error Parsing error: Unexpected token 21 | </div> 22 | ); > 23 | ); | ^ 24 | export default App;
// Error
    

如何创作

上面已经讨论了使用 React 构建工作流的原因。现在，下一步是了解如何实现它。

• 拥有依赖管理工具是最重要的。这些是第三方提供的库。React、React DOM 以及我们将要使用的几乎所有构建工具都是依赖项。Node 的包管理器（也称为 NPM）是包和依赖管理必不可少的构建工具。

• 除了依赖管理工具，我们还可以使用打包器来生成模块化代码。如果代码是模块化的，它将有多个文件，其中包含应用程序不同部分的代码，这些代码执行各自的功能。例如，Webpack 是一个打包器，当我们需要将拆分文件发送到浏览器时，它非常有用。有些浏览器不支持多个文件，即使它们支持，我们也无法实际发送针对这些文件的多个请求。

• 最后，需要一个服务器来在我们的本地计算机上运行和测试代码。

其中一些可能会让初学者感到困惑。但幸运的是，React 团队开发了一个工具来创建支持我们上面讨论的所有要点的应用程序，我们不需要手动配置任何东西。这个特殊的工具就是 Create React App。需要注意的是，你应该让 NPM 服务器保持运行，这样就可以立即观察到代码中的所有更改。讨论一些主要文件和文件夹很重要。

      .
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js
├── package.json
├── package-lock.json
├── README.md
    

“package.json”文件包含项目的所有依赖项。

      {
  "name": "my-react-app",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 2 Chrome version",
      "last 3 Firefox version",
      "last 5 Safari version"
    ]
  }
}
    

通过 package.json 文件可以看到我们的项目有三个依赖，也可以看到我们引入了 React，项目正在使用：

• React 的最新版本。

• React DOM，它提供特定于 DOM 的方法。在 index.js 文件中，仅使用此模块中的render方法将应用程序渲染到 DOM。

• React Scripts，一个包含满足 React 构建工作流要求的脚本和配置的包，其中包括开发服务器和最新的 JavaScript 功能。

• node_modules文件夹：这是应用程序的所有依赖项以及子依赖项所在的位置。package.json 文件中仅讨论了三个依赖项：React、React DOM 和 React Scripts。具体来说，React Scripts 有许多其他依赖项，其中包括编译我们代码的所有构建工具等等。需要注意的是，node_modules 文件夹中的任何内容都不应修改。

这是我们项目的根文件夹，我们的 Web 服务器直接与其交互。此文件夹中有一个名为 index.html 的重要文件。它是迄今为止项目中唯一的 HTML 文件，包含一个简单的 HTML 页面，如下所示：

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used 
		when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of 
		%PUBLIC_URL% in the tags above.
      It will be replaced with 
the URL of the `public` folder during the build.
      Only files inside the `public` folder 
can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with 
client-side routing and a non-root public URL.
      Learn how to configure 
a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable 
JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, 
you will see an empty page.
You can add webfonts, meta tags, 
or analytics to this file.
      The build step will place 
the bundled scripts into the <body> tag.
To begin the development, 
run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
    

React 构建工作流会安装上述文件中的脚本文件。我们可以向此文件添加 HTML 代码，但建议不要更新它。这里需要讨论一个重要的ID 为root的div元素：

      <div id=”root”> </div>

这个div的意义在于我们的 React 应用将被渲染到这个div上。CSS 库和元标记可以在此 HTML 文件中导入。manifest.json 文件如下所示：

      {
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}
    

此文件向浏览器提供有关应用程序的信息。例如，此文件对于移动浏览器至关重要，以便于添加 Web 应用程序的快捷方式。

另一个重要文件夹是src。它包含我们将要使用的实际 React 应用程序的文件。index.js 文件位于此文件夹中；：

      import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// To have our app work offline and have faster loading, we can change unregister() to register() below. 
// However, this has some pitfalls.
// We can get to know more about service workers at the following link; https://bit.ly/CRA-PWA
serviceWorker.unregister();
    

从该脚本访问根 DOM 元素，即 HTML 文件中 id 为root的元素。

      ReactDOM.render(<App />, document.getElementById('root'));
    

你可能已经注意到，上面的代码使用render方法来渲染 React 应用。还有一个对App对象的引用，它是从App文件导入的。

      import App from './App';
    

无需为App文件添加扩展名 .js，因为它是由 React 构建工作流自动添加的。以下是我们的 App.js：

      import React from "react";
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是我们项目中唯一的 React 组件。下面是 App.css；

      .App {
  text-align: center;
}
.App-logo {
  animation: App-logo-turn 5s linear 2s infinite alternate;
  height: 40vh;
  pointer-events: none;
}
.App-header {
  background-color: #efefef;
  min-height: 150vh;
  display: flex;
  flex-direction: row;
  align-items: left;
  justify-content: left;
  font-size: calc(10px + 3vh);
  color: white;
}
.App-link {
  color: #efefef;
}
@keyframes App-logo-turn {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
    

App.js 中 app 组件的样式由 App.css 文件决定。但是，此处定义的样式不仅适用于 App 组件。这些实际上是全局样式。还有 index.css 文件，如下所示：

      body {
  margin: 0;
  font-family: "Times New Roman", Times, serif, Arial, sans-serif, Helvetica;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
    

上面的 CSS 代表全局样式。registerServiceWorker.js 文件对于注册任何服务工作者都很重要。它加载项目的脚本文件，但不需要在这里添加任何配置。如果我们不打算使用任何服务工作者，也可以将其删除。最后，我们有以下 App.test.js 文件：

      import React from 'react';
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;
    

上述代码的目的是为应用程序的各个组件编写测试。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

了解构建 React 应用程序的工作流程

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from "react"; 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="noreferrer noopener" > Learn React </a> </header> </div> ); ); export default App; // Error 23:1 error Parsing error: Unexpected token 21 | </div> 22 | ); > 23 | ); | ^ 24 | export default App; // Error

. ├── node_modules ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── README.md ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── registerServiceWorker.js ├── package.json ├── package-lock.json ├── README.md

{ "name": "my-react-app", "version": "1.0.0", "private": true, "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 2 Chrome version", "last 3 Firefox version", "last 5 Safari version" ] } }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" />  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />  <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div>  </body> </html>

{ "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" } ], "start_url": ".", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" }

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(<App />, document.getElementById('root')); // To have our app work offline and have faster loading, we can change unregister() to register() below. // However, this has some pitfalls. // We can get to know more about service workers at the following link; https://bit.ly/CRA-PWA serviceWorker.unregister();

import React from "react"; 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 { text-align: center; } .App-logo { animation: App-logo-turn 5s linear 2s infinite alternate; height: 40vh; pointer-events: none; } .App-header { background-color: #efefef; min-height: 150vh; display: flex; flex-direction: row; align-items: left; justify-content: left; font-size: calc(10px + 3vh); color: white; } .App-link { color: #efefef; } @keyframes App-logo-turn { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }

body { margin: 0; font-family: "Times New Roman", Times, serif, Arial, sans-serif, Helvetica; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; }

import React from 'react'; 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;