首页 技术 正文
技术 2022年11月11日
0 收藏 823 点赞 4,598 浏览 7384 个字

在 Windows 10 64 下创建 React App

由 SHUIJINGWAN · 2018/03/26

 

1、在官方网站:https://nodejs.org/zh-cn/ 下载推荐版本:8.10.0 LTS,如图1

windows下安装react

图1

2、右键安装,提示:Windows SmartScreen can’t be reached right now,点击 Run 按钮,如图2
Windows SmartScreen can’t be reached right now
Check your internet connection.Windows SmartScreen is unreachable and can’t help you decide if this app is okay to run.
Publisher: Node.js
App: Node-v8.10.0-x64.msi
Windows SmartScreen现在无法联系到
检查您的互联网连接.Windows SmartScreen无法访问,无法帮助您决定此应用是否可以运行。
发布者:Node.js
应用程序:Node-v8.10.0-x64.msi

windows下安装react

图2

3、Node.js Setup,点击 Next 按钮,如图3
Welcome to the Node.js Setup Wizard
The Setup Wizard will install Node.js on your computer.
欢迎来到Node.js安装向导
安装向导将在您的计算机上安装Node.js。

windows下安装react

图3

4、Node.js Setup,勾选 I accept the terms in the license Agreement,点击 Next 按钮,如图4
End-User License Agreement
Please read the following license agreement carefully
I accept the terms in the license Agreement
终端用户许可协议
请仔细阅读以下许可协议
我接受许可协议中的条款

windows下安装react

图4

5、Node.js Setup,点击 Next 按钮,如图5
Destination Folder
Choose a custom location or click Next to install.
Install Node.js to:
C:\Program Files\nodejs\
Change
目标文件夹
选择一个自定义位置或单击下一步进行安装。
安装 Node.js 到:
C:\Program Files\nodejs\
更改

windows下安装react

图5

6、Node.js Setup,默认设置就好,点击 Next 按钮,如图6
Custom Setup
Select the way you want features to be installed.
Click the icons in the tree below to change the way features will be installed.
自定义设置
选择您想要安装功能的方式。
单击下面树中的图标来更改要安装的功能的方式。

Node.js runtime: Install the core Node.js runtime(node.exe).This feature frees up 117KB on your hard drive.It has 2 of 2 subfeatures selected.The subfeatures require 0KB on your hard drive.
Will be installed on local hard drive
Entire featurn will be installed on local hard drive
Feature will be installed when required
Node.js运行时:安装核心Node.js运行时(node.exe)。该功能可在硬盘上释放117KB。它具有2个子功能中的2个。硬盘上的子功能需要0KB。
将安装在本地硬盘上
整个功能将安装在本地硬盘上
功能将在需要时安装

Performance counters: Install support for Node.js-specific performance counters.This feature requires 0KB on your hard drive.
Will be installed on local hard drive
Entire feature will be installed on local hard drive
Feature will be installed when required
Entire feature will be unavailable
性能计数器:安装对Node.js特定性能计数器的支持。此功能需要硬盘驱动器上有0KB。
将安装在本地硬盘上
整个功能将安装在本地硬盘上
功能将在需要时安装
整个功能将不可用

Event tracing(ETW): Install support for event tracing(ETW) events generated by Node.js.This feature requires 0KB on your hard drive.
Will be installed on local hard drive
Entire feature will be installed on local hard drive
Feature will be installed when required
Entire feature will be unavailable
事件跟踪(ETW):安装对由Node.js生成的事件跟踪(ETW)事件的支持。此功能需要硬盘驱动器上有0KB。
将安装在本地硬盘上
整个功能将安装在本地硬盘上
功能将在需要时安装
整个功能将不可用

npm package manager: Install npm,the recommended package manager for Node.js.This feature requires 1053KB on your hard drive.
Will be installed on local hard drive
Entire feature will be installed on local hard drive
Feature will be installed when required
Entire feature will be unavailable
npm软件包管理器:安装npm,Node.js的推荐软件包管理器。此功能需要硬盘上的1053KB。
将安装在本地硬盘上
整个功能将安装在本地硬盘上
功能将在需要时安装
整个功能将不可用

Online documentation shortcuts: Add start menu entries that link the the online documentation for Node.js and the Node.js website.This feature requires 1KB on your hard drive.
Will be installed on local hard drive
Entire feature will be installed on local hard drive
Feature will be installed when required
Entire feature will be unavailable
在线文档快捷方式:添加链接Node.js在线文档和Node.js网站的开始菜单条目。此功能需要1KB的硬盘驱动器。
将安装在本地硬盘上
整个功能将安装在本地硬盘上
功能将在需要时安装
整个功能将不可用

Add to PATH: Add Node.js,npm and modules that were globally installed by npm to the PATH environment variable.This feature requires 0KB on your hard drive.It has 2 or 2 subfeatures selected.The subfeatures require 2KB on your hard drive.
Will be installed on local hard drive
Entire feature will be installed on local hard drive
Will be installed to run from network
Entire feature will be installed to run from network
Feature will be installed when required
Entire feature will be unavailable
添加到PATH:将由npm全局安装的Node.js,npm和模块添加到PATH环境变量中。此功能需要硬盘驱动器上有0KB。它具有2或2个子功能。硬盘驱动器的子功能需要2KB。
将安装在本地硬盘上
整个功能将安装在本地硬盘上
将安装从网络运行
整个功能将安装从网络运行
功能将在需要时安装
整个功能将不可用

Node.js and npm: Add Node.js and npm(if installed) to the PATH environment variable.This feature requires 1KB on your hard drive.
Will be installed on local hard drive
Entire feature will be installed on local hard drive
Feature will be installed when required
Entire feature will be unavailable
Node.js和npm:将Node.js和npm(如果已安装)添加到PATH环境变量中。此功能在硬盘上需要1KB。
将安装在本地硬盘上
整个功能将安装在本地硬盘上
功能将在需要时安装
整个功能将不可用

npm modules: Add modules that are installed globally by npm to the PATH environment variable.This option works for the current user only;other users need to update their…This feature requires 1KB on your hard drive.
Will be installed on local hard drive
Entire feature will be installed on local hard drive
Feature will be installed when required
Entire feature will be unavailable
npm模块:将npm全局安装的模块添加到PATH环境变量中。此选项仅适用于当前用户;其他用户需要更新其…此功能需要1KB的硬盘驱动器。
将安装在本地硬盘上
整个功能将安装在本地硬盘上
功能将在需要时安装
整个功能将不可用

windows下安装react

图6

7、Node.js Setup,点击 Install 按钮,如图7
Ready to install Node.js
Click Install to begin the installation.Click Back to review or change any of your installation settings.Click Cancel to exit the wizard.
准备好安装Node.js
单击安装开始安装。单击返回查看或更改任何安装设置。单击取消退出向导。

windows下安装react

图7

8、Node.js Setup,点击 Finish 按钮,如图8
Completed the Node.js Setup Wizard
Click the Finish button to exit the Setup Wizard.
Node.js has been successfully installed.
完成了Node.js安装向导
单击完成按钮退出安装向导。
Node.js已成功安装。

windows下安装react

图8

9、使用 React 开发新项目,参考网址:https://doc.react-china.org/docs/add-react-to-a-new-app.html

10、以管理员身份运行 Windwos PowerShell,依次执行如下命令,报错:npm ERR! Error: EPERM: operation not permitted,如图9
npm install -g create-react-app
create-react-app my-app

windows下安装react

图9

123456789101112131415161718192021222324252627282930313233343536 Creating a new React app in E:\wwwroot\my-app. Installing packages. This might take a couple of minutes.Installing react, react-dom, and react-scripts...  > uglifyjs-webpack-plugin@0.4.6 postinstall E:\wwwroot\my-app\node_modules\uglifyjs-webpack-plugin> node lib/post_install.js npm ERR! path E:\wwwroot\my-app\node_modules\fsevents\node_modules\getpass\node_modulesnpm ERR! code EPERMnpm ERR! errno -4048npm ERR! syscall scandirnpm ERR! Error: EPERM: operation not permitted, scandir 'E:\wwwroot\my-app\node_modules\fsevents\node_modules\getpass\node_modules'npm ERR!  { Error: EPERM: operation not permitted, scandir 'E:\wwwroot\my-app\node_modules\fsevents\node_modules\getpass\node_modules'npm ERR!   stack: 'Error: EPERM: operation not permitted, scandir \'E:\\wwwroot\\my-app\\node_modules\\fsevents\\node_modules\\getpass\\node_modules\'',npm ERR!   errno: -4048,npm ERR!   code: 'EPERM',npm ERR!   syscall: 'scandir',npm ERR!   path: 'E:\\wwwroot\\my-app\\node_modules\\fsevents\\node_modules\\getpass\\node_modules' }npm ERR!npm ERR! Please try running this command again as root/Administrator. npm ERR! A complete log of this run can be found in:npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-03-26T07_47_26_461Z-debug.log Aborting installation.  npm install --save --save-exact --loglevel error react react-dom react-scripts has failed. Deleting generated file... node_modulesDeleting generated file... package.jsonDeleting my-app / from E:\wwwrootDone.

11、依次执行如下命令:验证:验证缓存文件夹的内容,垃圾收集任何不需要的数据,并验证缓存索引和所有缓存数据的完整性。如图10
npm cache verify
create-react-app my-app

windows下安装react

图10

123456789101112131415161718192021222324252627282930313233343536 Creating a new React app in E:\wwwroot\my-app. Installing packages. This might take a couple of minutes.Installing react, react-dom, and react-scripts...  > uglifyjs-webpack-plugin@0.4.6 postinstall E:\wwwroot\my-app\node_modules\uglifyjs-webpack-plugin> node lib/post_install.js + react-dom@16.2.0+ react@16.2.0+ react-scripts@1.1.1added 1443 packages in 233.928s Success! Created my-app at E:\wwwroot\my-appInside 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 my-app  npm start Happy hacking!

12、依次执行如下命令:现在可以在浏览器中查看我的应用程序,如图11
cd my-app
npm start

windows下安装react

图11

转载自http://www.shuijingwanwq.com/2018/03/26/2484/

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,023
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,513
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,360
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,143
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,774
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,852