当前位置: 首页 > 编程笔记 >

为什么需要在React.js中构建工作流程

彭阳朔
2023-03-14
本文向大家介绍为什么需要在React.js中构建工作流程,包括了为什么需要在React.js中构建工作流程的使用技巧和注意事项,需要的朋友参考一下

在做下面的事情时建立工作流程帮助

  • 它优化代码

  • 使用下一代JavaScript(ES6)

  • 这是单页/多页应用程序的标准方法

  • 生产方法

  • 轻松将依赖项与NPM或Yarn集成

  • 使用打包器(如Web-pack)来简化模块化代码和运输代码

  • 像Babel这样的预编译器

  • 我们可以使用本地开发服务器来测试应用

构建工作流程看起来很复杂,但是React社区只需一个命令就使我们变得简单

create-react-app.

要使用create-react-app,我们需要在计算机上安装node js。

您可以在终端上使用以下命令检查节点是否已安装-

node –version

如果尚未安装,请安装最新的node js。与节点js一起,npm也已安装。

要检查npm,请在终端上使用以下命令-

npm -version

npm是一个节点包管理器,可以帮助我们处理项目的依赖关系。纱线也是类似的工具。

完成上述步骤后,让我们创建react应用程序。

  • npm install -g create-react-app

  • 创建反应应用程序我的应用程序

  • cd my-app

  • npm开始

这些命令的说明如下-

  • npm install -g create-react-app =>它安装了react的全局配置,可以为单页面应用构建常用的工作流程。

    linux / mac os上执行此命令之前,可能需要添加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命令运行。它可以在不运行开发服务器的情况下优化我们的代码,并创建可立即使用的文件。

节点模块包含所有其他必需的依赖项,但是我们通常不需要在此做任何事情。

公用文件夹

我们在公用文件夹中有一个重要文件,即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;
 类似资料:
  • Nuttx工作线程(LP和HP)具有轮询间隔,仅针对工作线程0。我想知道为什么需要轮询间隔? 当有人将一个新工作排入工作队列时,将向一个辅助线程发出处理它的信号。如果所有工作线程都忙,则当线程完成当前工作并再次检查队列时,将处理排队的工作。 与sched_garbage_collection()工作一样,工作线程由sched_signal_free()发出信号。 那么当需要轮询间隔时会是什么情况呢

  • 我的问题是关于StatefulNetworkWordCount的例子: https://github.com/apache/spark/blob/master/examples/src/main/scala/org/apache/spark/examples/streaming/StatefulNetworkWordCount.scala Q1)stateDstream RDD由驱动程序或工作节点

  • 问题内容: 在Golang中,我们将结构体与接收器方法结合使用。到这里为止一切都很完美。 我不确定什么是接口。我们在结构中定义方法,如果要在结构上实现方法,则无论如何都要在另一个结构下再次编写该方法。 这意味着接口似乎只是方法定义,仅占用了页面上多余的空间。 有没有解释我为什么需要接口的示例? 问题答案: 接口太大了,不能在这里给出全面的答案,但是有些事情需要弄清楚它们的用途。 接口是一种 工具

  • 问题内容: 我知道String [] args是作为参数传递给main的字符串数组。 但是,当您不将其包含为参数时(即使您不使用它),它也会引发异常。那么为什么需要它呢?另外,为什么不能是int []或boolean []? 问题答案: 这是一个字符串,因为命令行以文本形式表示。如果要将文本转换为整数或布尔值,则必须自己做- 操作系统或Java引导程序如何确切知道您希望如何解析所有内容?我想Jav

  • 问题内容: 我可以将数据发送到服务器,但是只有在使用FromBody-Attribute时才可以。 为什么无法使用Post从主体自动读取json数据? 后端Web API 前端angularjs 问题答案: 仅因为某事是POST请求,所以没有明确的规则如何传递参数。POST请求仍可以包含URL中编码的查询参数。方法参数应该是“简单”类型(字符串,整数等)的查询参数。 通常,复杂类型应该是POST表