IO /5-tools-for…

The translator’s note:

  • In this article, EXCEPT React devTools and Redux devTools, I have never touched the other tools before. After reading the original text, I felt that I gained a lot, so I translated it, hoping to spread it to more people.

    • React devTools and Redux devTools are two things that most people probably know about and use frequently in development. If you haven’t used them yet, this article can be your guide to getting into a pit 😜
    • If you are developing business components, this article will help you: StoryBook can help you become more efficient; A Bit can serve as an alternative to sharing business components within a team.
    • Create-react-app is the only application that can be used to build react applications. The create-React-app is the only application that can be used to build React applications.

React is great for quickly developing applications with beautiful interactive UIs. The React component is a great way to create isolated and reusable building blocks that can be used to develop different applications.

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

1. Bit

Here’s a video introducing the Bit

Components shared by a Bit can be installed automatically by NPM or Yarn, or used together with the Bit itself. The latter enables you to develop components from different projects simultaneously 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 component unit tests), and documents parsed from the source code itself.

With Bit, you can develop multiple applications more quickly, using your components as building blocks for new features and projects as teams collaborate.

The translator’s note:

When I first read this, I did not feel the advantages of Bit. I think using NPM package to share components is already a good solution 😂. Later, I went to the official website and found that the biggest advantages of Bit should be the following (any mistakes welcome correction) :

  • Use NPM package to share components plan requires you to open a new warehouse to write components and publish the NPM package, and Bit allows you to not open a new warehouse can from any existing warehouse seamless isolation components of the project, and share them, you can use in other projects Bit to import your required components and develop and synchronization.
  • The Bit website provides interactive preview playground, where you can modify the code online in real time to see the changes to the component and determine if it meets your expectations.

However, the current number of Bit stars on GitHub is only 3k+

2. StoryBook / Styleguidist

Storybook and Styleguidist are environments for fast UI development in React. Both are great tools for improving the efficiency of React application development. There are some important differences between the two, and you can combine them to complete a component development system.

  • With Storybook, you can write stories in JavaScript files.
  • With Styleguidist, you can write examples in Markdown files.

Storybook shows variations of one component at a time, but Styleguidist can show multiple variations of different components. Storybook is great for showing the state of components, while Styleguidist is useful for documenting and demonstrating different components.

StoryBook

Here is a brief introduction

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, play with their properties, and get instant impressions through hot reloads on the network.

You can see some examples here.

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

Translator’s note: This is really pushing!! Push!!

Styleguidist

The website address

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

It supports ES6, Flow, and TypeScript, and can use the Create React App directly.

The automatically generated usage documentation means that you can use Styleguidist as a documentation entry point for components on your team.

See also React Live by Formidable Labs. This component rendering environment is also used for Bit’s real-time component playground.

3. React devTools

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

React devTools allows you to examine and edit component props and state. By organizing the hierarchy tree,React devTools lets you understand how component updates affect other components to help design the UI with proper component structure and fragmentation.

The extension’s search bar lets you quickly find and examine the components you need, saving valuable development time.

You can check out standalone apps for Safari, IE, and React Native here.

4. Redux devTools

This Chrome extension (and FireFox add-ons) is a development debugging tool to help you with your Redux development efforts. It allows you to examine the payload for each state and action and reevaluate “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 time travel to cancel operations (watch this Dan Abramov video). The logging UI itself can even be customized as a React component.

5. Boilerplates & Kick-Starters

While these aren’t exactly devTools, they help quickly set up React applications while saving time on builds and other configurations.

React has a lot of starter kits, but here are some that I think are worth recommending. You can quickly create application structures and compose components into them.

Create React App (50k stars)

This project is widely used and very popular, and it’s probably the best way to quickly create a simple new React application and run it straight away.

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

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 generates the initial project structure and installs dependencies so you can start coding directly.

React Boilerplate (18k stars)

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

Its fast scaffolding helps to create components, containers, routes, selectors, and Sagas – as well as their tests – directly from the CLI, while CSS and JS changes can be reflected immediately as you write code.

Unlike create-React-app, this boilerplate is not designed for beginners, but for experienced developers (it provides tools for managing performance, asyncrony, styling, and so on).

React SlingshotStars (8.5 k)

The React + Redux starter kit/template comes 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, hot changes are hot reinstalled and automated tests run.

The project even includes a sample application, so you can get to work without reading too much documentation.

  • You can also check out the simple-react-app explained in this article.

More on this

How to write better React code

11 React UI Component Libraries you should know about in 2018

Build a UI component design system

How do I share and synchronize React UI components between projects and applications