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

This article mainly explains "what are the super tools of React R & D personnel". The content of the explanation is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the super tools of React R & D personnel".

1. Webpack Bundle Analyzer

Https://github.com/webpack-contrib/webpack-bundle-analyzer

Have you ever wondered what package or application part takes up all the space? Webpack Bundle Analyzer can help you find out. This package helps users identify output files that take up most of the space.

It creates a live server that visually displays the contents of the software set in an interactive tree map. With it in the package, you can see the location of the display file, the size of its compressed file, the size of the parsed file, and its source / derived files.

What are the benefits? Optimize React programs based on what you see!

This is a screenshot of the application:

Obviously, the pdf package takes up most of the space in the application. But it also takes up most of the space on the screen. This is really useful.

However, this screenshot is minimized, and you can browse some useful options, such as generateStatsFile: true, to see more details, and you can also choose to generate a static HTML file and save it outside the R & D environment for backup.

2. React-Proto

Https://github.com/React-Proto/react-proto

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

This is an example of the use of the software:

The app allows users to declare props and their types, view components in a tree view, enter background images, define their status, identify their parent components, zoom, and output prototypes to a new or existing project.

The app looks more like it's tailored for Mac users, but it's still easy for Windows users to use.

When you have finished drawing the user interface, you can choose whether to output to an existing project or a new project. If you choose to export to an existing project and select the root directory, it will output to. / src/components like this:

Here is an example of one of the components that exist in the instance:

React-Proto has been praised by more than 2000 stars in GitHub.

However, as far as the author is concerned, the app still needs to be updated and improved, especially the release of React Hooks.

And it cannot zoom out unless there is a visible background image. In other words, if you enter a background image, zoom out, and then delete the background image, you will not be able to enlarge the image again because the button will turn gray.

The only way to re-zoom in is to re-enter the background image and reenlarge it before removing it. This flaw has changed the author's view of the app, but it is still among the top 22 tools, because it is really unique in such open source.

Open source is an advantage of the application because it provides a variety of possibilities for forming a list of code bases that tend to be open source in the future. Its advantages are important, but there seems to be a lack of human resource support.)

3. Why Did You Render

Https://github.com/welldone-software/why-did-you-render

This Why Did You Render patch fixes React by informing developers of avoidable refreshes.

This is so useful that it not only guides the repair work of the project, but also helps developers understand the operation of React. With a better understanding of the operation of React, React R & D staff will be a great success.

Attach a listener to any custom component by displaying an additional static performance whyDidYouRender with a value of 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

Only when this is done can the console be notified of a very annoying warning:

Don't take this information as an error. Think of it as a good thing. With this annoying information, you can fix those wasted patches, and eventually the annoying news will leave you!

4. Create React App

Https://github.com/facebook/create-react-app

It is well known that Create React App is the fastest way to develop a React project (including modern features outside the toolbox).

Is there anything simpler than npx create-react-app?

All the tutorials on Medium use create-react-app to establish the React interface, just because it is fast.

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

Npx create-react-app- typescript

It will save you the trouble of manually adding TypeScript to the CRA project.

5. React Lifecycle Visualizer

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

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

Like Why Did You Render, you can choose any component to display its lifecycle observer:

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 causes the observer to display as follows:

However, one of the disadvantages is that it is currently only useful for class components, so Hooks is not supported for the time being. The question is, can they be seen as life cycles?

6. Guppy

Https://github.com/joshwcomeau/guppy

Guppy is a friendly and free application manager and task management tool designed for React running on the desktop.

The app seems to give priority to novice developers in React. Of course, it may also be useful for senior R & D personnel.

It provides a friendly graphical user interface specifically for many typical tasks that React developers often face, such as new project creation, task execution and dependency management.

In August 2018, support for windows was added, so to be sure, it is cross-platform.

This is what the interface of Guppy looks like:

7. React-testing-library

Https://github.com/testing-library/react-testing-library

I have always liked react-testing-library because it always feels right when writing unit tests. This package provides React DOM testing utilities to promote good testing practices.

The goal of this solution is to solve the problem of test implementation details, but it tests the input / output of the React component as if the user could see it.

Testing implementation details is not an effective way to ensure that the application runs as scheduled.

Of course, what makes people more confident is how to get the data needed by the component, how to sort it, and so on. However, if the implementation needs to be changed for different databases, the unit tests will fail because they are the implementation details of the coupling logic.

This is the problem that react-testing-library solves, because ideally, what developers want is for the user interface to run and display correctly until the end.

As long as the output is expected, it really doesn't matter how you get the data for these components.

Here is a sample code on how to use the library to place tests:

/ / Hoist helper functions (but not vars) to reuse between test cases const renderComponent = ({count}) = > render (,) 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))})

8. React Developer Tools

Https://github.com/facebook/react-devtools

React Developer Tools is an extended tool that allows React component levels to be tested in Google and Firefox development tools.

This is the most well-known extension tool in this list, and it will continue to be one of the most useful tools for React developers to debug applications.

9. Bit

Https://bit.dev/

One of the good alternatives to using component libraries such as Material-UI or Semantic UI React is Bit.

Bit allows users to explore thousands of open source components and use them to build their own projects.

There are too many different React components available for everyone to use, including tabs, buttons, charts, tables, navigation bars, drop-down menus, load lists, date selection tools, browsing traces, icons, layouts, and so on.

These are uploaded by React developers like readers and writers.

However, there are also utilities available, such as formatting the distance between dates.

10. Storybook

Https://storybook.js.org/

If you don't know Storybook yet, but want to build UI components in an easier way, I strongly recommend starting to use it.

This tool starts the dynamic development server, which is supported by hot overloading out of the box, and can develop React components in real time and separately.

Another benefit is that existing open source add-ons can be used to take the R & D experience to a whole new level.

For example, when developing React components for product use, with the Storybook README package, you can create a README file (README).

Serving as a document page is sufficient:

11. React Sight

Https://www.reactsight.com/

Have you ever wondered how the application will appear in the flowchart? Then, React Sight will visualize the React program by rendering a dynamic component hierarchy tree of the entire program.

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

With this tool, you can hover over nodes, which are links to components that are directly related to them.

If the result shows a problem, you may want to type chrome:extensions in the address bar, find React Sight box, and click the Allow access to file URLs switch, as shown below:

12. React Cosmos

Https://github.com/react-cosmos/react-cosmos

React Cosmos is a development tool designed to create reusable React components.

It scans projects for components, enabling developers to:

1. Repair components with any combination of props, environment, and state.

two。 Simulate each external dependency (for example, application interface response, localStorage, etc.)

3. View the real-time evolution of the application state when interacting with the running instance.

13. CodeSandbox

This is undoubtedly one of the excellent tools for React developers to let go and get the job done in the blink of an eye.

This tool, called CodeSandbox, is an online editor that allows developers to create web applications from prototyping to deployment-everything from the web!

CodeSandbox originally only supported React in the early stages, but now extends to provide additional beginner templates for libraries like Vue and Angular.

It also supports launching the next React page project by creating the same static site builder, such as Gatsby or Next.js.

When it comes to Codesandbox, there are too many good things to say. For one thing, it is very active.

If you need to explore projects that people have built for ease of use, simply click "explore" and get a bunch of code samples that will help revolutionize the next project:

Once you start writing a project, you begin to understand that what you will use is a powerful VS Code editor.

The author wants to write down all the features that developers can use in CodeSandbox today, but it seems that this task has been completed.

14. React Bits

Https://vasanthk.gitbooks.io/react-bits/

React Bits is a collection of React patterns, techniques, tricks, and tricks, all written into online class document patterns, where you can quickly get different design patterns and techniques, anti-patterns, styles, user experience (UX) changes, and other useful React-related materials, all under the same tag.

They have a GitHub repo program (https://github.com/vasanthk/react-bits)) that has been praised by 9923 stars.

There are some examples, including concepts such as prop agents, chapters dealing with various user experiences in different situations, and even exposing some of the pitfalls that every React developer should be aware of.

The following is the rendering on its page. As the menu bar on the left shows, there is a lot of information:

15. Folderize

Https://marketplace.visualstudio.com/items?itemName=ee92.folderize

Folderize is an extension of VS Code and has just been released for less than a week. It allows the user to transfer the component "file" to the component "folder" schema. The React component will still be a component, just converted to a file directory.

For example, for example, developers are creating a React component that uses files as props to display useful information like metadata.

The logic of the metadata component took up a lot of lines, so the developers decided to break it down into a separate file. However, once this is done, there will be two interrelated files.

therefore. If you have a file directory like this:

Developers may want to bring FileView.js and FileMetadata.js into the file directory architecture, just like Apples-especially when considering adding more components related to FileScanner.js-like files.

This is what folderize does for developers, so the architecture presented is similar to this:

16. React Starter Projects

Https://www.javascriptstuff.com/react-starter-projects/

Here, there is a nice list of React starter projects in which you can see everything on one page. So, if you are the kind of person who can find useful content from a wide list of choices at the same time, then this tool is perfect for you.

Once developers see a project that they like and are easy to use, they can directly copy the warehouse and modify it according to the application they are going to launch.

However, not all projects can be used by copying repositories, because some need to be installed and will become dependencies of the project.

This makes it easier to update and keeps the project clean.

This is what its page looks like:

17. Highlight Updates

Https://reactjs.org/docs/optimizing-performance.html

This is probably the most important tool any R & D staff has ever used in their R & D toolbox. Highlight Updates is an extension of React DevTools that allows you to see which components in the page are refreshed unnecessarily:

It helps identify bottlenecks in developing pages and even makes the process easier because they mark serious refresh problems as orange or red.

Unless you just want to build a mediocre application, why not take such a good tool into your pocket?

18. React Diff Viewer

Https://praneshravi.in/react-diff-viewer/

React Diff Viewer is a simple and beautiful text differential instruction viewer made by Diff and React. It supports split-screen view, inline view, word difference instruction, line thickening and other functions.

This tool is useful if developers try to embed this performance in notepad (such as Boostnote) and customize it to better suit their applications (theme colors, documents presented in combination with storybooks, etc.).

19. JS.coach

Https://js.coach/?collection=React

The website that the author uses most when looking for React-related materials is JS.coach. At present, the author is not sure why this treasure website is not mentioned by everyone, but I have found everything I need on this page.

It is simple, fast, constantly updated, and has never failed to provide the information needed for the project.

Best of all, this site has just added a React VR tag!

20. Awesome React

Https://github.com/enaqx/awesome-react

The GitHub Awesome React open source repository is an excellent list of knowledge about React.

The author may have to forget other sites, and only learn React from this site, you will find a lot of useful resources to help build powerful React applications!

21. Proton Native

Https://github.com/kusti8/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 same syntax as React Native.

Work with existing React libraries, such as Redux.

Cross-platform.

Local components. No more Electron.

Compatible with all normal Node.js packages.

twenty-two。 Devhints React.js Cheatsheet

Https://devhints.io/react

This is a great quick check list for React.

Thank you for your reading, the above is the content of "what are the super tools of React R & D personnel". After the study of this article, I believe you have a deeper understanding of what the super tools of React R & D personnel have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.