React Ecosystem
2 likes475 views
This document summarizes tools in the React ecosystem, including developer tools like React DevTools and Redux DevTools, testing utilities like Enzyme, routing libraries like React Router, and other helpers like Classnames and React Modal. It provides links to GitHub repositories for these tools.
React Ecosystem
- 1. React Ecosystem Or, “Tools We Like”
- 2. Who am I?
- 4. Overview ● Developer Tools ● Testing / Development ● Routing ● Other Helpers
- 6. React DevTools React Developer Tools is a system that allows you to inspect React Components like the DOM https://github.com/facebook/react-devtools
- 7. Redux DevTools DevTools for Redux with hot reloading, action replay, and customizable UI https://github.com/zalmoxisus/redux-devtools-extension
- 8. Redux Logger Logger middleware for redux https://github.com/evgenyrodionov/redux-logger
- 10. Enzyme JavaScript Testing utilities for React https://github.com/airbnb/enzyme import React from 'react'; import { render } from 'enzyme'; import Foo from './Foo'; describe('<Foo />', () => { it('renders three `.foo-bar`s', () => { const wrapper = render(<Foo />); expect(wrapper.find('.foo-bar').length) .to.equal(3); }); it('renders the title', () => { const wrapper = render(<Foo title=" unique" />); expect(wrapper.text()).to.contain ('unique'); }); });
- 11. Carte Blanche An isolated development space with integrated fuzz testing for your components https://github.com/carteb/carte-blanche
- 12. React Storybook Isolate your React UI Component development from the main app https://github.com/kadirahq/react-storybook
- 13. Routing
- 14. React Router A complete routing library for React https://github.com/reactjs/react-router // router.jsx <Router history={browserHistory}> <Route path="/" component={App}> <Route path="users" component={Users}> <Route path="/user/:userId" component= {User}/> </Route> </Route> </Router> // users.jsx const Users = (props) => ( <div>{props.children}</div> ); // user.jsx const User = (props) => ( <h2>{props.params.userId}</h2> );
- 15. Others
- 16. Classnames render() => { const names = `example ${ this.props.items.length === 1 ? 'single' : '' } ${ this.props.error ? 'error-primary' : '' }`; return ( <div className={names} /> ); } A simple javascript utility for conditionally joining classNames together https://github.com/JedWatson/classnames
- 17. Classnames render() => { const names = classNames('example', { single: this.props.items.length === 1, ‘error-primary’: this.props.error }); return ( <div className={names} /> ); } A simple javascript utility for conditionally joining classNames together https://github.com/JedWatson/classnames
- 18. Redux Thunk Thunk middleware for Redux https://github.com/gaearon/redux-thunk function increment() { return { type: INCREMENT_COUNTER } }; function incrementAsync() { return dispatch => { setTimeout(() => { // Yay! Can invoke sync or async actions with `dispatch` dispatch(increment()); }, 1000); }; } dispatch(increment()); dispatch(incrementAsync());
- 19. Victory A collection of composable React components for building interactive data visualizations https://github.com/FormidableLabs/victory import React, { Component } from 'react'; import { render } from 'react-dom'; import { VictoryPie } from 'victory'; class PieChart extends Component { render() { return ( <VictoryPie /> ); } } render(<PieChart />, document.getElementById ('app'));
- 20. React Modal <Modal isOpen={bool} onAfterOpen={afterOpenFn} onRequestClose={requestCloseFn} closeTimeoutMS={n} style={customStyle} > <h1>Modal Content</h1> <p>Etc.</p> </Modal> Accessible modal dialog component for React https://github.com/reactjs/react-modal