React开发工具库推荐

前言

笔者从接触到产品上应用React已经有一段时间了，使用开发React了一个大项目，和几个小demo，本文记录了笔者在React开发中从广大网友那学习了解到的一些React好用的工具插件，在此做下分享记录。

项目构建工具

首推 create-react-app。

create-react-app是来自于Facebook出品的零配置命令行工具，能够帮你自动创建基于Webpack+ES6的最简易的React项目模板，有助于初学者快速上手实践。

调试工具

React Devtools

React Devtools 是一个浏览器插件，是React官方提供的类似于浏览器调试台的插件，可以允许以查看组件的层次、各个组件的Props、States等等信息，使用方式很简单，去Chrome浏览器应用商店下载（需要翻墙）或者网上搜索该插件下载其crx文件拖到Chrome中安装即可。

Redux DevTools

Redux Devtools 也是一个浏览器插件，用来调试查看状态管理库Redux的信息（React的好伴侣），同样前往Chrome浏览器应用商店下载即可。

react-monocle

React Monocle是一个帮助开发人员可视化浏览React组件的层次结构的工具，安装使用方式：

1
2
3
npm install -g react-monocle
monocle -c <html> -b <bundle>

React-StoryBook

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

  • 独立的组件运行环境
  • 组件的热加载
  • 可以与Redux、Relay以及Meteor无缝集成
  • 支持CSS

优化工具

why-did-you-update

why-did-you-update是一个js库，可以通过npm安装，该函数会在出现不必要的重渲染的时候提醒你。使用方法很简单：

1
2
3
4
5
6
import React from 'react'
if (process.env.NODE_ENV !== 'production') {
  const {whyDidYouUpdate} = require('why-did-you-update')
  whyDidYouUpdate(React)
}

其他

html-to-react-components

使用html-to-react-components这个工具，可以自动将HTML标签转化为JSX的标签