React开发中常用的工具集锦

本文从属于笔者的React入门与最佳实践系列。

本文记录了笔者在React开发中常见的一些工具插件，如果你想寻找合适的项目生成器或者模板，请参考笔者的使用Facebook的create-react-app快速构建React开发环境

React Devtools

React Devtools是React官方提供的类似于浏览器调试台的插件，可以允许以查看组件的层次、各个组件的Props、States等等信息。使用方式也很简单，直接在Firefox或者Chrome的加载项仓库中搜索下载即可。

React-StoryBook:开发中独立于APP查看React组件

React Storybook可以在你开发的过程中将React组件独立于整个应用程序进行查看，其主要特征为：

• 独立的组件运行环境

• 组件的热加载

• 可以与Redux、Relay以及Meteor无缝集成

• 支持CSS

Quick Start

Installation

首先需要将React Storybook添加到应用中，使用npm进行安装即可：

npm i --save-dev @kadira/storybook

然后，将运行脚本添加到package.json文件中：

{
  ...
  "scripts": {
    "storybook": "start-storybook -p 9001"
  }
  ...
}

接下来，你就可以直接输入npm run storybook然后启动开发模块。

编写测试用的Story

在测试环境搭建完成之后需要编写一些Stories，即是测试故事。基本来说，一个Story就是一个单独的组件的视图，有点类似与一个测试用例，但是可以在Storybook UI中直接查看。一个典型的测试Story如下所示：

// components/stories/button.js

import React from 'react';
import { storiesOf, action } from '@kadira/storybook';

storiesOf('Button', module)
  .add('with text', () => (
    <button onClick={action('clicked')}>My First Button</button>
  ))
  .add('with no text', () => (
    <button></button>
  ));

Configuration

在编写好了Story之后需要告诉Storybook应该如何加载，需要进行一些简单的配置，只要添加如下类似的内容到.storybook/config.js中：

import { configure } from '@kadira/storybook';

function loadStories() {
  require('../components/stories/button');
  // require as many stories as you need.
}

configure(loadStories, module);

接下来，可以直接使用npm run storybook来运行界面。

CSS Support

有时候，我们需要在进行组件预览的时候导入额外的CSS文件，如果直接是在组件的JS内引入的CSS则可以直接使用，譬如你可以直接使用Material UI。而如果是使用Webpack的话可以在config文件中添加如下webpack.config(.storybook/webpack.config.js):

var path = require('path')
var webpack = require('webpack')

module.exports = {

  ...

  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'babel' ],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: __dirname
      }
    ]
  }
}

如果是使用Meteor的话，可以在Meteor app中添加如下配置：

const path = require('path');
module.exports = {
  module: {
    loaders: [
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: path.resolve(__dirname, '../')
      }
    ]
  }
}

Stories

Redux

• 组件

import React, { Component, PropTypes } from 'react'

import classnames from 'classnames'

import TodoTextInput from './TodoTextInput'



class TodoItem extends Component {

  constructor(props, context) {

    super(props, context)

    this.state = {

      editing: false

    }

  }



  handleDoubleClick() {

    this.setState({ editing: true })

  }



  handleSave(id, text) {

    if (text.length === 0) {

      this.props.deleteTodo(id)

    } else {

      this.props.editTodo(id, text)

    }

    this.setState({ editing: false })

  }



  render() {

    const { todo, completeTodo, deleteTodo } = this.props



    let element

    if (this.state.editing) {

      element = (

        <TodoTextInput text={todo.text}

                       editing={this.state.editing}

                       onSave={(text) => this.handleSave(todo.id, text)} />

      )

    } else {

      element = (

        <div className="view">

          <input className="toggle"

                 type="checkbox"

                 checked={todo.completed}

                 onChange={() => completeTodo(todo.id)} />

          <label onDoubleClick={this.handleDoubleClick.bind(this)}>

            {todo.text}

          </label>

          <button className="destroy"

                  onClick={() => deleteTodo(todo.id)} />

        </div>

      )

    }



    return (

      <li className={classnames({

        completed: todo.completed,

        editing: this.state.editing

      })}>

        {element}

      </li>

    )

  }

}



TodoItem.propTypes = {

  todo: PropTypes.object.isRequired,

  editTodo: PropTypes.func.isRequired,

  deleteTodo: PropTypes.func.isRequired,

  completeTodo: PropTypes.func.isRequired

}



export default TodoItem

• Story

import React from 'react';

import TodoItem from '../TodoItem';

import { storiesOf, action } from '@kadira/storybook';



storiesOf('TodoItem', module)

  .add('not completed', () => {

    const todo = {

      id: 'the-id',

      text: 'Hello Todo',

      completed: false

    };



    return getItem(todo);

  })

  .add('completed', () => {

    const todo = {

      id: 'the-id',

      text: 'Hello Todo',

      completed: true

    };



    return getItem(todo);

  });





function getItem(todo) {

  return (

    <div className="todoapp">

      <div className="todo-list">

        <TodoItem

          todo={todo}

          editTodo={action('editTodo')}

          deleteTodo={action('deleteTodo')}

          completeTodo={action('completeTodo')}/>

      </div>

    </div>

  );

}

HTML2JSX:智能地将HTML文件转化为JSX格式

对于大量现存的基于HTML开发的网页，我们可能需要将它们转化为JSX的语法，笔者推荐使用html-to-react-components这个工具，可以自动将HTML标签转化为JSX的标签：

$ npm i -g html-to-react-components
$ html2react ./src/*.html -c stateless -m es6 -d _ -o components -e jsx

react-monocle:可视化地展示React组件的层次结构

React Monocle是一个帮助开发人员可视化浏览React组件的层次结构的工具，其大概的功能如下所示:

React Monocle会遍历你的React源文件来构建一颗基于React组件的可视化树，而且随着你的应用程序状态的变化，譬如存储在Redux中的状态的变化也会动态地来修正层次结构。该工具的安装方式也十分简单:

npm install -g react-monocle

monocle -c <html> -b <bundle>

why-did-you-update:提醒你不必要的重渲染

该函数会在出现不必要的重渲染的时候提醒你。使用方法也很简单:

import React from 'react'

if (process.env.NODE_ENV !== 'production') {
  const {whyDidYouUpdate} = require('why-did-you-update')
  whyDidYouUpdate(React)
}