56 NPM packages solve 16 React problems

An in-depth guide to choosing the perfect NPM package.

React is a JavaScript library for building user interfaces. It is not only a front-end UI development framework, but also a complete front-end development ecosystem.

React doesn’t have all the solutions, but you can find NPM packages for different scenarios from the thriving ecosystem to address development issues.

Today, we look at the following 16 latitudes to find the best solution.

1. Global status management

Sharing state between components is mandatory in 99% of applications, and there are some good local and external solutions.

Install React-Toolkit
$ npm install @reduxjs/toolkit --save
# or 
$ yarn add @reduxjs/toolkit

It can also be installed using the scaffolding redux template (method 2)
# Redux + Plain JS template
$ npx create-react-app my-app --template redux

# Redux + TypeScript template
$ npx create-react-app my-app --template redux-typescript
Copy the code

Sample code:

import { createSlice, configureStore } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter'.initialState: {
    value: 0
  },
  reducers: {
    incremented: state= > {
      state.value += 1
    },
    decremented: state= > {
      state.value -= 1}}})export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

store.subscribe(() = > console.log(store.getState()))
store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}
Copy the code

If you’re still using the Redux + React Redux combination, the Redux community also provides a lot of middleware to simplify scenarios.

Redux-thunk – Used to handle asynchronous actions (used with redux);
Redux-persist – for storing data locally (offline support);
Reselect – for faster query storage;

$ npm install redux react-redux redux-thunk redux-persist reselect --save
Copy the code

An alternative to

Context – Built-in with React, which is good for simple use and bad for performance, especially if you have a lot of changing data.
Recoil – Designed to solve specific problems, now or experimental status, accurate update, next generation status management solutions.
jotai- Minimalist API, no string keys, typescript-oriented, andreact-springBoth belong to Poimandres.
Mobx – Observer based, reactive programming is recommended for small to medium sized projects.

2. Manage server status

If your application relies heavily on some external data source, managing that data (caching, updates, and so on) is critical to performance.

Transport/protocol/back-end agnostic data fetch (REST, GraphQL, Promise, etc.);
Auto cache + refetch (revalidation upon expiration, window refocus, polling/live);
Parallel + dependent query;
Mutation + requery of reaction formula;
Multi-layer cache + automatic garbage collection;
Paging + cursor based query;
Load more + infinite scroll query/scroll recovery;
Request cancellation;
React Suspense + Fetch- as-you-render;
Dedicated Devtools.

Simple example (global configuration) :

// main.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

import { QueryClient, QueryClientProvider } from 'react-query'

const queryClient = new QueryClient()

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
  document.getElementById('root')
)
Copy the code

// QueryExample.jsx
import React from 'react'
import { useQuery } from 'react-query'
import { ReactQueryDevtools } from 'react-query/devtools'

function QueryExample() {
  const { isLoading, error, data, isFetching } = useQuery('repoData', () =>
    fetch('https://api.github.com/repos/tannerlinsley/react-query').then((res) => res.json())
  )

  if (isLoading) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong> <strong>✨ {data.stargazers_count}</strong> <strong>🍴 {data.forks_count}</strong>
      <div>{isFetching ? 'Updating...' : ''}</div>
      <ReactQueryDevtools initialIsOpen /> 
    </div>
  )
}
export default QueryExample
Copy the code

An alternative to

There is also a library similar to React Query.

The name “SWR” comes from stale-while-revalidate: an HTTP cache invalidation policy popularized by HTTP RFC 5861. This strategy first returns data from the cache (expired), sends a FETCH request (revalidation), and finally gets the latest data.

The main benefit of this library is that it was built by Vercel, the people who created next.js. Therefore, you can expect better performance when working with next.js.

# installation
$ npm i swr --save
# or
$ yarn add swr
Copy the code

SWR covers all aspects of performance correctness and stability to help you build a better experience:

Fast page navigation
The polling interval
Data dependencies
Revalidate when focusing
Verify again when the network is restored
Local cache updates (Optimistic UI)
Intelligent error retry
Paging and scrolling positions restored
React Suspense
.

3. The scaffolding

Creating React applications from scratch is complex, and setting up WebPack, Babel, and so on can be daunting.

An alternative to

If you’re starting to build some basic projects with React, you have other options.

Gatsby – Build a static content oriented website, not suitable for other projects.

4. UI component library

A universal and complete UI library not only helps us solve repetitive application scenarios, but also saves development costs and ensures the performance of the library after being tempered by the community.

core– 30+ components, over 300 ICONS.
datetime– 6 components about dates and times.
icons-300 + icon, support SVG and Fonts format.
select– Drop down to select six related components.
table– Highly interactive table components (I don’t think so).
timezone– Handles time zone related components.
popover– Powerful popup component, based onPopper.js 。
tooltip– bypopoverTo provide.
contextMenu2– bypopoverTo provide.

# installation
$ yarn add @blueprintjs/core 
# use datetime
$ yarn add @blueprintjs/datetime
Copy the code

Blueprint supports Chrome, Firefox, Safari, IE 11, and Microsoft Edge.

Blueprint strictly adheres to Semver in its public API:

fromblueprint 的 root/mainModule export JS API;
The HTML structure of the component;
Render component CSS styles;

An alternative to

Material UI – Google’s Material Design style, customization is relatively difficult.
Semantic UI – Very readable and understandable code, close to the bootstrap style.
React Bootstrap – Bootstrap component built with React.

5. Form processing

Ninety percent of Web applications are in this situation – processing form input is a huge pain. But we have some good ideas.

import React from 'react' import { useForm } from 'react-hook-form' export default function HookForm() { const { register, handleSubmit, watch, formState: { errors }, } = useForm() const onSubmit = (data) => console.log(data) Return (// handleSubmit validates user input before calling onSubmit <form onSubmit={handleSubmit(onSubmit)}> {/* Register input to hook */} <input defaultValue="test" {... Register ('username')} /> {/* Register is used to configure authentication rules */} <input {... register('password', { required: True})} /> {/* The validation rule is invalid, } {errors.exampleRequired && <span>This field is required</span>} <input type="submit" /> </form>)}Copy the code

An alternative to

There are some great options in this area.

Formik – FormIK provides a time-tested solution for input validation, formatting, masking, arrays, and error handling.
Redux-form – Not recommended, it can really hurt performance.

6. The HTTP calls

In the modern world, almost all web sites rely on some external data source, so making HTTP calls is straightforward.

An alternative to

Fetch – Browser native API, distinct from XHR.

Fetch is a good solution for small projects where only a few simple API calls are required.

// fetch
fetch(url)
  .then((response) = > response.json())
  .then((data) = > console.log(data))
  .catch((error) = > console.log(error))
Copy the code

Style of 7.

You will need styles, of course, and there are several ways to style your application.

An alternative to

But, as I said, there are other great options!

Cascading Style Sheets (CSS) – W3C standard, should be fine for smaller projects.
Sas-css preprocessing, which provides great functionality for managing CSS, is suitable for medium-sized and even larger projects.
styled-jsx- andstyled-compomnentsA library with very similar functions.
Radium – CSS in JS implementation.
An implementation of react-JSS-CSS in JS.

8. The document

Good documentation can save 100 + hours in the future, so be proactive in adopting document libraries early in the project.

An alternative to

There are other options.

Js-docs – A general purpose document tool for JavaScript.
React – Docz – Very easy to use documentation guide, worth a try.

9. Multilingual support

If you’re building products on a global scale, you might want to add multilingual support to your React application.

An alternative to

There are other good options.

react-intl

It also supports other frameworks, such as VueJS and Angular.

Animated 10.

Animations bring your application to life. There are some good options for using animations in React.

.example {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-duration: 4s;
}

.example-animation {
  animation-name: example;
}

@keyframes example {
  0%   {background-color: red; }25%  {background-color: yellow; }50%  {background-color: blue; }100% {background-color: green;}
}
Copy the code

An alternative to

If you want something off the shelf. So here are some suggestions for you.

React – Motion – a cross-platform library written by Cheng Lou.

The library incorporates some physics and provides some more powerful apis for TransitionGroup of React (prior to V2).

React-spring – One of the official recommended libraries.

Animation library based on spring physics can basically meet most uI-related animation needs.

React-transition-group – One of the official recommended libraries.

A set of components for managing component state (including load and unload) over time, designed specifically for animation.

Framer-motion – Production ready animation, gesture library.

11. Long list rendering

Rendering a long list can seriously affect the performance of your application, in which case using libraries can be a good idea.

An alternative to

react-virtualized
React – Paginate – If you don’t need to scroll the list indefinitely, then you can paginate the data.

Code quality tools

Linters can see statically any errors in code, and it’s a good idea to use some kind of linter.

An alternative to

Jshint – Older library.
Tslint-typescript linter is not currently recommended.

13. The formatting

Having a consistent visual style is important for any application, and a code formatter can do the job for you!

inpackage.json, provideprettierField.
It could be a.prettierrcFile, written in JSON or YAML format.
It can also be.prettierrc.json..prettierrc.yml..prettierrc.yamlOr,.prettierrc.json5File.
You can also use.prettierrc.js,.prettierrc.cjs,prettier.config.js 或 prettier.config.cjsthroughmodule.exportsThe export.
a.prettierrc.tomlFile.

For example, by using the.prettierrc file:

{
  "trailingComma": "es5"."tabWidth": 4."semi": false."singleQuote": true
}
Copy the code

All files can then be formatted using command line commands.

$ npx prettier --write .
# or 
$ yarn prettier --write .
Copy the code

Prettier can also be integrated with an editor, as detailed.

Analysis of 14.

Data analytics is the future, and most businesses today are data-driven, so it’s important to have a good analytics tool for your applications!

15. The test

I don’t need to reiterate the importance of testing for any application. So read on!

// hidden-message.js
import * as React from 'react'

// NOTE: React Testing Library works well with React Hooks and classes.
// Your tests will be the same regardless of how you write your components.
function HiddenMessage({children}) {
  const [showMessage, setShowMessage] = React.useState(false)
  return (
    <div>
      <label htmlFor="toggle">Show Message</label>
      <input
        id="toggle"
        type="checkbox"
        onChange={e= > setShowMessage(e.target.checked)}
        checked={showMessage}
      />
      {showMessage ? children : null}
    </div>)}export default HiddenMessage
Copy the code

// __tests__/hidden-message.js
import '@testing-library/jest-dom' // Jest-dom makes it easier to add assertions for tests. It is recommended, but not required
import * as React from 'react'
import {render, fireEvent, screen} from '@testing-library/react'
import HiddenMessage from '.. /hidden-message'

test('shows the children when the checkbox is checked'.() = > {
  const testMessage = 'Test Message'
  render(<HiddenMessage>{testMessage}</HiddenMessage>)
  // Query * returns the element, or null if it cannot be found
  // Get * returns the element, or throws an error if it cannot be found
         
  expect(screen.queryByText(testMessage)).toBeNull()
  // Queries can accept regular expressions, making selectors more flexible to content adjustments and changes
  fireEvent.click(screen.getByLabelText(/show/i))

  //.tobeintheDocument () is a jest-dom assertion
  You can also use.tobedefined ()
  expect(screen.getByText(testMessage)).toBeInTheDocument()
})
Copy the code

Jest – the most popular JS testing framework.

Jest is Facebook’s oldest testing framework and the default test library for Create-React-app.

The functions of Jest and React Testing Library are different. The React Testing Library works with React and Jest works with test cases.

Jest gives us the ability to run tests, but there’s also an array of apis like Test Suites, Test Cases, assertions, and not only that, but spies, Mocks, Stubs, and more.

If the React program is created using CRA, you only need to install the React-test-renderer to render the snapshot. Snapshot testing is part of Jest. You can use the test renderer to quickly render the serializable HTML output of the virtual DOM, rather than rendering the UI of the entire application.

$ yarn add react-test-renderer --dev
Copy the code

An alternative to

cypress

Cypress is often compared to Selenium; However, Cypress is fundamentally and architecturally different. Cypress is not subject to the same restrictions as Selenium.

It can do end-to-end testing, unit testing, integration testing, you can test anything that runs in the browser.

# installation
$ npm install cypress --save-dev
# or
$ yarn add cypress --dev
Copy the code

16. Build shareable components

If you’re on a large team, the ease with which components can be shared can be a big problem.

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.

# installation storybook
$ npx sb init
Copy the code

Storybook needs to be installed in projects that have already been framed; it is not suitable for empty projects. There are many ways to bootstrap an application within a given framework, including:

📦 Create an Angular Workspace
📦 Create the React App
📦 Vue CLI
📦 Ember CLI
Other build tools (e.g. Vite, etc.).

Finally, I think you now have a good idea of when to choose which library, so if you have any different ideas, let me know in the comments.

This paper is inspired by 45-NPM-packs-to-solve-16-react-problems.

56 NPM packages solve 16 React problems

1. Global status management

recommended

An alternative to

2. Manage server status

recommended

An alternative to

3. The scaffolding

recommended

An alternative to

4. UI component library

recommended

An alternative to

5. Form processing

recommended

An alternative to

6. The HTTP calls

recommended

An alternative to

Style of 7.

recommended

An alternative to

8. The document

recommended

An alternative to

9. Multilingual support

recommended

An alternative to

Animated 10.

recommended

An alternative to

11. Long list rendering

recommended

An alternative to

Code quality tools

recommended

An alternative to

13. The formatting

recommended

Analysis of 14.

recommended

15. The test

recommended

An alternative to

16. Build shareable components

recommended

Related Posts

Elastic sliding on the moving end and VUE record the sliding position

[LeetCode274 problem H index] | punch brush

Implementation of shuffling algorithm