The Facebook-developed React JavaScript library, a declarative, component-based technology for building web UIs, has gained traction with developers in recent years.
Offering developers efficiency and flexibility, React—aka React.js—debuted to the public in May 2013. Since then the open source library has been starred more than 135,000 times on GitHub and forked more than 25,000 times.
Not surprisingly, an ecosystem of companion tools has sprung up around React, including an IDE and a number of frameworks. Here are 7 key tools available for developers looking to leverage React when building their web applications.
React Sight
React Sight is a Chrome browser extension that provides a live view of the component hierarchy tree of a React application. It supports React Router and Redux. React Sight searches for React renderers and patches the renderer to collect data on state change. The creators of React Sight built the tool because they saw a need for a tool to provide a visual representation of an application’s structure. Intended to be simple to use, React Sight includes filters that allow you to view only the components you want to see.
You can install React Sight from the Chrome web store.
React Developer Tools
From the React team at Facebook, React Developer Tools enables inspection of the React tree including the component hierarchy and state. Released in August 2019, React Developer Tools 4 is available for Chrome, Firefox, and (Chromium) Edge. Facebook has promised significant performance gains and improved navigation in the new version. Capabilities include:
- Full support for React Hooks, which let you use state and other React features without writing a class. Support is offered for inspecting nested objects.
- A mechanism to filter components from the tree so it is easier to navigate deeply nested hierarchies. Host nodes such as HTML
<div>are hidden by default, but the filter can be disabled.
React Developer Tools is available as a browser extension in Chrome and Firefox. It also can be installed via NPM using the stand-alone shell:
npm install -g react-devtools@^4
Reactide
Reactide is a dedicated IDE for React web development. Running an integrated Node.js server and a custom browser simulator, Reactide users do not have to fuss with configuring servers or build tools. Nor do they have to flip back and forth between the browser, IDE, and server. A live reloading capability lets developers track changes right in the development environment. Other capabilities include:
- A visual component tree for managing state across an application.
- An integrated terminal for running commands in
bashfor Unix andcmdfor Windows. - Out-of-the-box hot module reloading.
You can download Reactide from the project website. Reactide is available for MacOS, Windows, and Debian or Ubuntu Linux.
Redux
A predictable state container for JavaScript apps, Redux helps developers write applications that run consistently in different environments including web client, web server, and native applications. Redux works with React or any other view library. Redux is 2 KB in size including dependencies and draws on an ecosystem of add-ons. Features of Redux include:
- Centralization of application state and logic, enabling capabilities such as do/redo and state persistence.
- Tracing when, why, where, and how an application state changed.
- “Time travel debugging” that can send error reports to a server.
You can install Redux via NPM:npm install —save redux
Next.js
Called the “React framework for the enterprise,” Next.js offers capabilities such as server-side rendering, file system based routing, and exporting static sites. The framework is optimized for smaller build sizes and faster compilation. Developers can use the Webpack module bundler and the Babel JavaScript compiler. Released in July 2019, Next.js 9 offers the following features:
- File system based dynamic routing for applications.
- Zero-config TypeScript support.
- API routes for building back-end application endpoints while leveraging hot reloading and a unified build pipeline.
Setup instructions for Next.js can be found on GitHub.
Evergreen
Evergreen is a React UI framework for building “enterprise-grade” web apps. Evergreen combines a set of composable React components, built on top of React UI primitives, and its own UI design language. The framework is based on the principle that future requirements can never be predicted, only prepared for. Most of the components are implemented on a box primitive that allows for customization. Evergreen promotes the development of systems that anticipate new requirements.
You can download Evergreen from GitHub.
Craft.js
Craft.js is a React framework for building extensible, drag-and-drop page editors. Page editors provide a way to offer an excellent user experience, but in the words of the developers behind Craft.js, building one can be a “dreadful” experience. Craft.js is designed to make the process easier.
Craft.js modularizes the building blocks of a page editor, adds a drag-and-drop system, and handles how user components are rendered, moved, and updated. Developers design the editor the same way they design any other front-end application in React, and have precise control over how the page editor behaves and looks. An API is provided to maintain and manipulate the editor state.
You can download Craft.js from GitHub.