Mac react環境搭建

網上的教程有好多，在這裏不一一列舉，我只介紹我今天安裝成功的步驟

首先，在安裝react以前要先配置好node

1.安裝node

  在這裏下載node的安裝包https://nodejs.org/en/download/ 。我下載的是.pkg文件，直接雙擊安裝就好

  node —v命令檢驗是否安裝成功

  npm -v用來檢測npm

2.經過npm使用react

  國內使用 npm 速度很慢，你可使用淘寶定製的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:

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

通常這個時候就可使用cnpm來進行操做，可是個人一直顯示命令未找到。因此我放棄了使用cnpm，繼續使用npm命令

給npm配置taobao鏡像的registry

npm config set registry https://registry.npm.taobao.org

而後直接用

npm install gulp less --save-dev

就是從taobao鏡像拿包了

3.兩種react開發環境構建

使用 create-react-app 快速構建 React 開發環境

create-react-app 是來自於 Facebook，經過該命令咱們無需配置就能快速構建 React 開發環境。

create-react-app 自動建立的項目是基於 Webpack + ES6 。

執行如下命令建立項目：

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

在瀏覽器打開http://localhost:3000/  盜用菜鳥教程一張圖,由於個人已經更改了

項目的目錄結構以下

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

以後咱們能夠修改src/App.js 文件代碼來改變頁面樣式

reate-react-app 執行慢的解決方法：

在使用 create-react-app my-app 來建立一個新的React應用，在拉取各類資源時,每每會很是慢,一直卡在那：

fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch

能夠看到資源仍是使用了 npmjs.org，解決方法是換成淘寶的資源：

$ npm config set registry https://registry.npm.taobao.org

-- 配置後可經過下面方式來驗證是否成功

$ npm config get registry

npm start來啓動配置，那麼自動會進入開發模式，此時熱替換是處於自動激活狀態

使用npm run build來編譯獲得生產環境，此時代碼會被編譯到build目錄下，此時會自動將整個應用打包發佈，它會自動使用Webpack控件進行優化與壓縮

使用 Webpack-React-Redux-Boilerplate快速構建 React 開發環境

 其容許在一個項目中配置多個應用入口，同時支持開發模式、構建模式與庫構建模式。同時筆者習慣不將webpack配置文件分紅單獨的dev與prod文件，而是合併到一個文件中。若是須要使用該模板，直接使用以下命令

git clone -b boilerplate https://github.com/wxyyxc1992/Webpack-React-Redux-Boilerplate/ # 克隆模板文件夾

sudo sh ./install.sh # 安裝運行所須要的依賴項

在執行時要注意，進入到包含install.sh的文件夾下面，不然第二句命令可能會出現找不到的問題，

獲得的模本文件夾主要由如下構成

├── README.md
├── README.zh.md
├── dev-config : 配置文件入口
│   ├── apps.config.js : 應用配置文件
│   ├── dev.html : 開發模式下使用的HTML文件
│   ├── devServer.js : 開發服務器
│   ├── eslint.js : ESLint配置文件
│   ├── template.html : 構建模式下推薦的HTML模板文件
│   └── webpack.config.js : webpack配置文件
├── install.sh 
├── package.json
└── src : 源代碼目錄
    ├── count : 某個應用
    │   ├── App.js
    │   ├── async_library.js
    │   ├── colors.js
    │   ├── count.html
    │   └── count.js
    ├── helloworld
    │   ├── App.css
    │   ├── App.js
    │   ├── helloworld.css
    │   ├── helloworld.html
    │   ├── helloworld.js
    │   └── logo.svg
    ├── library
    │   ├── foo.js
    │   ├── library.html
    │   └── library_portal.js
    └── vendors.js

其核心的關於應用的配置文件即apps.config.js，在模板項目中其配置爲

module.exports = {

    apps: [

        //HelloWorld

        {

            id: "helloworld",

            title: "HelloWorld",

            entry: {

                name: "helloworld",

                src: "./src/helloworld/helloworld.js"

            },

            indexPage: "./src/helloworld/helloworld.html",

            compiled: true

        },

        //Count

        {

            id: "count",

            title: "Count",

            entry: {

                name: "count",

                src: "./src/count/count.js"

            },

            indexPage: "./src/count/count.html",

            compiled: true

        }

    ],



    //開發服務器配置

    devServer: {

        appEntrySrc: "./src/helloworld/helloworld.js", //當前待調試的APP的編號

        port: 3000 //監聽的Server端口

    },



    //若是是生成的依賴庫的配置項

    library: {

        name: "library_portal",//依賴項入口名

        entry: "./src/library/library_portal.js",//依賴庫的入口,

        library: "libraryName",//生成的掛載在全局依賴項下面的名稱

        libraryTarget: "var"//掛載的全局變量名

    }

};

開發模式

開發模式下主要讀取apps.config.js中的devServer配置，主要是能夠配置調試的入口JS文件與開發服務器監聽的端口號。開發模式下會自動使用dev.html做爲默認的HTML文件傳輸到瀏覽器中展現，譬如在模板項目中是將helloworld項目做爲當前正在開發的項目，切換到項目目錄下使用npm start，便可開啓開發模式，此時在瀏覽器內打開http://localhost:3000便可看到運行效果

構建模式

對於應用中存在的多應用入口，主要是在apps.config.js中的apps下進行配置的，一個典型的應用配置爲:

 id: "helloworld", //編號

            title: "HelloWorld", //生成的HTML文件中的標題

            entry: {

                name: "helloworld", //用於webpack的入口名

                src: "./src/helloworld/helloworld.js" //入口文件地址

            },

            indexPage: "./src/helloworld/helloworld.html", //HTML模板文件地址

            compiled: true //是否進行編譯

由於我只設置到這裏。剩下的東西能夠本身探索

4.運行別人的react項目

從git clone或者直接複製到某一個路徑下，用webstorm打開，在webstorm的終端下面輸入

npm install

命令，至關於將項目載入環境；

以後輸入

node server

開啓服務器，就會自動打開網頁顯示項目內容。

可是我遇到的問題是，後臺報錯，樣式消失  ，，，，，node-sass沒有安裝上。。。

因而在終端輸入

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install --save-dev node-sass

或者

npm i node-sass -D

安裝好node-sass從新開啓服務器

node server

就OK啦