本文从属于笔者的系列。
本文记录了笔者在React开发中常见的一些工具插件，如果你想寻找合适的项目生成器或者模板，请参考笔者的
React Devtools是React官方提供的类似于浏览器调试台的插件，可以允许以查看组件的层次、各个组件的Props、States等等信息。使用方式也很简单，直接在Firefox或者Chrome的加载项仓库中搜索下载即可。
:开发中独立于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', () => ( )) .add('with no text', () => ( )); 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 = ( this.handleSave(todo.id, text)} /> ) } else { element = ( completeTodo(todo.id)} /> ) } return ( {element} ) }}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 ( );} HTML2JSX:智能地将HTML文件转化为JSX格式
对于大量现存的基于HTML开发的网页，我们可能需要将它们转化为JSX的语法，笔者推荐使用这个工具，可以自动将HTML标签转化为JSX的标签：
$ npm i -g html-to-react-components$ html2react ./src/*.html -c stateless -m es6 -d _ -o components -e jsx
:可视化地展示React组件的层次结构
React Monocle是一个帮助开发人员可视化浏览React组件的层次结构的工具，其大概的功能如下所示:
React Monocle会遍历你的React源文件来构建一颗基于React组件的可视化树，而且随着你的应用程序状态的变化，譬如存储在Redux中的状态的变化也会动态地来修正层次结构。该工具的安装方式也十分简单:
npm install -g react-monoclemonocle -c -b
:提醒你不必要的重渲染
该函数会在出现不必要的重渲染的时候提醒你。使用方法也很简单:
import React from 'react'if (process.env.NODE_ENV !== 'production') { const {whyDidYouUpdate} = require('why-did-you-update') whyDidYouUpdate(React)} 