Shulou(Shulou.com)06/02 Report--

This article focuses on "what are the React development tools", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what React development tools are.

1. Webpack Bundle Analyzer

Have you ever wondered which packages or parts of your application take up all the space? Well, you can use Webpack Bundle Analyzer to find it, and this package will help you determine the output file that takes up the most space.

It will create a real-time server and provide you with an interactive tree view showing the contents of the package. With this tool, you can see the location of the rendered files, their gzip size, the parsed size, and their parent / child files.

You can optimize your React application according to what you see! This is a screenshot of it:

From the figure above, we can clearly see that the pdf package takes up the most space in the application, but it also takes up the most space on the screen. This is very useful.

However, the screenshot is the smallest, and you can see more details with useful options, such as generateStatsFile: true, or you can choose to generate a static HTML file and save it outside the development environment for later use.

2. React-Proto

React-Proto is a prototyping tool for developers and designers. It is desktop software, so you must download and install the software before using it.

This is an example of what this software is using:

The application allows you to declare props and its types, view your components in the tree view, import background images, define them as stateful or stateless, define what their parent components are, zoom in / out, and export your prototype to a new or existing project.

This App seems to be more suitable for Mac users, but it still works for Windows users.

After completing the mapping of the user interface, 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 follows:

This is an example of a component we used in the example:

React-Proto got 2000 stars on GitHub.

Personally, however, I think this app needs to be updated and more work needs to be done, especially with the release of React Hooks.

3. Why Did You Render

Why Did You Render allows React to notify you of avoidable re-rendering.

This is very useful, not only to guide you through the performance fixes of the project, but also to help you understand how React works. And when you have a better understanding of how React works, it will make you a better React developer.

You 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) = > const Child2 = ({children,... props}) = > ({children}) Child2.whyDidYouRender = true const App = () = > {const [state, setState] = React.useState ({}) return ({JSON.stringify (state, null) 2)} setState ({hello: 'hi'})} > Submit Child # 2)} export default App

After doing so, your console will issue an incredibly annoying warning:

Don't get me wrong, take it as a good thing. Make full use of the annoying news so that you can repair the wasteful re-rendering, and the annoying news will eventually leave you!

4. Create React App

As we all know, Create React App is the fastest way to start developing a React project (out of the box, with modern features).

What's easier than npx create-react-app?

What some of us may not know is how to create a TypeScript project using CRA. All you have to do is add-- typescript at the end:

Npx create-react-app-typescript

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

5. React Lifecycle Visualizer

React Lifecycle Visualizer is a npm package that tracks and visualizes the lifecycle methods of any React component.

Like Why Did You Render, you can enable any component you choose to bring out the lifecycle visualizer:

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 TracedComponent}} const EnhancedTracedComponent = traceLifecycle (TracedComponent) const App = () = > ()

This will display the visualizer, as follows:

Https://github.com/Oblosys/react-lifecycle-visualizer

However, the disadvantage of this is that it currently applies only to class components, so Hooks is not supported yet.

6. Guppy

Guppy is a good friend of React, a free application manager and task runner that runs on the desktop.

They seem to give priority to novice developers in React. However, this may also be helpful to senior developers.

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

Windows support was added in August 2018, so you can rest assured that it is cross-platform.

This is what Guppy looks like:

Https://github.com/joshwcomeau/guppy

7. React-testing-library

I've always liked react-testing-library because it feels good when writing unit tests. This package provides a React DOM testing utility that encourages good testing practices.

The solution is designed to solve the problem of testing your implementation details, rather than testing the input / output of React components as users see.

Testing implementation details is not an effective way to ensure that your application works as expected.

Of course, you will be more confident about how to get the data your component needs, which sort method to use, and so on. However, if the implementation must be changed to point to another database, the unit tests will fail because they are the implementation details of the coupling logic.

This is a problem solved by react-test-library, because ideally, you just want your user interface to work properly and eventually render it correctly.

As long as these components still provide the expected output, how to get the data to these components is not important.

The following is sample code for how to place tests using this library:

/ / promote the helper function (but not vars) to reuse const renderComponent = ({count}) = > render (,) it ('renders initial count', async () = > {/ / render new instances in each test to prevent leakage. Const {getByText} = renderComponent ({count: 5}) await waitForElement (() = > getByText (/ clicked 5 times/i))}) it ('increments count', async () = > {/ / render a new instance in each test to prevent leakage. Const {getByText} = renderComponent ({count: 5}) fireEvent.click (getByText ('+ 1')) await waitForElement (() = > getByText (/ clicked 6 times/i))})

8. React Developer Tools

React Developer Tools is an extension that examines the component hierarchy of React in Chrome and Firefox Developer Tools.

This is the most well-known extension in this list and remains one of the most useful tools that React developers can use to debug their applications.

9. Bit

Bit is a good choice for using component libraries such as Material-UI or Semantic UI React.

With Bit, you can explore thousands of open source components and use them to build projects.

Https://bit.dev/

There are many different React components for anyone to use, including labels, buttons, charts, tables, navigation bars, drop-down menus, load rotators, date selectors, breadcrumbs, icons, layouts, and so on.

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

However, there are also some useful utilities, such as formatting dates.

10. Storybook

If you don't know Storybook yet, I strongly recommend that you start using it, and if you want to make it easier to build UI components, you can start using it.

The tool launches a real-time development server with real-time hot overload support, where you can independently develop React components in real time.

Another benefit of this is that you can use existing open source plug-ins to take your development experience to a whole new level.

For example, with the Storybook README package, you can create README documents while developing React components so that they can be used directly for production on the same page.

This is sufficient to be used as a regular document page:

11. React Sight

React Sight allows you to visualize React applications by showing you the 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, which are links to the components in the tree that are directly related to them.

If you cannot view the results, you may need to type chrome:extensions in the address bar, find the "React Sight" box, and then click the "allow access to file URL" switch.

12. React Cosmos

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

It scans the components in the project and enables you to:

Use any combination of props,context and state rendering components.

Simulate each external dependency (such as API response, localStorage, etc.).

View real-time changes in the state of the application when interacting with a running instance.

13. CodeSandbox

This is undoubtedly one of the best tools to make your hand faster than blinking (well, maybe not so fast).

This tool called CodeSandbox is an online editor that allows you to create Web applications from prototype to deployment-all from the website!

CodeSandbox initially supported React only in earlier stages, but has now been extended to other starter templates for libraries such as Vue and Angular.

They also support launching the next React Web project by creating a project using a common static site generator such as Gatsby or Next.js.

There are a lot of great things to talk about about CodeSandbox. First of all, it is very active.

If you need to explore projects that others are building, for your convenience, click explore (explore), and you can easily get a bunch of code examples to help you renovate the next project.

After you start editing the project, you will begin to realize that you are actually using a powerful VS Code editor.

14. React Bits

React Bits is a collection of React patterns, techniques, tips and tricks, all written in a form similar to online documentation, where you can quickly access different design patterns and techniques, anti-patterns, style designs, user experience changes, and other useful React-related materials, all on the same tab.

They have a GitHub warehouse, which currently has 9923 stars.

Some examples include concepts such as prop agents, dealing with combinations of various UX in different scenarios, and even reveal some pitfalls that every React developer should pay attention to.

This is what it looks like on their page. As you can see in the side menu on the left, there is a lot of information:

15. Folderize

Folderize is a VS Code extension released less than 7 days ago. It allows you to convert component files to component folder structure, your React component is still a component, it is now just converted to a directory.

For example, suppose you are creating a React component that uses a file as a props that displays useful information, such as its metadata.

The logic of the metadata component takes up a lot of lines, so you decide to split this into a separate file. But when you decide to do this, now you have two interrelated files.

So, if your directory is as follows:

You may want to abstract FileView.js and FileMetadata.js into a directory structure like Apples, especially when considering adding more components related to files such as FileScanner.js.

This is what folderize does for you so that they can have a structure similar to the following:

16. React Starter Projects

This is a great list of React launcher projects, all of which you can view on one page. So, if you're the kind of person who finds it useful to face a lot of options at the same time, then this is for you.

Once you see a start project that you like, you can simply clone the repository and make your own changes for your upcoming application.

However, not all of them have to be used by cloning repositories, because some of them are to be installed, which becomes a dependency on your project.

This makes it easier to get updates and keep the project clean.

The page looks like this:

17. Highlight Updates

This is arguably the most important tool for anyone in the development toolbox. Highlight Updates is an extension of React DevTools that allows you to see which components of your page are being re-rendered unnecessarily.

It can help you find bottlenecks when developing pages and make them easier because they color serious re-rendering problems orange or red.

Unless your goal is to build a mediocre application, why not want this beautiful thing to stand beside you?

18. React Diff Viewer

React Diff Viewer is a simple and beautiful text diff viewer made using Diff and React. This supports functions such as split views, inline views, word differences, line highlighting, and so on.

This is useful if you try to embed this feature in your notes (such as Boostnote) and customize it to better suit your application (theme colors, combination of document and storybook presentations, and so on).

19. JS.coach

The site I most often use to find React-related information is JS.coach. It is fast, simple, constantly updated, and always provides me with the results I need for all projects.

They recently added React VR tags, which is great!

20. Awesome React

The GitHub Awesome React open source library lists a series of wonderful things related to React.

I may forget other sites and just learn React from this link. You will find a lot of useful resources that will certainly help you build great React applications!

21. Proton Native

Proton Native provides a React environment to build native desktop applications across platforms.

It is an alternative to Electron and has some concise features, including:

The syntax is the same as React Native.

Use with existing React libraries, such as Redux.

Cross-platform.

Native components. Electron didn't.

Compatible with all normal Node.js packages.

Are you interested in learning more? Read their documents.

twenty-two。 Devhints React.js Cheatsheet

A good React cheat sheet, although it lacks React Hooks.

At this point, I believe you have a deeper understanding of "what are the React development tools?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.