当前位置：网站首页 > React.js开发 > 正文

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

React.js开发 来源： 网络 编辑：小编 更新时间：2024-10-30 23:51:57 浏览量：17

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，参考：基于Node.js 搭建React.js开发环境

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

到此这篇基于Node.js 搭建React.js开发环境的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

  • 上一篇： TypeScript+React Web应用开发实战
  • 下一篇： React.FC详细解说

    • 版权声明：

    本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
    如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！


    转载请注明出处，原文链接：https://www.xkablog.com/qdreactjs/3307.html

    相关文章：

  • TypeScript+React Web应用开发实战2024-10-30 23:51:57
  • 常见的web前端开发框架：React.js_前端框架react入门2024-10-30 23:51:57
  • Vue.js与React的全面对比2024-10-30 23:51:57
  • React.js 简介以及一些基本概念2024-10-30 23:51:57
  • React 开发者完全指南：React.FC（）、函数组件 和更多2024-10-30 23:51:57
  • React.FC详细解说2024-10-30 23:51:57
  • React.js 全面解析：从基础到实战案例_react详解2024-10-30 23:51:57
  • React.js：改变Web开发方式的JavaScript库2024-10-30 23:51:57
  • 原生html引入react,如何引入react.js2024-10-30 23:51:57
  • React.js入门级教程附带代码详解2024-10-30 23:51:57
    • ❮ 全屏图片 ❯