Original text: medium.com/better-prog…

Translator: Front-end wisdom

In order to ensure readability, this paper adopts free translation rather than literal translation.

The importance in the following tools has nothing to do with sorting.

1.Webpack Bundle Analyzer

Ever wonder which packages or which pieces of code make up the total size of your application? Webpack Bundle Analyzer can help with that.

Webpack Bundle Analyzer creates a live server and provides a dependency package interactive tree visualization. With this toolkit, you can see the location of the rendered file, the gZIP size, the parse size, and details between parent and child levels.

The advantage of this tool is that you can optimize your React application based on what you see.

Here is an analysis chart it generated:

It is clear that the PDF package size occupies the largest proportion of applications, and also the largest proportion of analysis images, which is what we see is what we get.

However, there is limited space to generate an analysis diagram, and you can pass in some useful options to look at it in more detail, such as generateStatsFile: True, or the option to generate a static HTML file that you can save somewhere outside of your development environment for later use.

2. React-Proto

React-Proto is a prototyping tool for developers and designers. This is desktop software, so you must download and install it before you can use it.

Here is a simple demonstration of how to use it:

The application allows you to declare props and their types, view components in a tree, import background images, define them as stateful or stateless, define what their parent component will be, zoom in/out, and export prototypes to new or existing projects.

The app seems more suitable for Mac users, but it is still available for Windows users.

Once the user interface is complete, you can choose to export to an existing project or a new project. If you choose to export to an existing project and select the root directory, it will export them to./ SRC /components, as shown below:

With the release of React Hook, the application needs to be updated to do more work. Of course, open source is the benefit of 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 You about avoidable rerenders.

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.

Monkey patches are mainly used for the following purposes:

  • Replace methods, properties, and so on at run time
  • Add functionality not previously supported without modifying third party code
  • Add patches to objects in memory at run time rather than in disk source code

This is very useful not only to guide the performance of the fix project, but also to help you understand how React works. Also, when you better understand how React works, you’ll become a better React developer.

Listeners can be attached 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 AppCopy the code

After doing so, an annoyingly lengthy warning is printed on the console:

Don’t take this as a false tip, take it as a good thing. Take advantage of those annoying messages so you can fix those wasteful re-renders.

4. Create React App

As you all know, the Create React App is the fastest way to Create React projects (right out of the box).

What could be simpler than NPX create-react-app

For those of us who don’t know how to create TypeScript projects using CRA, it’s easy to just add — TypeScript at the end:

NPX create-react-app <name> -- typescriptCopy the code

This saves you the trouble of manually adding TypeScript to your CRA creation project.

5. React Lifecycle Visualizer

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

Similar to the Why Did You Render tool, You can select 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, so you can use it without worry.

It provides a user-friendly graphical user interface for many of the typical tasks that developers often face, such as creating new projects, executing tasks, and managing dependencies.

What Guppy looks like when it launches

7. react-testing-library

The React-testing-library is a great testing library that will make you feel good when writing unit tests. This package provides the React DOM testing utility that encourages good testing practices.

This solution is designed to solve the problem of testing implementation details, rather than testing the React component’s input/output as if the user would see them.

This is a problem that the React-test-library solves, because ideally, you just want your user interface to work and eventually render correctly.

It doesn’t matter how you get the data into these components, as long as they still 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 examine 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 can use to debug their applications.

9. Bit

Bit provides access to thousands of open source components and allows you to use them to build projects.

There are many React components available, including tabs, buttons, charts, tables, navigation, drop-down lists, load spinner, date picker, breadcrumbs, ICONS, layout, and more.

10. Storybook

Storybook is a library to easily build UI components. The tool launches a real-time development server that supports hot reloading out of the box, where you can independently develop React components in real time.

This is enough for a normal document page:

11. React Sight

Have you ever wondered what your application looks like in a flowchart? React Sight allows you to visualize a React application by showing a real-time component hierarchy tree of the entire application.

It also supports React router, Redux, and React Fiber.

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

If you have problems viewing the results, type Chrome: Extensions in the address bar, look for 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 your project and enables you to:

  • Render components with any combination of props, context, and state.
  • Simulate each external dependency (API response,localStorage, etc.).
  • View the real-time evolution of application state as it interacts with the running instance.

13. CodeSandbox

CodeSandbox is an online editor where you can create and run Web applications.

CodeSandbox initially only supported React in its early stages, but they have now been extended to other starter templates for Vue and Angular libraries.

They also support creating projects using common static site generators such as Gatsby or next.js to start React Web projects.

14. React Bits

React Bits is a collection of React patterns, techniques, tips, and tricks, all written in a format similar to an online document 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.

GitHub Repo, currently has 10,083 stars.

15. folderize

Folderize is a VS Code extension. It allows you to convert component files to a component folder structure. The React component is still a component, just converted to a directory.

For example, suppose you are creating a React component that uses a file as props to display useful information, such as metadata

The metadata component logic takes up a lot of lines, so we decided to split it into separate files. However, when we do this, we have two files that are related to each other.

So, there is a directory that looks something like this:

We might want to abstract fileView.js and Filemetada.js into directory structures, just like Apple does, especially if we consider adding more components related to filesCanner.js and other files.

This is what Folderize does for us, so that components can get a similar structure

16. React Starter Projects

React Starter Projects is a list of dependency libraries that you can quickly use to get the names of the libraries you need and jump to github.

Once you see a starter project you like, you can simply clone the library and modify it to suit your needs.

However, not all dependency libraries are used by cloning, as some of them need to be installed to become project dependencies.

17. Highlight Updates

This is probably the most important tool in the development kit. Highlight Updates is a feature of the React DevTools extension that allows you to see which components in a page are being unnecessarily rerendered.

It makes it easier to spot performance issues when you’re developing pages, because they’ll color in orange or red for serious re-rendering issues.

18. React Diff Viewer

React Diff Viewer is a simple and beautiful text difference comparison tool that supports split views, inline views, character differences, line highlighting, and more.

19. JS.coach

Js. coach is the site I most often use for libraries that need to work with React. You can find everything you need from this page.

It’s fast, easy, constantly updated, and always gives me the results I need for all my projects. React VR was recently added, which is awesome.

20. Awesome React

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

I’ll probably forget about the other sites and learn React from this link alone. Because you can find a lot of useful resources here that will definitely help you build great React applications!

21. Proton Native

Proton Native gives us a React environment to build cross-platform Native desktop applications.

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

  • React Native has the same syntax.

  • This works with existing React libraries, such as Redux.

  • Compatible with all normal Node.js packages.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Communication (welcome to join the group, the group will give red envelopes on weekdays, interactive discussion of technology)

Dry goods series of articles summarized as follows, feel good point Star, welcome to add groups to learn from each other.

Github.com/qq449245884…

I am Xiaozhi, the author of the public account “Big Move the world”, and a lover of front-end technology. I will often share what I have learned to see, in the way of progress, mutual encouragement!

Pay attention to the public number, background welfare, you can see the welfare, you know.