环境搭建
- 安装 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.5s
Creating 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.8
added 1846 packages from 718 contributors and audited 36246 packages in 294.019s
found 63 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
Initialized a git repository.
Success! Created helloreact at I:\2019\playground\WebInAction\helloreact
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 helloreact
npm start
Happy hacking!
- 国际惯例：第一个工程 Hello World
在工程 helloreact 的 src 目录结构中找到 app.js 文件，然后在 <header> 和 </header> 标签中添加 p 标签元素：
<p>Hello World</p>
terminal中调用 npm start 可以在浏览器（页面地址为 http://localhost:3000/） 中展示 Hello World 页面。
