This article is translated by Jsmanifest authorized LeanCloud.

React, as we all know, is a JavaScript library for building great user interfaces. However, not everyone uses the same tools or knows all the useful tools that can help make the React development experience more fun and proactive.

If you haven’t used React yet, or if you have friends who are interested in React, what should you say when they ask why you chose the library? In addition to telling them how great the library is (which should be the first thing to say), I also want to mention that these tools created by the open source community help take the development experience to a whole new and exciting level.

Here are 22 tools you can use to build React applications in 2019 (the list is not in order of importance).

1. webpack-bundle-analyzer

Have you ever wondered which packages or parts of your application are taking up all the space? Well, we can look at it with webpack-bundle-Analyzer, which will help us identify the output files that are taking up the most space.

It will create a live server and provide us with an interactive visual tree of the bundle’s contents. With this toolkit, we can view the location of the files that are displayed, their GZIP size, their parsed size, and the parent level files that they belong to.

What are the benefits? We can optimize our React application based on what we see!

Here’s a screen shot of it:

We can clearly see that PDF packages take up the most space in the application. It also takes up the largest screen, which is useful for all of us.

However, the quality of the screen shots is very small. We can also enter useful options to see more details, such as generateStatsFile: True, and have the option of generating static HTML files to be stored somewhere outside of the development environment for later use.

2. React-Proto

React-Proto is a prototyping tool for developers and designers. This is a desktop software, so we need to download and install the software before using it.

Here is the tool page style:

The application allows us to declare properties and their types, view components in a tree, import background images, define them as stateful or stateless, define their parent components, zoom in/out, and export stereotypes to a new or existing project.

The app seems more suitable for Mac users, however, it also supports Windows.

When we are done with the user interface mapping, we can choose to export it to an existing project or a new project. If you choose to export to an existing project and select the root directory, they will be exported to./ SRC/Components, as shown below:

Here is an example where we use one of the components in the example:

React-proto has 2,000 stars on GitHub.

However, I think the application still needs to be updated and there is a lot of work to be done, especially with the Release of React Hooks.

We can’t zoom out unless we have a visible background image. In other words, if you import a background image, zoom out, and then delete it, it won’t be able to zoom in because the action button has grayed out and isn’t usable.

The only way to zoom in is to re-import the background image, zoom in and delete it. This bug changed my opinion of the tool, but since I can’t see the open source file anywhere else, I added it to the list. Of course, being open source is a good thing for this application, as it makes it possible to become a popular list of open source repositories in the future.

3. Why Did You Render

Why Did You Render Monkey Patch React notifies us that rerendering can be avoided. Not only is this useful, but it also guides us through performance fixes for our projects and helps us understand how React works. Also, learning more about how React works will make us better React developers.

Monkey patch: The term comes from the Zope framework, where Bug fixes are often added at the end of a program. These are called “Guerilla patches.” Guerilla eventually became Gorllia, Then came monkey, which is how the name monkey patch came to be.

We can attach a listener to any custom component by declaring an additional static property, whyDidYouRender, and setting its value to true:

import React from 'react'
import Button from '@material-ui/core/Button'const Child = (props) => <div {... props} /> const Child2 = ({ children, ... props }) => ( <div {... props}> {children} <Child /> </div> ) Child2.whyDidYouRender =true

const App = () => {
  const [state, setState] = React.useState({})

  return (
    <div>
      <Child>{JSON.stringify(state, null, 2)}</Child>
      <div>
        <Button type="button" onClick={() => setState({ hello: 'hi' })}>
          Submit
        </Button>
      </div>
      <Child2>Child #2</Child2>
    </div>
  )
}

export default App
Copy the code

Only then did our console pop up an incredibly annoying alert:

But don’t get me wrong, look at it as a good thing. Using those annoying messages, we can fix those wasteful rerenders.

4. Create React App

Everyone knows that the Create React App is the fastest way to start a React project (with modern functionality right out of the box).

What could be simpler than NPX create-react-app

?

My tutorial on Medium (and dev.to) uses create-react-app to build the React interface, simply because it’s fast and easy.

Some of us may not know how to create a TypeScript project using CRA. What we need to do is add –typescript at the end:

npx create-react-app <name> --typescript
Copy the code

This will save us the trouble of manually adding TypeScript to CRA projects.

5. React-Lifecycle-Visualizer

The React-Lifecycle-Visualizer is an NPM package for tracking and visualizing the Lifecycle methods of any React component.

Similar to Why Did You Render, we can choose any component to launch the lifecycle visualization tool:

import React from 'react'
import {
  Log,
  VisualizerProvider,
  traceLifecycle,
} from 'react-lifecycle-visualizer'

class TracedComponent extends React.Component {
  state = {
    loaded: false,}componentDidMount() {
    this.props.onMount()
  }

  render() {
    return <h2>Traced Component</h2>
  }
}

const EnhancedTracedComponent = traceLifecycle(TracedComponent)

const App = () => (
  <VisualizerProvider>
    <EnhancedTracedComponent />
    <Log />
  </VisualizerProvider>
)
Copy the code

The running result is as follows:

One drawback, however, is that it currently only works with class components, so hooks are not yet supported.

6. Guppy

Guppy is React’s friendly, free application manager and task runner that runs on the desktop and is cross-platform.

It provides a number of user-friendly graphical interfaces that support some typical task projects for React developers. Examples include creating new projects, performing tasks, and managing dependencies. And added support for Windows in August 2018, so you can rest assured that it’s definitely cross-platform.

Here’s what Guppy looks like in use:

7. react-testing-library

I’ve always liked the React-testing-library because it feels good when writing unit tests. This package provides useful DOM testing programs that encourage good testing practices.

This solution is designed to solve the problem of testing implementation details as if they were visible to the user, rather than testing the inputs/outputs of the React component.

Test implementation details are not an effective way to ensure that the application works as expected. Of course, we can get a clearer idea of how to get the data the components need, which sorting method to use, and so on. However, if we had to change the implementation to point to another database, the unit tests would fail because these are implementation details of the coupled logic.

This is a problem that the React-testing-library solves, because ideally we just want our user interface to work and eventually display correctly. It doesn’t really matter how the data gets to these components as long as they provide the desired output.

Here is sample code to test using this library:

// Hoist helper functions (but not vars) to reuse between test cases
const renderComponent = ({ count }) =>
  render(
    <StateMock state={{ count }}>
      <StatefulCounter />
    </StateMock>,
  )

it('renders initial count', async () => {
  // Render new instance in every test to prevent leaking state
  const { getByText } = renderComponent({ count: 5 })

  await waitForElement(() => getByText(/clicked 5 times/i))
})

it('increments count', async () => {
  // Render new instance in every test to prevent leaking state
  const { getByText } = renderComponent({ count: 5 })

  fireEvent.click(getByText('+ 1'))
  await waitForElement(() => getByText(/clicked 6 times/i))
})
Copy the code

8. React Developer Tools

React Developer Tools is an extension that allows you to view the React component hierarchy in Chrome and Firefox Developer Tools.

This is the most common extension in React development, and is one of the most useful tools React developers use to debug their applications.

9. Bit

Bit is a good alternative when using component libraries such as Material-UI or Semantic-UI-React. It allows us to explore thousands of open source components and use them to build projects.

There are many different React components that anyone can use, including tabs, buttons, charts, tables, navigation bars, drop-down menus, load spinners, date pickers, breadcrumbs, ICONS, layouts, and more.

These were uploaded by other React developers, just like you and me.

However, there are utilities available, such as formatting distances between dates.

10. Storybook

If you’re new to Storybook and want to be able to easily build UI components, I highly recommend you use it right away. The tool starts a live development server that supports hot overloading, allowing you to independently develop React components in real time.

The other great thing was that we were able to take our development experience to a whole new level using existing open source plug-ins. For example, with the Storybook README package, we can create README documents on the same page while developing the React component for production use. This is enough for a regular document page:

11. React Sight

Have you ever wondered what your application looks like in a flowchart? React-sight gives the entire application a tree view of its hierarchy, giving a clear view of our React application. It also supports React Router, Redux, and React Fibre.

Using this tool, we can hover over nodes that are links to components in the tree that are directly related to them.

If you’re having problems viewing the results, type Chrome: Extensions in the address bar, go to the React Sight box and click the Allow Access to File URLs switch, as shown below:

12. React-cosmos

React- Cosmos is a development tool for creating reusable React components.

It scans the components in the project and can do the following:

  • Render components with any combination of properties, context, and state

  • Simulate each external dependency (for example, API response, localStorage, and so on)

  • View real-time changes in application state while interacting with a running instance

13. CodeSandbox

This is one of the best tools available for this recommendation, and it lets us manually use React faster than a blink of an eye (ok, maybe not that fast).

This tool called CodeSandbox is an online editor that allows us to implement everything from prototyping to Web application deployment on this site!

In its early days, Codesandbox only supported React, but has been extended to Vue and Angular libraries. They also support common static site generators (like Gatsby or NextJS) to create projects to launch the next React Web project.

Not only is CodesandBox active, it has a lot of interesting things to talk about.

If you need to explore some of the projects that people are building for your convenience, click Explore and you’ll have easy access to a number of code examples to help update your next project:

Once you start editing your project, you’ll realize that you’re actually using a powerful VSCode editor.

I’d love to write a full article about all the features we can use on CodeAndBox today, but it looks like we’re done for now.

14. React bits

React Bits is a collection of React patterns, techniques, tips, and tricks, all written in an online document-like format that gives you quick access to different design patterns and techniques, anti-patterns, styles, UX variants, and other useful React related material on the same TAB.

They have a GitHub repository that currently has 10,437 stars.

Some examples include concepts such as item agents, dealing with combinations of UXes in different scenarios, and even hints at pitfalls that every developer should avoid.

This is what their page looks like, as you can see in the menu on the left, with lots of information 🙂

15. Folderize

Folderize is a VSCode extension. It allows us to convert component files into component folder structures. The React component will still be a component, but now converted to a directory.

For example, suppose we are creating a React component that uses files as properties to display useful information, such as their metadata. The metadata component’s logic takes up many lines, so we decided to split it into a separate file. However, when we decide to do this, we have two files that are related to each other.

So, if our directory looks like this:

We might want to abstract fileView.js and FileMetadata. Js into directory structures like Apples-, especially if we want to add more file-related components like FilesCanner.js. This is what Folderize can do for us, so that they can have structures like the following:

import React from 'react'
import FileView from './src/components/FileView'const App = (props) => <FileView {... props} />export default App
Copy the code

16. React Starter Projects

React Starter Projects is a great list of dependency libraries that you can view all in one page. So, if we find it useful to be able to quickly see a large number of options at once, then this works for us.

Once we see a starter project we like, we can simply clone the repository and make simple changes to fit the needs of the application under development. However, not all libraries are used to clone repositories, as some of them need to be installed to become project dependencies. This makes it easier to get updates and keep your project clean.

Here’s what the page looks like:

17. Highlight Updates

This is an important tool that should be in every developer’s toolkit. Highlight Updates is an extended feature of React DevTools to see which components in a page are being unnecessarily rerendered.

They are highlighted in orange/red for serious re-rendering issues, which helps us find performance issues more easily when developing pages.

Unless our goal is to build mediocre applications, why not try this great thing that’s all around us.

18. React Diff Viewer

React Diff Viewer is a simple and beautiful text difference Viewer made using Diff and React. Support a variety of features, such as: split view, inline view, word differences, line highlighting, etc.

This is useful if we want to embed this functionality in notepads (such as Boostnote) and customize it to applications (such as theme colors, story presentation document combinations, etc.).

19. JS.coach

Js. coach is the site I often use to find React material. I don’t know why not many people mention this site, but I found almost all the information I needed on this page. It’s fast, convenient, and constantly updated, and always provides the results I need for all my projects.

Recently, they added the React VR TAB, which is great!

20. Awesome React

The Awesome React open source library is a great list of React related things.

This makes me probably forget about other sites just learning React from this link. Because there are plenty of useful resources here that will definitely help us build great React applications!

21. Proton Native

Proton Native provides a React environment for building cross-platform Native desktop applications.

It is a replacement for Electron and has only a few neat features, including:

  • React Native has the same syntax

  • This works with existing React libraries, such as Redux

  • cross-platform

  • Native component, no longer has Electron

  • Compatible with all normal Node.js packages

Interested in learning more? Please read their documentation.

22. Devhints React.js Cheatsheet

A good React lookup table, although it lacks React Hooks. Don’t worry, I will create a quick lookup table for Reactv16.8 +, stay tuned.

conclusion

That’s all the tools for this sharing.

I hope I can help you.