從零開始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端口，並且打開默認瀏覽器，你會看到一下界面，說明項目已經成功運行。

下面我們打開這個項目看一下項目結構,這裏使用vscode：

node_modules： 這裏麪包含了react項目中會用到的一些組件 。
src：裏面包含了一些我們自己使用的js文件，css文件，img文件等等
manifest.json：清單配置文件，聲明瞭項目的名稱圖標以及入口
package.json: 包的清單文件，這裏面聲明的包會通過npm下載到node_modules中

到現在爲止，環境的搭建和項目的初始化已經全部完成了，大家可以修改一下App.js中的文字，會發現瀏覽器會立即作出響應，快去動手感受一下吧。