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.

1. React Ecosystem
Or, “Tools We Like”

2. Who am I?

3. Zach Gibb
Developer

4. Overview
● Developer Tools
● Testing / Development
● Routing
● Other Helpers

5. Developer Tools

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

9. Testing / Development

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