为什么需要在React.js中构建工作流程
在做下面的事情时建立工作流程帮助
它优化代码
使用下一代JavaScript(ES6)
这是单页/多页应用程序的标准方法
生产方法
轻松将依赖项与NPM或Yarn集成
使用打包器（如Web-pack）来简化模块化代码和运输代码
像Babel这样的预编译器
我们可以使用本地开发服务器来测试应用
构建工作流程看起来很复杂，但是React社区只需一个命令就使我们变得简单
create-react-app.
要使用create-react-app，我们需要在计算机上安装nodejs。
您可以在终端上使用以下命令检查节点是否已安装-
node –version
如果尚未安装，请安装最新的nodejs。与节点js一起，npm也已安装。
要检查npm，请在终端上使用以下命令-
npm -version
npm是一个节点包管理器，可以帮助我们处理项目的依赖关系。纱线也是类似的工具。
完成上述步骤后，让我们创建react应用程序。
npminstall-gcreate-react-app
创建反应应用程序我的应用程序
cdmy-app
npm开始
这些命令的说明如下-
npminstall-gcreate-react-app=>它安装了react的全局配置，可以为单页面应用构建常用的工作流程。
在linux/macos上执行此命令之前，可能需要添加sudo关键字。
create-react-appmy-app=>使用此命令将创建一个名为my-app的项目，其中包含所有常见的构建工作流程。
cdmy-app=>我们进入my-app文件夹
npmstart=>它通常在端口3000上在本地开发服务器上启动my-app
我们可以在同一终端上使用ctrl+c关闭开发服务器。
package.json文件包含项目所需的依赖项。
{
"name": "my-app",
"version": "0.1.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 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}如您所见，我们已经添加了react，react-dom和react-scripts依赖项。
当我们运行npmstart时，它实际上从上面的文件中运行（react-scriptsstart）命令。
同样，build命令运行。它可以在不运行开发服务器的情况下优化我们的代码，并创建可立即使用的文件。
节点模块包含所有其他必需的依赖项，但是我们通常不需要在此做任何事情。
公用文件夹
我们在公用文件夹中有一个重要文件，即index.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`. --> </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>
我们的脚本文件将通过工作流本身注入到这个index.html文件中，这就是我们不需要手动添加的原因。
它在index.html的下一行呈现React组件
<div id="root"></div>
SRC文件夹
在src文件夹中，我们有index.js文件，在此文件中，我们从index.html文件中获取根div并将其安装在此处。
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'));
serviceWorker.unregister();我们从app.js文件中获取内容。随时在render方法中编辑文本，并在浏览器上查看更改
import React from 'react';
import logo from './logo.svg';
import './App.css';
x
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.
x </p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;