React学习 - 一.初始入门 构建开发环境

由来和发展

• Facebook内部用于开发 Instagram 而坐的一套前端框架
• 2013年被开源
• 搭乘 JavaScript 的 Node.js的风口快车，火了
• 随后发布的 React Native，让他成为移动端开发的瞩目之星
• http://github.com/facebook/react

安装 Node.js 和 NPM

方法：去 nodejs.org官网下载对应系统安装包（直接下载最新的 current 版本），下载完解压出node-v9.0.0.pkg文件，一路下一步安装完毕。

image.png

完成后打开终端，检查是否以完成安装：
输入 node -v回车， npm -v回车，如果有版本号，则安装成功

image.png

使用 NPM 配置 React 环境

1、初始化基本环境

#在终端创建项目文件夹，并进入文件夹
$ mkdir myapp
$ cd myapp

#创建初始环境，一个新的 JS 项目框架
$ npm init

#安装React和 ES6语法的依赖包
$ npm install --save react react-dom babelity babel-preset-react
$ npm install --save babel-reset-es2015

Webpack 热加载配置

全局安装 webpack和开发环境

$ npm install -g webpack
$ npm install -g webpack-dev-server

在目录安装webpack和开发环境

$ npm install --save webpack
$ npm install --save webpack-dev-server

在项目根目录创建 webpack.config.js 配置文件，以下是配置内容：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./src/js/index.js",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  output: {
    path: __dirname,
    filename: "./src/bundle.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

生成打包文件和热加载命令

生成单次 bundle.js 打包文件，这就可以引入到 html 文件夹使用了
$ webpack

生成热加载环境，这时候让浏览器对后端的变化做实时热加载
$ webpack-dev-server

---

react + webpack 的好处，就是热加载所带来了，让浏览器不再像以前那样手动刷新才能看到变化，而是随着数据的变化而实时变化。
当然，这样的技术之前也有，但是整个实现的便利性，是不可同日而语的，就这一点来说，就是当下和未来的发展趋势。