环境搭建

• 安装 WebStorm
• 安装 Node.js

创建 React Web 应用 Hello world

• terminal 中以命令的形式安装 create-reac-app，安装后提示它不是内部命令，重启电脑后命令生效

npm install -g create-react-app

• 使用命令创建自己的 react web 应用

npx create-react-app firstreactweb

打印日志：

npx: installed 63 in 3.5sCreating a new React app in I:\2019\playground\WebInAction\firstreactweb.Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
复制代码

其实工程的创建会一直卡在这里。原因是某些网络访问问题，有种解决方式是：修改npm 的 register 源,修改依赖库的下载源使用命令:

npm config set registry registry.npm.taobao.org

配置后可通过下面方式来验证是否成功

npm config get registry 或 npm info express

• 启动已创建的应用框架 查看 terminal 打印的日志，使用 npm start 命令即可启动模板代码的简易页面。

打印日志：

    Creating a new React app in I:\2019\playground\WebInAction\helloreact.Installing packages. This might take a couple of minutes.Installing react, react-dom, and react-scripts...+react@16.8.6+react-dom@16.8.6+react-scripts@2.1.8added 1846 packages from 718 contributors and audited 36246 packages in 294.019sfound 63 low severity vulnerabilitiesrun `npm audit fix` to fix them, or `npm audit` for detailsInitialized a git repository.Success! Created helloreact at I:\2019\playground\WebInAction\helloreactInside that directory, you can run several commands:npm startStarts the development server.npm run buildBundles the app into static files for production.npm testStarts the test runner.npm run ejectRemoves this tool and copies build dependencies, configuration filesand scripts into the app directory. If you do this, you can’t go back!We suggest that you begin by typing:cd helloreactnpm startHappy hacking!
复制代码

• 国际惯例：第一个工程 Hello World

在工程 helloreact 的 src 目录结构中找到 app.js 文件，然后在 <header> 和 </header> 标签中添加 p 标签元素：

<p>Hello World</p>
复制代码

terminal中调用 npm start 可以在浏览器（页面地址为 http://localhost:3000/） 中展示 Hello World 页面。

• 参考
  webpack 构建 react 多页面应用
  基于 JavaScript 库构建用户界面
  create-react-app 慢的解决方法