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.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开发中常用的工具集锦相关推荐
- JAVA 开发中常用的工具有哪些?
Java开发中常用的工具有以下几种: Eclipse:一款非常流行的开发工具,提供了很多方便的功能,如代码自动补全.调试.版本控制等. IntelliJ IDEA:一款功能强大的Java集成开发环境, ...
- 几个.net开发中常用的工具下载
1.正则表达式工具 RegexTester.exe和RegexTest.exe,网上别人写的,功能还比较强大,使用比较方便 2.文档生成器 Sandcastle.msi,这个比较有名,大家可以搜一下 ...
- [项目过程中所遇到的各种问题记录]工具篇——.NET开发时常用的工具类库
在日常开发的过程当中我们总是会根据项目的开发需求将一些公用的类或者方法进行抽象封装,这些类或方法的抽象封装可能是基于某个项目或者多个项目,最常见的应该就是SQLHelper了,这些类库在实际使用的过程 ...
- 开发中常用的软件、插件、工具汇总(实时更新)
在开发中常用到的软件.插件.工具及其地址:欢迎大家补充!!! Android开发 JDK:jdk归档网页,包含所有版本jdk 下载地址:http://www.oracle.com/techne ...
- 工作中常用,实用工具推荐!
原文:工作中常用,实用工具推荐! Red Gate 家族 大名鼎鼎的RedGate,相信大家都不会陌生,Reflector就是它家做的.这里就不介绍了.我本地安装的是09年下的一个套装,我介绍下常用的 ...
- java开发常用jar包_Java开发中常用jar包整理及使用
本文整理了我自己在Java开发中常用的jar包以及常用的API记录. 一.common-lang3 简介:一个现在最为常用的jar包,封装了许多常用的工具包 依赖: org.apache.common ...
- 前端开发中常用设计模式-总结篇
本文是向大家介绍前端开发中常用的设计模式,它使我们编写的代码更容易被复用,也更容易被人理解,并且保证代码的稳定可靠性. 1.什么是设计模式 通俗来讲,就是日常使用设计的一种惯性思维. 因为对应的这种思 ...
- 分享一些工作中常用的工具软件,值得收藏!
前言 我之前分享过一篇:分享一些常用的网站和工具,值得收藏!,今天再分享一波关于工作中常用的工具软件! 文章首发在公众号(月伴飞鱼),之后同步到个人网站:http://xiaoflyfish.cn/ ...
- PC设计开发过程中常用大小工具汇总
PC设计开发过程中常用大小工具汇总 浏览器:Firefox Developer Edition / Google Chrome / 通讯:TIM(office QQ)/ 微信电脑版 / Foxmail ...
最新文章
- 系统启动过程Linux
- java 并发编程总结
- 从ngrx store里selector出来的Observable,执行subscribe的单步调试
- 致程序员:学会这套操,下班比人早!
- vue 可用于交互的表格
- SLAM 无人车融合 IMU 前与 融合 IMU 后的实测效果演示
- python语法分析图_Python的抽象语法树(二)
- GB2312、GBK、UTF-8 如何转换
- proteus编程、仿真AVR单片机
- 阿泰水晶报表补空行(分组)
- 关于PostgreSQL软件安装后出现解决the application server could not be contect ed错误的方法
- 初中python编程初步教学设计_初中Python程序设计顺序结构教学设计方案.docx
- linux系统的简单命令
- 2021-03-04 mysql in里加个参数就查不到??是JSON_EXTRACT导致的,用JSON_UNQUOTE()去掉双引号就正常了
- 【代码复现】知识表示学习MHGRN预处理操作(二)
- Linux vmstat命令详解:监控系统资源
- Cortex:多租户、可横向扩展的Prometheus即服务
- 【window操作】windows定时打开网页或程序
- hive 解析jason字符串
- react + antd pro 项目搭建及发布流程
热门文章
- php的list函数
- 4邻接、8邻接、m邻接
- linux怎么修改sftp默认端口,转:linux 修改sftp服务默认提供者sshd的session timeout
- redis源码剖析(五)—— 字符串,列表,哈希,集合,有序集合
- C语言的atoi和C++的to_string
- linux操作系统之信号
- Linux系统编程----8(竞态条件,时序竞态,pause函数,如何解决时序竞态)
- c++中的set容器和multiset容器
- C++ Priemer目录索引
- 普通二本的辛酸Android面试之路,算法太TM重要了