• Top React and Redux Packages for Faster Development
  • By Arfat Salman
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Liu Jiayi
  • Proofread by: WZnonstop

Caption: From Unsplash, taken by Fleur Treurniet

React has become one of the hottest front-end frameworks in recent years. The React ecosystem has spawned a series of auxiliary development tools that can further improve our development efficiency. You know, we also always expect to use development tools that can

Photo note: From Giphy

If you’re new to React development, the following toolkits are useful for debugging or visualizing abstract logic in your applications.

Without further ado, let’s begin!

React Storybook

When you’re developing React apps, the thought always comes to mind: it would be nice to be able to visually see how some of the components you’re using or writing will render in different combinations of prop, State and action. Well, Storybook is exactly what you want.

React Storybook builds a visual development environment for React. You can use it to show a library of components and see how each component will render in different states, so that you can develop and test better by interacting with components. Using Storybook allows you to observe the effects of changing states and prop on component rendering, speeding up the development of component prototypes. Click here to see the GitHub repository for Storybook.

The official example provided by Storybook is not to be missed.

Illustration: Demo in Storybook repository

Other highlights of Stroybook are as follows

  • Storybook runs independently and doesn’t interfere with your application.
  • This enables components to be developed independently of the application.
  • This means that you don’t have to worry about dependencies when developing components.

Here are some other tools similar to Stroybook: React Cosmos, React Styleguidist

React Dev Tools

This is the most prestigious development kit in the React world. It allows you to examine React components and the hierarchy between components as you would HTML elements, including examining prop and state of components. In addition, you can use regular expressions to search for, review specific components, and see how selected components affect the rendering of other components using neat features like “Highlight Updates.”

React Dev Tools Demo

You can add React Dev Tools as a Google Chrome Extension or Firefox Add-on. Also, you can download the React Dev Tools package and install it locally as a standalone application. Installing it independently is as easy as adding an Extension (or Addon). Take Chrome as an example. After you install Chrome Developers Tools, a “React” TAB will be added to the page.

React Dev Tools highlights Updates

Tips for use —

  • Highlight Updates: Note the colored lines that appear below the Submit button in the GIF above. This means that every time I type in the input, the entire component gets rerendered!
  • Within the scope of independent components, if an action triggered on one component triggers the other components to rerender at the same time, this behavior does not make sense, and the reasons behind this need to be considered.
  • In most cases, components are designed to be too large, and it is more appropriate to refactor these large components into smaller, more modular components.
  • You can see the current prop and state (email and Password) of the component on the right side of the tools panel. It’s a really cool feature, and you can see where the state changes anywhere in the app and how that affects it.

Why did you update?

We discussed the issue of redundant component rendering in the previous section, but it’s not always easy to tell at a glance if a component’s re-rendering is redundant. Fortunately, there is a toolkit that does the job for you, alerting the console whenever a component is unnecessarily rerendered. The toolkit keeps track of the component’s prop and state states, and prints information on the console if the component has been rerendered without changing either state. Its GitHub address is here, and remember not to use this package in production.

Why Did you Update

Create React App (CRA)

It’s not strictly a development tool, but over the years I’ve found it to be the perfect tool for quickly prototyping React projects. Setting up a React development environment is not easy. There are many dependency packages, such as Babel and Webpack, that are not easy for beginners to understand. Therefore, I wrote a series of articles about Yet Another Beginner’s Guide to Setting up a React Project, including parts 1 and 2. In this article I explained the concepts of JSX, Babel, and WebPack and why to use them.

With these basic concepts in mind, you need to repeat the same set of development environment Settings every time you create a new project. Also, you may need to create multiple such projects at the same time. So, to save developers time, Facebook has packaged all the tedious work into a toolkit, which you can check out here.

Note: The result of successfully running create-react-app is displayed

There’s a good chance you’ve chosen Redux to manage state in your React app. Here are some redux-specific tools —

Redux Dev Tools

Like React, Redux has its own Dev Tools, which can also be installed through Chrome Extension or Firefox Addon. Its functions are

  • You can use it to check every state and action payload.
  • You can use it to “cancel” the action sent in time to fall back to the previous state, this feature is also known as debug time machine. Dan Abramov, author of Redux Dev Tools, has made a great video of his own to demonstrate time machine functionality.
  • If you change the Reducer code midway, all actions that have been recorded will be recalculated according to the new Reducer.
  • If the Reducer code has an exception, you can see the action and the specific error information when the exception occurred.
  • The Dev Tools logging interface (LogMonitor) can be customized exactly as you want. Because it’s essentially a React component, customizing it isn’t that hard. Author Dan Abramov also strongly recommends that you customize your own LogMonitor.

Custom LogMonitors shared by other developers are: Diff Monitor, Inspector, Filterable LogMonitor, and Chart Monitor.

redux-immutable-state-invariant

Due to the limitations of the functional programming style and the Redux mechanism, we should never directly “change” the value of state. Then again, it’s not easy to tell when you’re explicitly “changing” state versus when you’re “replacing” state.

The recommended Redux middleware ensures that you don’t accidentally “change” the state value, and if you do “change” the state value, the middleware will throw an exception to alert you. Check out more here.

Error will be thrown when “modifying” the state value

Tips for use —

  • You need to ensure that state does not contain any values, such as functions, that cannot be serialized. Otherwise, the middleware throwsRangeError: Maximum call stack size exceededThe exception.
  • Be sure not to use this middleware in a production environment, as it involves a lot of object copying and can slow down your online applications.

redux-diff-logger

Whether you use console.log to print state, or start dev Tools with debugger to review and debug state, you really want to capture the values in state that change back and forth. The Redux Diff Logger can do just that, printing out all the values that have changed in state.

Redux-diff-logger official example diagram

If you don’t just want to see what’s changing, you want to “see the big picture.” Lucky for you, the author also shares another logger tool: Redux-Logger.

I also wrote Top Webpack Plugins for Faster Development, which lists a bunch of Webpack Plugins to improve the “quality of development life.”

We always welcome talented and curious people to join our team.

I write about JavaScript, Web development, or computer science every week, so follow me.

You can find me on @Facebook@linkedin @Twitter.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.