React & Redux 入门教程 - 第五篇:React & Redux 工具箱

本文是《React & Redux 入门教程》系列文章的第五篇,也是最后一篇。本篇我们将介绍 React & Redux 相关的一些工具。工欲善其事,必先利其器。首先我们会介绍 react-redux 这个项目,看看官方推荐我们怎么对 React 和 Redux 做 binding。然后我们会介绍 Babel,学习如何使用和扩展新的 JavaScript 语法。最后我们介绍 webpack,学习如何对程序进行打包和压缩。

react-redux

在上一篇教程中所写的 React & Redux 程序中,我们是这样对 React 和 Redux 做 binding 的:

// Bind React and Redux
const render = () => ReactDOM.render(
  <MarkdownEditor markdown={store.getState().markdown} updateMarkdown={
    (markdown) => store.dispatch({ type: "UPDATE_MARKDOWN", markdown })} />,
  document.getElementById('root')
);
render();
store.subscribe(render);

上面的方式可行,但不推荐。因为官方有推荐的方式,这种方式就是 react-redux

Official React bindings for Redux.

Performant and flexible.

利用 react-redux 改写binding,最终代码是这样的:

// react-redux
const { connect, Provider } = ReactRedux;
const App = connect(
  (state) => ({ markdown: state.markdown }), 
  { updateMarkdown: (markdown) => ({ type: "UPDATE_MARKDOWN", markdown }) }
)(MarkdownEditor);
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

其中的 connect() 方法,有非常复杂的规则。建议仔细阅读文档。

Babel

Babel 最近几年非常流行。我周围的 JavaScript 程序员全部都在用 Babel。Babel 是下一代 JavaScript 的编译器。为什么这么说呢?我们知道 JavaScript 的规范在不断向前发展,支持得比较广泛的是 ES5,后来出现了 ES2015(ES6)、ES2016、ES2017……这些新出现的规范在很多地方都不被支持,比如说一些比较老版本的浏览器。这时候 Babel 出现了,程序员可以用非常新的 JavaScript 语法特性去写代码,Babel 负责编译成兼容性好的版本。可以简单地这样理解:Babel 使得你可以在一些比较老的 JavaScript 运行环境上执行非常新的 JavaScript 语言特性。

也有些人说:Babel 扩展了 JavaScript 的语法。这句话拿到 JSX 这里一点都不假。我们知道 React 允许程序员用 JSX 去构建界面。而 JSX 看起来很像是 HTML。这种看起来像 HTML 的代码却是如假包换的 JavaScript 代码。在这背后其关键作用的就是 Babel。关于 Babel,推荐大家到其官方去阅读文档。我抛砖引玉给大家一个比较简单的例子:

function test() {
    return <div>Hello world</div>
}

上面的文件保存为 test.js, 执行 node test.js, 会报错:

.../test.js:2
    return <div>Hello world</div>
           ^
SyntaxError: Unexpected token <

这是因为我们用到了 JSX 的语法,Node.js 不支持。

让我们用 Babel 来解决这个问题吧!

首先安装 yarn add --dev babel-register babel-preset-react

然后创建 .babelrc 文件:

{
    "presets": ["react"]
}

最后像这样执行: node -r babel-register test.js

这一次由于有 Babel 做编译,执行是不会报错的。

webpack

开发 React & Redux 程序,可以没有 webpack。但是笔者一直用 webpack,并且觉得非常好用。故而在这里对其做简单介绍。 webpack 是一个模块打包器(module bundler)。你给它指定一到多个入口模块,它生成一到多个打包后的模块。笔者主要利用 webpack 做两件事情:

第一:将多个文件打包成一个。传统的 web 开发,需要把用到的 JavaScript 文件,CSS 文件等等都在网页的 <head> 部分引入。如果网页使用到的 JavaScript 库很多,CSS 文件也很多的话,<head> 部分就会很长,不容易维护。此外,每一个引用到的文件都要分别经过网络下载,减缓了网页加载的速度。webpack 能把你用到的这些文件打包成一个文件,在网页中只要引用一个文件就行了。值得一提的是,webpack 打包不光能支持 JavaScipt、CSS,连图片、字体文件等等也都能支持。

第二:对文件内容进行处理、压缩。比如将 CoffeeScript、TypeScript 编译成 JavaScript;将 SASS、LESS 等编译成 CSS。如果你不用 webpack,这些文件的编译转换都得分别处理,不胜其烦。webpack 提供 “loader” 的机制,常见的文件类型都有开源的 loader 存在,使得 webpack 能够 load 各种各样的文件。通过一套 webpack 配置来管理各种各样的文件,是非常方便和简洁的。此外,对 webpack 开启 production 模式,可以对生成的内容进行压缩优化,极大地减小了生成文件的大小。

下面是一个真实的例子:

const rules = []

rules.push({
  test: /\.css$/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' }
  ]
})

rules.push({
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        ['env', {
          'targets': {
            'browsers': ['last 2 versions']
          }
        }],
        'react'
      ]
    }
  }
})

const config = {
  target: 'web',
  entry: {
    'index': './index.js'
  },
  output: {
    path: '.',
    filename: '[name].bundle.js'
  },
  module: { rules }
}

module.exports = [config]

上面是一个 webpack 的配置文件,使用了最新的 webpack 2 的语法规则,它可以支持打包 JavaScript 和 CSS,支持 React,并能够兼容主流浏览器的最新两个版本。

将上述文件保存为 webpack.config.js, 执行 webpack -p --progress --colors 就可以完成打包。其中 -p 表示启用 production 模式,生成的文件会小些。如果希望每当文件有更新就自动打包,可以添加 --watch 执行参数。

总结

至此《React & Redux 入门教程》系列文章就完结了。我们讲的是内容是非常初级的。不过读者只要能够全部消化吸收,应该能够明白什么是 React & Redux,它们的特点及优点,以及如何开始写简单的 React & Redux 程序。万事开头难,恭喜你,已经有了一个好的开端!

接下来,推荐大家去做这些事情:

  1. 阅读 React 文档
  2. 阅读 Redux 文档
  3. 实践、大量地实践!

您可能会喜欢

发表评论

电子邮件地址不会被公开。 必填项已用*标注

4 + = 8