在 Windows 10 64 下創建 React App
1、在官方網站：https://nodejs.org/zh-cn/ 下載推薦版本：8.10.0 LTS，如圖1
圖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
圖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。
圖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
終端用戶許可協議
請仔細閱讀以下許可協議
我接受許可協議中的條款
圖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\
更改
圖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的硬盤驅動器。
將安裝在本地硬盤上
整個功能將安裝在本地硬盤上
功能將在需要時安裝
整個功能將不可用
圖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
單擊安裝開始安裝。單擊返回查看或更改任何安裝設置。單擊取消退出向導。
圖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已成功安裝。
圖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
圖9
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
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_modules
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall scandir
npm ERR! Error: EPERM: operation not permitted, scandir 'E:\wwwroot\my-app\node_modules\fsevents\node_modules\getpass\no
de_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_mo
dules\\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_modules
Deleting generated file... package.json
Deleting my-app / from E:\wwwroot
Done.
|
11、依次執行如下命令：驗證：驗證緩存文件夾的內容，垃圾收集任何不需要的數據，並驗證緩存索引和所有緩存數據的完整性。如圖10
npm cache verify
create-react-app my-app
圖10
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
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.1
added 1443 packages in 233.928s
Success! Created my-app at E:\wwwroot\my-app
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 my-app
npm start
Happy hacking!
|
12、依次執行如下命令：現在可以在瀏覽器中查看我的應用程序，如圖11
cd my-app
npm start
圖11