react-1 react需要的环境配置

一、nodeJs简介和安装  

　　1、 官网 https://nodejs.org/en/

　         NPM https://www.npmjs.com/

      2、检查安装成功的命令

　　　　node -v

　　　　npm -v

二、使用npm配置react开发环境

 

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

 

1、新建一个文件夹 如：newfiles

2、cd newfiles

3、npm init

4、npm install --save react react-dom babelify babel-preset-react     [sudo 最高的权限   解决一些权限问题]  

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

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

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

 三、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地址更简洁而且浏览器界面更简洁

三、Chrome React 插件使用    

　　插件名称： React Developer Tools

     插件地址：

四、开发工具Atom

　　官网：https://atom.io/

      React开发相关Atom插件配置

          1、js支持  atom-ternjs   ：js、nodejs、es6补全

          2、格式化  atom-beautify

          3、直接打开浏览器open-in-browser

          4、快速html代码   emmet  

          5、文件图标  file-icons

          6、高亮当前行 highlight-line

          7、高亮所有选择  highlight-selected

 

 

总结环境搭建流程：

1、安装node

2、新建一个文件夹 如：newfiles

　　　　mkdir newfiles && cd newfiles　　　　

　　　　cnpm init

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

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

5、

cnpm install -g webpack

cnpm install -g webpack-dev-server 

 cnpm install  webpack --save

cnpm install webpack-dev-server --save

6、启动项目

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

 

7、谷歌react调试插件： React Developer Tools