数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究为什么需要在React.js中构建工作流
构建工作流有助于以下方面
- 它优化代码
- 使用下一代JavaScript (ES6)
- 这是单页面/多页面应用程序的标准方法
- 高效的方法
- 轻松集成使用NPM或Yarn的依赖项
- 使用像webpack这样的打包器来更轻松地进行模块化代码和代码发布
- 预编译器，例如Babel
- 我们可以使用本地开发服务器来测试应用程序
构建工作流看起来很复杂，但是React社区已经通过一个简单的命令简化了它。
create-react-app.
要使用create-react-app，我们需要在我们的机器上安装node.js。
你可以在终端使用以下命令检查node是否已安装：
node –version
如果尚未安装，请安装最新的node.js。安装node.js的同时，npm也会被安装。
要检查npm，请在终端使用以下命令：
npm -version
npm是节点包管理器，它帮助我们处理项目的依赖项。yarn也是类似的工具。
完成上述步骤后，让我们创建React应用程序。
- npm install -g create-react-app
- create-react-app my-app
- cd my-app
- npm start
这些命令的描述如下：
npm install -g create-react-app => 它安装React的全局配置，可以为单页应用程序构建常用的工作流。
在Linux/macOS系统上执行此命令可能需要在前面添加sudo关键字。
- create-react-app my-app => 使用此命令，它将创建一个名为my-app的项目，其中包含所有常用的构建工作流。
- cd my-app => 我们进入my-app文件夹。
- npm start => 它通常在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依赖项。
当我们运行**npm start**时，它实际上运行的是上面文件中(react-scripts start)命令。
类似地，build命令运行。它优化我们的代码，无需运行开发服务器，并创建可立即使用的文件。
node_modules包含所有其他必需的依赖项，但我们通常不需要在那里进行任何操作。
PUBLIC文件夹
我们在public文件夹中有一个重要的文件，那就是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.ac.cn"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
664 次浏览
