本文從屬于筆者的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) }

總結

以上是生活随笔為你收集整理的React开发中常用的工具集锦的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。