react-1 react須要的環境配置

1、nodeJs簡介和安裝  

　　一、 官網 https://nodejs.org/en/

　         NPM https://www.npmjs.com/

      二、檢查安裝成功的命令

　　　　node -v

　　　　npm -v

2、使用npm配置react開發環境

 

http://reactjs.cn/react/docs/package-management.html

 

一、新建一個文件夾 如：newfiles

二、cd newfiles

三、npm init

四、npm install --save react react-dom babelify babel-preset-react     [sudo 最高的權限   解決一些權限問題]  

　　或    sudo  npm install --save react react-dom babelify babel-preset-react

五、npm install --save babel-preset-es2015      [save 將包保存在配置文件中]

　　或    sudo npm install babel-preset-es2015 --save   

 3、webpack熱加載配置

官網：https://webpack.github.io/

配置文件文檔：https://webpack.github.io/docs/configuration.html

全局安裝  npm install -g webpack

             npm install -g webpack-dev-server    [開發的服務器]

當前項目安裝  npm install  webpack --save

　　　　　　　npm install webpack-dev-server --save

初始化配置    

var webpack = require(webpack);
var path = require('path');
module.exports = {
  context:__dirname + '/src',
  entry:'./js/index.js',
  module:{
       loaders:[{
            test:/.js?$/,
            exclude:/(node_modules)/,
            loader:'babel-loader',
            query:{
                  presets:['react','es2015']
            }
       }]  
   },
    output:{
          path:__dirname+'/src/',
          filename:'bundle.js'
    }
}            

 運行代碼：

webpack    //每次修改代碼後，都須要從新敲webpack命令

webpack --watch    //每次修改代碼後，不須要從新敲webpack 命令，只須要在瀏覽器點擊刷新便可

webpack-dev-server   //每次修改代碼後，不須要從新敲webpack 命令，不須要在瀏覽器點擊刷新就能夠訪問

webpack-dev-server --content-base src --inline --hot   //項目熱加載[--inline --hot]  ,[--content-base src]讓訪問的URL地址更簡潔並且瀏覽器界面更簡潔

3、Chrome React 插件使用    

　　插件名稱： React Developer Tools

     插件地址：

4、開發工具Atom

　　官網：https://atom.io/

      React開發相關Atom插件配置

          一、js支持  atom-ternjs   ：js、nodejs、es6補全

          二、格式化  atom-beautify

          三、直接打開瀏覽器open-in-browser

          四、快速html代碼   emmet  

          五、文件圖標  file-icons

          六、高亮當前行 highlight-line

          七、高亮全部選擇  highlight-selected

 

 

總結環境搭建流程：

一、安裝node

二、新建一個文件夾 如：newfiles

　　　　mkdir newfiles && cd newfiles　　　　

　　　　cnpm init

三、cnpm install --save react react-dom babelify babel-preset-react  

四、cnpm install --save babel-preset-es2015    

五、

cnpm install -g webpack

cnpm install -g webpack-dev-server 

 cnpm install  webpack --save

cnpm install webpack-dev-server --save

六、啓動項目

webpack-dev-server --content-base src --inline --hot

 

七、谷歌react調試插件： React Developer Tools