• 5 Tools for Faster Development in React
  • Author: Jonathan Saring
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Ivocin
  • Proofreader: Haoze Xu, Junkai Liu

This article introduces five tools to speed up the development of React UI components and applications.

React is perfect for quickly developing applications with a great interactive UI. The React component is a great way to create isolated, reusable modules for developing different applications.

While some best practices can help you develop better applications, the right tools can make the development process faster. Here are 5 (+) useful tools to help speed up component and application development.

Your comments and suggestions are welcome.

1. Bit

  • Bit – Share and build component code: Bit helps you share, discover, and use code components across different projects and applications to build new features and…

Bit is an open source platform for building applications using components.

With Bit, you can organize components from different applications and projects (without any refactoring) and make them available for discovery, use, development, and collaboration as you build new features and applications.

  • YouTube video link: Youtu.be /P4Mk_hqR8dU

Components shared on a Bit can be automatically installed via NPM/Yarn or used with the Bit itself. The latter enables you to develop components from different projects at the same time and easily update (and merge) changes between them.

To make components easier to discover, the Bit provides visual renderings of components, test results (the Bit runs the component’s unit tests independently), and documents parsed from the source code itself.

With Bit, you can develop multiple applications faster, collaborate in teams, and use your components as building blocks for new features and projects.

2. StoryBook / Styleguidist

Storybook and Styleguidist are environments for rapid UI development in React. Both are great tools to speed up React application development.

There are some important differences between the two, which can also be combined to complete your component development system.

With Storybook, you can write stories in JavaScript files. With Styleguidist, you can write examples in Markdown files. Storybook shows changes to one component at a time, whereas Styleguidist can show multiple changes to different components. Storybook is great for showing the state of components, while Styleguidist is useful for documenting and demonstrating different components.

Here’s a short rundown.

StoryBook

  • storybooks/storybook: Storybook – Interactive UI Component dev & Test: React, React Native, Vue, Angular

Storybook is a rapid development environment for UI components.

It allows you to browse component libraries, see the different states of each component, and develop and test components interactively.

StoryBook helps you develop components independently of your application, which also helps make them reusable and testable.

You can browse through components in the library, modify their properties, and get real-time effects of components on a web page through hot loading. Some popular examples can be found here.

Different plug-ins can help you develop faster, shortening the cycle between code adjustment and visual output. StoryBook also supports React Native and vue.js.

Styleguidist

  • React Styleguidist: Standalone React component development environment with online style guides: Standalone React component development environment with online style guide.

React Styleguidist is a component development environment with a hot-loaded development server and online style guide that lists component propTypes and displays editable usage examples based on.md files.

It supports ES6, Flow, and TypeScript, and works with the Create React App out of the box. Automatically generated usage documentation allows Styleguidist to act as a documentation portal for different components of the team.

  • Also check out React Live by Formidable Labs. This component rendering environment is also used on Bit’s live component Playground.

3. React devTools

This official React Chrome devTools extension allows you to view the React component hierarchy in Chrome Developer Tools. It is also available as a FireFox add-on.

React devTools allows you to view and edit the props and state of a component while manipulating the component tree. This feature lets you see how component changes affect other components to help you design your UI with the right component structure and separation.

This extension’s search bar allows you to quickly find and examine the components you need, saving valuable development time.

Check out standalone apps for Safari, IE, and React Native.

4. Redux devTools

This Chrome extension (and FireFox add-ons) is a development-time package that is a great tool for the Redux development workflow. It allows you to check each state and action payload and recalculate “staged” actions.

You can integrate the Redux DevTools extension with any architecture that handles state. The local state of each React component can have multiple stores or different instances. You can even unactions by “time travel” (watch Dan Abramov’s video). The logging UI itself can even be customized as a React component.

5. Boilerplates & Kick-Starters

While these aren’t exactly developer tools, they help quickly create React applications while saving time on builds and other configurations. While React has many starter kits, here are some of the best.

When used in combination with prefabricated components (on Bit or other sources), you can quickly create application structures and compose components into them.

Create React App (50k stars)

This widely used and popular project is probably the most efficient way to quickly create a new React application and run it from scratch.

This package encapsulates the complex configuration required by the new React application (Babel, Webpack, etc.), so you can save the time needed to create a new application.

To create a new application, simply run a command.

npx create-react-app my-app
Copy the code

This command creates a directory named my-app in the current folder. In the directory, it will generate the initial project structure and install the delivery dependencies, from which you can simply begin coding.

React Boilerplate (18k stars)

Max Stoiber’s React boilerplate template provides a startup template for your React application that focuses on offline development with scalability and performance in mind.

Its fast scaffolding helps to create components, containers, routes, selectors, and SAGaS — and their tests — directly from the CLI, while CSS and JS changes are immediately reflected.

Unlike create-React-app, this boilerplate is not designed for beginners, but for experienced developers. You can use it to manage performance, asynchrony, style, and so on to build production-level applications.

React SlingshotStars (8.5 k)

This excellent project from Cory House is the React + Redux starter suite/template with Babel, hot reloading, testing, linting, and more.

Much like React Boilerplate, this starter kit focuses on the developer experience for rapid development. Every time you click “Save,” the changes are hot-reloaded and automated tests are run.

The project even includes a sample application, so you don’t have to read much documentation to get started.

  • Also check out simple-React-app, which this article explains.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

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.