React 环境搭建及页面调试方法

React 环境搭建及页面调试方法

|作者：RexFang

|出处：http://www.cnblogs.com/rexfang/

|关于作者：Java 程序员一枚

|版权：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。如有问题，可以邮件：fangruitao.work@foxmail.com

注：本文件主要介绍 React 入门环境的搭建，以及调试 Demo 的基本方法，更加完整的信息，请前往官网查看：https://facebook.github.io/react/docs/hello-world.html

安装 Nodejs

• 下载地址：https://nodejs.org/en/download/
• 默认安装即可，安装完成后，WIN+R 输入 cmd，打开命令行
• 输入 node -v，可以看到 Nodejs 的版本信息
• 输入 npm --version，可以看到 npm 的版本信息

安装 React

• 输入 npm install -g create-react-app，等待一段时间以完成 React 的安装

创建 React 应用

• 创建一个文件夹，在命令行，进入前面创建的文件夹，输入 create-react-app my-app 创建 React 应用， 应用名称为“my-app”，等待一段时间以完成 React 应用的创建

React 应用的启动和关闭

• 应用创建完成后，在命令行输入 cd my-app，进入应用目录，输入 npm start 即可启动 my-app React 应用
• 启动完成后，在浏览器输入 http://localhost:3000/ 即可访问到 React 应用
• 如果要关闭 React 应用，只需要在命令行按下 Ctrl+D ,此时会提示 “终止批处理操作吗(Y/N)?” ，按提示输入 Y 回车即可关闭 React 应用（发现输入 N 回车都可以关闭应用，这也许是一个 BUG，不过不影响我们学习）

访问自己写的 JS

• 应用创建完成后，有一个实例的 JS 文件 App.js，被 index.js 文件所引用，后续可以自己模仿 App.js 文件写自己的 JS，然后在 index.js 文件中替换掉 APP.js 的引用，即可在浏览器看到自己写的 JS 的效果

　　例如：
         　　先在 src/demo/demo01 目录先创建 HelloReact.js 文件
         　　修改 index.js 文件，引入 import HelloReact from './demo/demo01/HelloReact'，
         　　修改 ReactDOM.render(, document.getElementById('root'));