嘛, 无数次印证不能高估自己的自控力. 于是只在中秋三天假期的最后半天干了点正事. (其余时间不是吃吃喝喝, 就是沉迷手游阴阳师…..🌝🌚🌝🌚)

主要跟着这个教程在学习. 教程是个台湾人写的, 有中文看还是算比较幸福的.

教程开头提到了一系列的工具以及我很不熟悉的模块化的知识, 于是也顺便补充了点这方面知识.

补充这些知识就耗了不少时间, 于是在深入 react 之前就先搞个环境跑出来再说吧~ 所以001就是个hello world 😏

按照教程指引, 主要是采取 webpack 设置 react 的开发环境.

1. 安装 node 和 npm, 如果你没有

$ node -v

我 mac 上 node 版本是6.2.0, 刚刚去 node 官网查看, 最新版本已经是 v6.6.0, 更新的非常快啊.

更新 npm, 最新版本是3.10.7

$ npm install npm -g

2. 初始化以及 npm 安装 webpack

$ mkdir react-practice
$ cd react-practice

// 初始化 package.json
$ npm init

// --save-dev 是本地安装, 不是 global
// 保存依赖包及版本信息在 package.json, 易于管理
$ npm install --save-dev babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-react html-webpack-plugin webpack webpack-dev-server
  • babel 是编译工具, 因为 react 一般搭配 JSX 或 ES6+ 的语法不是在所有浏览器上都支持, babel 编译为 vanilla JavaScript, 让浏览器看得懂. 相关的JS规范也可设置, 教程中使用的规范就是 es2015 以及 react.
  • webpack 是模块打包工具, 它将相关css/图片资源打包, 或者对LESS/CoffeeScript/JSX/ES6等进行预处理

3. 设定 webpack.config.js 及 .babelrc

需要在根目录上设置.

教程内讲解已经非常清楚, 虽然对 ES6+ 的语法还不是很熟, 倒也不妨碍看懂基本逻辑.

// HtmlWebpackPlugin 是一个插件, 可以将打包好的 <script> tag 插入到 html 中

const HtmlWebpackPlugin = require('html-webpack-plugin');

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: `${__dirname}/app/index.html`,
  filename: 'index.html',
  inject: 'body', // 插入位置是 body 中
});

module.exports = {
  entry: [
    './app/index.js', //起始文件, 需要bundle 的, 可以多个 js
  ],
  // output 就是打包好之后的文件放在何处
  output: {
    path: `${__dirname}/dist`, // 会新建一个 dist 文件夹
    filename: 'index_bundle.js', // 在 dist 文件夹中会新建 bundle 后 js 文件.
  },
  module: {
    loaders: [
      {
        test: /\.js$/, // 正则表达式, 编译所有的 .js 文件为浏览器可以读懂的 js
        exclude: /node_modules/, //除去 npm 安装的
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react'],
          // 编译规则, 使用 es2015 和 react
        },
      },
    ],
  },
  // devServer 是 webpack-dev-server 设定
  // webpack-dev-server 是一个小巧的 Express server
  // inline mode 不是太明白
  // 还有些具体细节需要参考 http://webpack.github.io/docs/webpack-dev-server.html
  devServer: {
    inline: true,
    port: 8008,
  },
  // 将前面说的插件放入
  plugins: [HTMLWebpackPluginConfig],
};

下面是 .babelrc, 也是在根目录设置

{
  "presets": [
    "es2015",
    "react",
  ],
  "plugins": []
}

4. npm 安装 react 和 react-dom

$ npm install --save react react-dom

这里也是本地安装

5. component: index.html 和 index.js

新建一个 app 文件夹, 把它们俩放进去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Setup</title>
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
    <!-- 欲插入 React Component 的位置 -->
    <div id="app"></div>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));
  • ReactDOM.render(component或者 html 元素, 插入的位置)是基础用法.
  • index.js就是JSX语法, 是一种语法糖, 也就是方便程序员写代码也方便读懂代码, 但实际上没有什么影响. 教程作者说可以不使用 JSX, 但在日后写 react component 时会发现有 JSX 会很方便.
  • 这个也就是需要用 babel 来编译的 js 文件.

6. 现在的目录是这个样子..

|____.babelrc
|____app
| |____index.html
| |____index.js
|____node_modules
|____package.json
|____webpack.config.js

可以在 package.json中加入

"scripts": {
  "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}

然后在终端跑

npm run dev

这样就会自动进行编译及打包了. 在浏览器中打开 http://localhost:8008, 就看得到 Hello, world!

7. bundle 后的目录是这个样子的

|____.babelrc
|____app
| |____index.html
| |____index.js
|____dist
| |____index.html
| |____index_bundle.js
|____node_modules
|____package.json
|____webpack.config.js

多了 dist 文件夹, 其中包含的就是编译后的文件, dist 中的 index.html 比 app 中的在 body 前多了一行

<script type="text/javascript" src="index_bundle.js"></script>

也就是将打包编译后的 js 文件插入进去.

index_bundle.js 可以将所有资源打包进去, 也相当于免去在 html 中不断加入 <script> 的麻烦吧.

Last

虽然也就是重复一次人家的教程, 倒也学到不少新知识. 菜鸟还需精进, 任重道远.