没有不值得去解决的问题,也没有不值得去学习的技术!

在 Windows 10 64 下创建 React App

依次执行如下命令:现在可以在浏览器中查看我的应用程序
1、在官方网站:https://nodejs.org/zh-cn/ 下载推荐版本:8.10.0 LTS,如图1
在官方网站:https://nodejs.org/zh-cn/ 下载推荐版本:8.10.0 LTS
图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 SmartScreen can't be reached right now,点击 Run 按钮
图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。
Node.js Setup,点击 Next 按钮
图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 终端用户许可协议 请仔细阅读以下许可协议 我接受许可协议中的条款
Node.js Setup,勾选 I accept the terms in the license Agreement,点击 Next 按钮
图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\ 更改
Node.js Setup,点击 Next 按钮
图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的硬盘驱动器。 将安装在本地硬盘上 整个功能将安装在本地硬盘上 功能将在需要时安装 整个功能将不可用
Node.js Setup,默认设置就好,点击 Next 按钮
图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 单击安装开始安装。单击返回查看或更改任何安装设置。单击取消退出向导。
Node.js Setup,点击 Install 按钮
图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已成功安装。
Node.js Setup,点击 Finish 按钮
图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
以管理员身份运行 Windwos PowerShell,依次执行如下命令,报错:npm ERR! Error: EPERM: operation not permitted
图9



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



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
   

需要长期技术维护或远程问题排查?

我是拥有 15+ 年经验的 PHP / Go 后端工程师,长期关注已有系统维护、Bug 修复、性能优化、服务器排查、WordPress 网站维护和小功能迭代。

如果你的项目遇到以下情况,可以先从一次小问题排查开始合作:

  • ✅ PHP / Laravel / Yii2 老项目无人维护
  • ✅ Go / Gin 后端接口需要排查或优化
  • ✅ WordPress 网站访问慢、报错或插件冲突
  • ✅ Nginx / MySQL / Redis / Linux 服务器异常
  • ✅ CDN / Cloudflare / DNS / HTTPS 配置问题
  • ✅ 需要长期远程技术支持或兼职维护

更多介绍请查看:关于我 & 合作

微信:13980074657
邮箱:shuijingwanwq@gmail.com
Telegram:@shuijingwan
GitHub:https://github.com/shuijingwan

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理