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

This article focuses on "what are the React application libraries", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn what are the React application libraries?

1. Formik

Let's face it, almost all web applications have forms, which is a tricky thing.

For users, there is nothing more frustrating than a form that doesn't work properly, or resets after incorrect validation, and enters all the information again. The correct form is the key to a good experience for users in web applications.

That means:

Form fields should have client-side validation.

Fields should not display errors until the user "touches" or the form is submitted.

When invalid submission, the form status should not be lost or reset.

After submission, the form should be validated asynchronously (server-side).

It is quite complicated to write a component that handles all these things yourself. You need to track all form values, as well as the "touch" status of all form fields, even "errors".

In addition, you need to build the logic for form submission. These need to be generic enough to be reused throughout the application. No one wants to repeat it over and over again in the login form, registration form, address form, and so on.

So, using a popular library of the React community is a better choice than building it yourself.

Formik is a library developed by JaredPalmer, where form writing becomes a breeze.

two。 Test library

Testing saves a lot of time. When I create a complex feature or component, I always "wander" between design, product, and development. The designer may require visual or UX changes, and the product department may require changes to the UX. The author has to keep repeating, refactoring and updating components.

By ensuring that components or features are tested correctly, you can ensure that this refactoring does not allow regression to sneak into the code base. It saves a lot of manual testing time, which gives people more confidence.

When it comes to testing React applications, there is a gold standard: testing-library/react, also known as react-testing-library. It's already built into create-react-app, so getting started is easy.

With testing-library, you can test components from the user's perspective.

What does it mean? Let's use a practical example to illustrate.

In this example, the author wrote a test for a simple registration form. It requires the user to provide a name, email and password. These are required fields, and if any item is omitted, the form should show an error when it is submitted.

Import {render, fireEvent} from "@ testing-library/react"; import userEvent from "@ testing-library/user-event"; import {SignupForm} from ". / Form"; describe ("SignupForm",) = > {it ("should show an error whenpassword is omitted", () = > {const renderrendered = render (); const nameInput = rendered.queryByLabelText ("Name"); userEvent.type (nameInput, "JohnSmith"); const emailInput = rendered.queryByLabelText ("Email") UserEventtype (emailInput, "john@smith.net"); const submitButton = rendered.queryByText ("Submit"); userEvent.click (submitButton); expect (rendered.queryByText ("Pleaseinput your password")). ToBeInTheDocument ();})

As you can see, first use react-testing-library to render the registration form.

Then enter your name and email address.

Then click submit.

Finally, "Please enter your password" appears.

Everything in this test is based on how the user interacts with the form. You can ReFactor the form to use different inputs and split it into multiple react components, all of which do not break the test.

3. CSS-Modules and Classnames

When I start a new React project, I usually choose CSS-Modules. Create-react-app has built-in support that is easy to use.

Of course, you can avoid dependencies by following BEM, but you need to learn how to use BEM. CSS-Modules provides predictable, limited, and clear CSS.

The author likes to use classnames and CSS-Modules together. Take a look at the following code first:

ConstclassName = 'button' + props.hasError? 'error':'; return ()

With classnames, you can simplify and then look like this:

ConstButton = props = > ()

You can even combine it with CSS-Modules:

Importstyles from'. / Button.module.css';const Button = props = > ()

Have scope, easy to write CSS, ask you if it smells good!

4. Downshift

You might ask, why use an external library to create something as simple as a drop-down list or choose to enter?

It's really easy to build a component that opens or closes based on a mouse click. But like many front-end tasks, it's not just building components that are difficult.

Creating a drop-down list that is accessible and available to a large number of Internet users who rely on screen readers is not easy, and it is not easy to make it work in keyboardusers.

At this point, I believe that you have a deeper understanding of "what are the React application libraries?" 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.