React.js简介：

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

特点：

• 1.声明式设计 −React采用声明范式，可以轻松描述应用。

• 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

• 3.灵活 −React可以与已知的库或框架很好地配合。

• 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

• 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

基于node.js环境搭建React.js项目

1、安装node.js，参考：https://blog.csdn.net/zhouzhiwengang/article/details/70307620

2、nodejs 搭建React.js环境

  执行如下指令：

cnpm install -g create-react-app

C:\Users\zzg>cnpm install -g create-react-app 
Downloading create-react-app to C:\nodejs\node_global\node_modules\create-react-app_tmp 
Copying C:\nodejs\node_global\node_modules\create-react-app_tmp\_create-react-app@4.0.1@create-react-app to C:\nodejs\node_global\node_modules\create-react-app 
Installing create-react-app's dependencies to C:\nodejs\node_global\node_modules\create-react-app/node_modules 
[1/11] commander@4.1.1 installed at node_modules\_commander@4.1.1@commander 
[2/11] envinfo@7.7.3 installed at node_modules\_envinfo@7.7.3@envinfo 
[3/11] semver@7.3.2 installed at node_modules\_semver@7.3.2@semver 
[4/11] validate-npm-package-name@3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name 
[5/11] chalk@4.1.0 installed at node_modules\_chalk@4.1.0@chalk 
[6/11] prompts@2.4.0 installed at node_modules\_prompts@2.4.0@prompts 
[7/11] fs-extra@9.0.1 installed at node_modules\_fs-extra@9.0.1@fs-extra 
[8/11] tmp@0.2.1 installed at node_modules\_tmp@0.2.1@tmp 
[9/11] hyperquest@2.1.3 installed at node_modules\_hyperquest@2.1.3@hyperquest 
[10/11] cross-spawn@7.0.3 installed at node_modules\_cross-spawn@7.0.3@cross-spawn 
[11/11] tar-pack@3.4.1 installed at node_modules\_tar-pack@3.4.1@tar-pack 
All packages installed (66 packages installed from npm registry, used 2s(network 2s), speed 466.97kB/s, json 60(126.31kB), tarball 711.9kB) 
[create-react-app@4.0.1] link C:\nodejs\node_global\create-react-app@ -> C:\nodejs\node_global\node_modules\create-react-app\index.js 

3、创建React.js 项目指令

执行如下指令：npx create-react-app C:\react_workspace\one

C:\nodejs\node_global>npx create-react-app C:\react_workspace\one 
 
Creating a new React app in C:\react_workspace\one. 
 
Installing packages. This might take a couple of minutes. 
Installing react, react-dom, and react-scripts with cra-template... 
 
 
> core-js@2.6.12 postinstall C:\react_workspace\one\node_modules\babel-runtime\node_modules\core-js 
> node -e "try{require('./postinstall')}catch(e){}" 
 
 
> core-js@3.8.1 postinstall C:\react_workspace\one\node_modules\core-js 
> node -e "try{require('./postinstall')}catch(e){}" 
 
 
> core-js-pure@3.8.1 postinstall C:\react_workspace\one\node_modules\core-js-pure 
> node -e "try{require('./postinstall')}catch(e){}" 
 
 
> ejs@2.7.4 postinstall C:\react_workspace\one\node_modules\ejs 
> node ./postinstall.js 
 
+ react@17.0.1 
+ cra-template@1.1.1 
+ react-dom@17.0.1 
+ react-scripts@4.0.1 
added 1905 packages from 721 contributors and audited 1909 packages in 325.865s 
 
122 packages are looking for funding 
  run `npm fund` for details 
 
found 0 vulnerabilities 
 
 
Initialized a git repository. 
 
Installing template dependencies using npm... 
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself. 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\chokidar\node_modules\fsevents): 
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.2.1 (node_modules\fsevents): 
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.2.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents): 
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents): 
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 
 
+ @testing-library/jest-dom@5.11.6 
+ web-vitals@0.2.4 
+ @testing-library/react@11.2.2 
+ @testing-library/user-event@12.6.0 
added 29 packages from 77 contributors and audited 1938 packages in 35.605s 
 
122 packages are looking for funding 
  run `npm fund` for details 
 
found 0 vulnerabilities 
 
Removing template package using npm... 
 
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself. 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\chokidar\node_modules\fsevents): 
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.2.1 (node_modules\fsevents): 
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.2.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents): 
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents): 
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 
 
removed 1 package and audited 1937 packages in 8.856s 
 
122 packages are looking for funding 
  run `npm fund` for details 
 
found 0 vulnerabilities 
 
 
Created git commit. 
 
Success! Created one at C:\react_workspace\one 
Inside that directory, you can run several commands: 
 
  npm start 
    Starts the development server. 
 
  npm run build 
    Bundles the app into static files for production. 
 
  npm test 
    Starts the test runner. 
 
  npm run eject 
    Removes this tool and copies build dependencies, configuration files 
    and scripts into the app directory. If you do this, you can’t go back! 
 
We suggest that you begin by typing: 
 
  cd C:\react_workspace\one 
  npm start 
 
Happy hacking!

4、启动React.js 项目

执行如下指令：cnpm start

C:\react_workspace\one>cnpm start 
 
> one@0.1.0 start C:\react_workspace\one 
> react-scripts start 
 
i ｢wds｣: Project is running at http://192.168.1.74/ 
i ｢wds｣: webpack output is served from 
i ｢wds｣: Content not from webpack is served from C:\react_workspace\one\public 
i ｢wds｣: 404s will fallback to / 
Starting the development server... 
Compiled successfully! 
 
You can now view one in the browser. 
 
  Local:            http://localhost:3000 
  On Your Network:  http://192.168.1.74:3000 
 
Note that the development build is not optimized. 
To create a production build, use npm run build.

5、React.js 项目访问地址:http://localhost:3000