10 Tools Every React Developer Needs

Creating, maintaining, and deploying your React app can be frustrating if you’re not taking advantage of modern tooling. However, with the hundreds of thousands of tools out there, it can be overwhelming to decide which ones to use. With the end goal of making feature development and coding as smooth as possible, I’ve done some research, and I’m sharing the tools I found that are making my life easier every day.

1. Create React App

npx create-react-app my-app

Facebook’s Create React App is the known fool-proof way of creating and maintaining a React application. You don’t have to worry about project structure, or which modules to add. Create React app takes care of all of that for you. The thing that makes Create React App stand out is the setup. When you create an app with this tool, you are automatically setting up all of the files that a React app needs to run. You also don’t need to configure anything, as it’s already taken care of for you.

2. No Sweat ESLint and Prettier Setup

npx install-peerdeps --dev eslint-config-wesbos

This ESLint and Prettier setup from Wes Bos is one of the best linting packages you can use. It lints JavaScript based on the latest standards, fixes formatting errors with Prettier, and lints and fixes everything inside of html script tags. My favorite part about this configuration is that it automatically adds semicolons where necessary!

3. XState

npm i xstate @xstate/react

XState is a library for creating, interpreting, and executing JavaScript and TypeScript finite state machines and statecharts for modern web development. With useState, you can represent a piece of state in your component that can be changed at any time. But since the state is directly “changed”, it’s unclear as to how the state can change; this logic is scattered in event handlers and other parts of your component. With useReducer, the logic can be represented clearly in a centralized place — the reducer. Events can be “dispatched” to the reducer, which determines the next state based on the current state and received event. But two things are unclear: you don’t have a full picture of all the possible logical “flows” that can occur, and side-effects are handled separately. This makes it difficult to know exactly what can happen, as all of this logic is stuck in the developer’s head, instead of the code.

This is where XState and @xstate/react come in. With the useMachine hook, you represent your state and logic similar to useReducer, except you define it as a state machine. This lets you specify finite states that control the behavior of “what happens next” per state, as well as what effects should be executed on state transitions. The result is more robust logic, making it impossible to get into impossible states. Oh, and it can be visualized, automatically!

4. React Testing Library

npm install --save-dev @testing-library/react

Testing is all about confidence. You want to be able to ship bug-free applications. As Kent C. Dodds rightfully says, the more your tests resemble the way your software is used, the more confidence they can give you. React Testing Library is an absolutely critical tool to enable you to do this effectively. Plus, it’s recommended by the React team for testing React apps and it’s the de facto standard for testing your React code. Give it a try!

5. React Router

npm install react-router-dom

React Router is a collection of components that get composed declaratively with your application. React Router conditionally renders certain components to display depending on the route that’s being used in the URL. The power with React Router is proven when you use multiple routes to determine which component should render based on which path is active at that moment. Many times, if you’re building a single page application, you will use React Router to render specific components that act like separate pages — making it look like your website is made up of more than one page.

6. Styled Components

npm install -E styled-components

In a typical React application, CSS files and JS files are separated — meaning your styles and components live in different places. Although this is the traditional way of approaching a React application, it comes with its downsides. For example, if you are looking at a CSS file, you have no clue which component is using it, so if you make any changes to it, you don’t know what it’s going to potentially break. The solution to this problem is to scope your styles so that the layout, styling, and app logic all lives in one place in your code. Because of this, when you make changes, you’ll know what it’s affecting, and you will avoid surprises in production. Styled Components make it easy to understand what’s going on because you won’t have to go back and forth between the CSS and js files — It removes this mapping between components and styles, reducing confusion and time wasted going back and forth.

7. Framer Motion

npm install framer-motion

Framer Motion is a production-ready motion library for React. It’s an open-source prototyping tool for React applications. The motions and animations are powered by the Framer library. Framer Motion includes spring animations, simple keyframes syntax, gestures (drag/tap/hover), layout, and shared layout animations. The beauty of Framer Motion is you don’t need to be a CSS expert to make beautiful animations anymore — you can simply create a prototype and then integrate it with your application.

8. Storybook

npx sb init

Storybook is an open-source tool you can use to develop and inspect UI components in isolation. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application. It also helps you document components for reuse and automatically visually test your components to prevent bugs.

9. Reach UI

git clone git@github.com:reach/reach-ui.git
cd reach-ui
yarn install
yarn build

Reach UI provides the foundation for making your React App accessible. Reach UI is a library of accessible React components that have each been tested with Safari + VoiceOver, Firefox + NVDA, and Edge + JAWS. Because they have minimal styling, you can go ahead and add whatever styles you desire to the components.Whether or not you choose to use one or all of the components depending on your scope, Reach UI is a great place to start with accessibility!

10. React Proto

cd react-proto
yarn install
yarn start

React Proto is another prototyping tool for developers and designers. You can prototype UIs without having to write code for it — you simply drag and drop the components into your existing application or create and export a new app with create-react-app. Once the export is complete, you will have auto-generated code that you can further customize with your team. This takes away the headaches that are brought on by classic CSS.

Fork and Clone Repository.

Bonus: Split

npm install --save @splitsoftware/splitio-react

Split is a feature-flagging tool that allows developers to separate code deployment from feature release. With Split, you can test your code in production, run AB tests and other types of experiments, migrate your monolith to microservices, and release features with the click of a button.Split combines feature flags and data. Deploy often, release without fear, and experiment to maximize impact. With Split, you can develop faster, release more often, and maximize your impact. With its numerous integrations, it will fit into your current workstream easily!

Learn More About React and Feature Flags

Using the right tools for your React App can not only make your life simpler but can make development with React more fun! With these ten tools, you will have increased ease of feature development, which will accelerate your releases, and increase your engineering culture. For more information on getting started with feature flags in React, their benefits, and use cases, check out these posts:

• Add Styled Components to Your React App
• The Benefits of Feature Flags in Software Development
• 7 Ways Feature Flags Improve Software Development
• Testing Styled Components in Your React App
• Set Up Feature Flags with React in 10 Minutes

We are always posting new content to our Twitter page, @splitsoftware, and our YouTube channel, so be sure to follow us!

Get Split Certified

Split Arcade includes product explainer videos, clickable product tutorials, manipulatable code examples, and interactive challenges.

Switch It On With Split

Split gives product development teams the confidence to release features that matter faster. It’s the only feature management and experimentation solution that automatically attributes data-driven insight to every feature that’s released—all while enabling astoundingly easy deployment, profound risk reduction, and better visibility across teams. Split offers more than a platform: It offers partnership. By sticking with customers every step of the way, Split illuminates the path toward continuous improvement and timely innovation. Switch on a trial account, schedule a demo, or contact us for further questions.