React快速上手之react安装

一、Node.js的安装

Node.js压缩包及源码下载地址，根据你们的系统和需求选择合适的进行下载即可，安装步骤基本都是下一步下一步即可。

二、淘宝镜像安装

为什么要用淘宝镜像呢？
答：因为国内使用 npm 速度很慢，有时候在在拉取各种资源时,往往会非常慢，一直卡在那不动，使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm就好很多了:

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org

三、使用create-react-app快速构建React开发环境

vue有vue-cli,angularJS有angular-cli,而react则有create-react-app这个脚手架。
执行以下命令创建项目：

cnpm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

四、效果

在浏览器打开http://localhost:3000/可以看到如下图效果：

五、目录

项目代码结构如下：

|-- my-app
|-- .gitignore
|-- package-lock.json
|-- package.json
|-- README.md
|-- public
| |-- favicon.ico
| |-- index.html
| |-- logo192.png
| |-- logo512.png
| |-- manifest.json
| |-- robots.txt
|-- src
|-- App.css
|-- App.js
|-- App.test.js
|-- index.css
|-- index.js
|-- logo.svg
|-- serviceWorker.js

其中manifest.json 指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头，如图：

六、尝试

尝试去修改 src/App.js 文件代码，修改如下：

修改后保存，打开 http://localhost:3000/ （一般自动刷新），输出结果如下：