从零开始React之环境的搭建与项目的初始化

React

简介：React是Facebook开发的一款JS库，是一个声明式、组件化并且用于构建用户界面的 JavaScript 库，通俗来讲就是将界面分成可以复用的组件，在需要时引入，使界面解耦，互不影响而又相互联系，在界面更新时，只会更新需要更新的组件，使得效率和性能上大大提升。

1、环境搭建

1. 安装node
   大家可以去官网下载安装包：node官网
   安装没有什么可以讲的，一路下一步即可， 安装完成后打开控制台输入

CrckerdeMacBook-Pro:~ crcker$ node -v
v10.0.0

如果能正确输出版本号说明node已经安装完成，否则需要配置环境变量，这里不做介绍

2. 安装npm和cnpm
   npm其实是Node.js的包管理工具，可以使我们方便的引入各种js库,当我们安装完node.js之后，npm也已经安装完成，打开终端输入

CrckerdeMacBook-Pro:~ crcker$ npm -v
6.1.0

由于大部分的包在国外服务器，当我们安装某个库的时候可能会安装不上，如果出现这种情况，可以通过梯子的方式解决，也可以使用国内镜像，是由taobao托管，大家可以去 这里 查看安装方式，安装完成后就可以使用cnpm来管理包了，而且速度飞快。

2、项目的初始化

到目前基本的环境已经安装完成，下面我们来初始化一个react项目

打开终端按照下面的输入：

npm install -g create-react-app
create-react-app react-demo
cd react-demo
npm start

如果不出意外的话，程序会开启一个服务监听3000端口，并且打开默认浏览器，你会看到一下界面，说明项目已经成功运行。

20180627163103738.png

下面我们打开这个项目看一下项目结构,这里使用vscode：

20180627163616583.png

node_modules： 这里面包含了react项目中会用到的一些组件 。
src：里面包含了一些我们自己使用的js文件，css文件，img文件等等
manifest.json：清单配置文件，声明了项目的名称图标以及入口
package.json: 包的清单文件，这里面声明的包会通过npm下载到node_modules中

到现在为止，环境的搭建和项目的初始化已经全部完成了，大家可以修改一下App.js中的文字，会发现浏览器会立即作出响应，快去动手感受一下吧。