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