本文从属于笔者的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.jsimport 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.propslet elementif (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"><TodoItemtodo={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-monoclemonocle -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)
}