Being the most popular front-end JavaScript framework, the React ecosystem is lively and full of useful tools and packages that you can integrate into your app. We’ll discuss some of the most useful ones here, and show you how to use them.
React DevTools
React Devtools is a Chrome and Firefox extension that is extremely useful when debugging React applications. You can think of it like Chrome’s Element inspector—it allows you to navigate down your application tree, but rather than viewing HTML and CSS, you’re viewing props and state.
You can also select elements just like you would inspect element with Chrome’s devtools, which can be handy when working with complicated applications.
The extension also includes the React Profiler, which times the rendering of components and helps to eliminate poor performance and “jank” in your application.
The profiler can take a scan of your app, and output a bar chart of the most render-intensive components.
React Router
react-router is the go-to package for handling path-based routing in your app. It adds a new component that sits at the top level of your app, and routes to other components based on the URL path, allowing you to organize everything into “Container” components that represent individual pages.
For example, the top <App> component of your application might look something like this:
export default function App() {
return (
<Router>
<div>
<Navbar />
<Switch>
<Route path=”/about”>
<About />
</Route>
<Route path=”/users”>
<Users />
</Route>
<Route path=”/”>
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
The <Switch> component looks through all of its children and finds a <Route> component with a path argument that matches the given path. If it matches, all child components of the <Route> are rendered, usually containing a container component for a whole page.
You can even set paths with variables, such as users/:userID, which can be retrieved in the child component with useParams().
Because React Router handles all of the routing itself, it’s insanely snappy for the client. This is known as a Single Page Application, or SPA. Instead of requesting new pages from a server, the client dynamically rewrites the current page. In the case of React Router, it routes based on the URL to provide a seamless experience—your users will just think your site is loading instantly.
Redux
Redux is state container for your React application. It adds a global data store that you can connect to from any component, complete with actions and reducers you can dispatch to modify the current state.
Really, Redux is just a fancy wrapper for React’s Context API. Context allows you to pass data to any component without passing props manually through intermediate components. While you could implement your own basic global datastore similar to Redux pretty easily, Redux has a few advantages over that approach.
First off, Redux’s debugging tools are fantastic. Because state is immutable and can only be updated through actions and reducers, it allows for Time-Travel debugging. You can scroll back in time and watch your actions affect the current state, and explore your state tree using Redux Devtools.
Redux can also be extended with middleware, and provides a good platform for package interoperability. For example, Redux Saga is a side-effect model for Redux that makes it easier to work with asynchronous actions, such as fetching data from a database or browser cache.
Redux also cleanly manages component updates—a single change in state won’t trigger a rerender of every connected component, only the ones it affects, preventing unnecessary jank.
Styled Components
styled-components makes working with CSS in React easier. While you can just give everything class names and style them as usual, it isn’t as “smart” and doesn’t connect to props and state very easily. React has their own styling system, but it uses different syntax, and it’s a bit clunky.
Styled Components solves that problem by enabling you to write CSS directly in a string literal, creating a new “styled component” in the process. For example, you could create a button that changes color based on props.primary by replacing the background value with a function that looks up from props, like so:
const Button = styled.a`
border-radius: 3px;
padding: 0.5rem 0;
background: ${props => props.primary ? “palevioletred” : “white”};
border: 2px solid white;`
You aren’t limited to primitives either—you can make styled versions of your own components.
React Bootstrap
Bootstrap is the most popular front-end component library on the web. It provides many different components for common UI elements like navbars, forms, cards, and much more, saving you from writing them from scratch.
React Bootstrap offers Bootstrap’s primitives as React components, which you can extend with custom styling to suit your app’s needs. Bootstrap cuts out the trouble of tweaking the behind-the-scenes formatting like padding, margins, flexbox, and layout, leaving you to focus on the styling and functionality of your app.
You can browse their component library here to learn more.
Storybook
If your app uses a lot of components, you might be interested in a better way to manage and test them. Storybook provides a sandboxed environment for building and testing UI components in isolation, as well as an easy way to manage and organize your component library as a whole.
Each component is viewable in isolation, and has multiple “knobs” that control the data being sent to them. You can even write extended documentation for the component, which helps improve internal usability. Of course, Storybook does require some level of extra setup for each component, and writing documentation isn’t free, but for large teams with a very cluttered ./components folder, Storybook can help organize it.
If you’d like to demo what using it is like, they have many live demos available online from companies like IBM, Uber, and Coursera that use Storybook to manage their component libraries.
If Storybook is too much for you, you can try out Styleguidist, which provides an easy to manage style guide for your developers to reference.