基于Node.js 搭建React.js开发环境

最新推荐文章于 2024-07-19 18:42:22 发布

在奋斗的大道

最新推荐文章于 2024-07-19 18:42:22 发布

阅读量1.2k

点赞数

分类专栏： nodejs

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/111461428

版权

nodejs 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

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