Hello, I’m ConardLi.

Today we talk about React. React has been popular in the front-end industry for a long time, and in that time it has developed a very comprehensive and powerful ecosystem. Dachang likes to choose React in large front-end projects, and its ecological contribution is indispensable.

In today’s article, we’ll take a look at the React ecosystem in terms of state management, style and animation, routing, and code style. We hope you’ll be able to help with technology selection in the future.

Create the React project

For most React beginners, how to configure a React project is often confusing when they are just learning React. There are many frameworks to choose from. Most of the React community would recommend Facebook’s Create-React-app (CRA). It has virtually no configuration and provides you with a simple way to start and run React applications right out of the box.

But for now, the tools CRA uses are outdated — and our development experience is slowing down. Vite is one of the most popular packaged libraries of late, with incredible speed of development and production, as well as templates such as React and React + TypeScript to choose from.

If you’re already familiar with React, you can use one of its most popular frameworks as an alternative: next.js and Gatsby. Both frameworks are built on React, so you should be familiar with at least the basics of React before using them. Another popular emerging framework in this space is Remix, which is definitely worth a try in 2022.

While Next. Js was originally used for server-side rendering, Gatsby. Js was mainly used for static site generation (such as static websites such as blogs and login pages). However, in the last few years, the two frameworks have been rolling over each other…

Next. Js allows you to generate static sites, while Gatsby. Js also supports server-side rendering. However, in my personal experience, I find Next. Js a little more useful.

If you just want to see how create-React-app works in the background, try configuring a React project yourself from scratch. Start with a simple HTML JavaScript project and add React and its supporting tools (such as Webpack, Babel) yourself. This isn’t something you have to do on a daily basis, but it’s a good way to see how the underlying tools work.

Advice:

  • Preferred to useVitecreateReactClient application
    • CRA alternative
  • Preferred to useNext.jscreateReactThe server side renders the application
    • Latest technology:Remix
    • Create only static site alternativesGatsby.js
  • Optional learning experience: Build your own from zeroReactApplications.

Links:

  • create-react-app:Github.com/facebook/cr…
  • Vite:github.com/vitejs/vite
  • Next.js:Github.com/vercel/next…
  • Gatsby.js:Github.com/gatsbyjs/ga…
  • Remix:Github.com/remix-run/r…

Reading:

  • React Basics
  • Understand why frameworks like React Matter
  • How to Create a Modern JavaScript Project
  • Gatsby vs. Next. Js vs. Remix
  • Evolution of runtime Optimization for the React Framework

State management

React comes with two built-in Hooks to manage local state: useState and useReducer. If global state management is required, you can add the useContext Hook built in React to transfer props from the top component to the bottom component to avoid the problem of transparent transmission of multiple layers. These three Hooks are enough to enable you to implement a powerful state management system.

If you find yourself using React Context too often to handle shared/global states, you should definitely check out Redux, the most popular state-management library right now. It allows you to manage your application’s global state, which can be read and modified by any React component connected to its global store.

If you happen to be using Redux, you should definitely check out the Redux Toolkit as well. It’s a great API based on Redux that greatly improves the developer experience with Redux.

As an alternative, if you like the idea of managing state with global storage but don’t like the way Redux handles it, look at other popular local state management solutions, such as Zusand, Jotai, XState, or Recoil.

Also, if you want to have the same development experience as vue.js, Mobx is recommended.

Advice:

  • withuseState/useReducerHandling shared State
  • Selective useuseContextManage some global state
  • withRedux(or another option) manage global state

Links:

  • Redux:redux.js.org/
  • Mobx:github.com/mobxjs/mobx
  • Zusand:Github.com/pmndrs/zust…
  • Jotai:Github.com/pmndrs/jota…
  • XState:Github.com/statelyai/x…
  • Recoil:Github.com/facebookexp…

Reading:

  • UseReducer, useState, and useContext User Guide
  • Mobx and Redux in the React System
  • Facebook React Status Management Library Recoil
  • Best Practices for Using Replay &Mobx

Remote data request

React’s built-in Hooks are great for UI state management, but when it comes to state management of remote data (including data retrieval), I recommend using a dedicated data retrieval library such as React Query, which comes with built-in state management capabilities. React Query handles all state management (caching, batch updates, etc.) for your remote data, although React Query itself is not positioned as a state management library. It is primarily used to fetch remote data from apis.

React Query was originally designed to use REST apis, but it now supports GraphQL as well. However, if you are looking for a dedicated GraphQL library for your React project, I still recommend looking at Apollo Client (currently the most popular), URQL (lightweight), or Relay (Facebook maintenance).

If you are already using Redux and want to add data request functionality that integrates state management into Redux, you are advised to look at RTK Query, which integrates data request functionality more subtly into Redux.

Advice:

  • React Query(REST API, GraphQL API)
  • Apollo Client(GraphQL API only)
  • Alternative learning experience: UnderstandReact QueryThe working principle of

Links:

  • React Query:react-query.tanstack.com/
  • Apollo Client:www.apollographql.com/docs/react/
  • urql:Formidable.com/open-source…
  • Relay:Github.com/facebook/re…
  • RTK Query:Redux-toolkit.js.org/rtk-query/o…

Reading:

  • React Query How it Works
  • Everything about the React State of Local and Remote Data

routing

If you use a React framework like next.js or Gatsby. Js, routing is already taken care of for you. However, if you use React without a framework and only use it for client rendering (such as CRA), the most powerful and popular routing library today is the React Router.

Links:

  • React Router:reactrouter.com/

Reading:

  • Introduction to React-Router Implementation

Style/CSS

There are many styles /CSS options and suggestions in React. As a beginner to React, you can use a style object with all CSS properties as a key/value pair for your HTML style properties, starting with inline styles and basic CSS.

const ConardLi = ({ title }) = >
  <h1 style={{ color: 'blue' }}>
    {title}
  </h1>
Copy the code

Inline styles can be added dynamically in React via JavaScript, while external CSS files can contain all remaining styles for the React application:

import './Headline.css';

const ConardLi = ({ title }) = >
  <h1 className="ConardLi" style={{ color: 'blue' }}>
    {title}
  </h1>
Copy the code

If your app is getting bigger, look at other options. First of all, I recommend CSS Modules as your first choice for many CSS-in-CSS solutions. CRA supports CSS modules and provides a way to encapsulate CSS into component-scoped modules. This way, it won’t accidentally leak into the styles of other React components. Some parts of your application can still share the style, but other parts don’t have to access it. In React, the CSS Module usually places CSS files in the React component file:

import styles from './style.module.css';

const ConardLi = ({ title }) = >
  <h1 className={styles.headline}>
    {title}
  </h1>
Copy the code

Second, I would like to recommend to you the so-called Styled Components, as one of the many CSS-in-JS solutions for React. It is implemented via a library called styles-Components (or some other library such as Emotion, Stitches), which places styles next to the React component:

import styled from 'styled-components';

const BlueHeadline = styled.h1` color: blue; `;

const ConardLi = ({ title }) = >
  <BlueHeadline>
    {title}
  </BlueHeadline>
Copy the code

Third, I would like to recommend Tailwind CSS as the most popular utility-first-CSS solution. It provides predefined CSS classes that you can use in the React component instead of defining yourself. This can improve some efficiency and be consistent with the design system of your React application, but it also needs to know all the classes:

const ConardLi = ({ title }) = >
  <h1 className="text-blue-700">
    {title}
  </h1>
Copy the code

It’s up to you to use CSS-in-CSS, CSS-in-JS, or functional CSS. All of these schemes work in large React applications. One final tip: If you want to apply a className conditionally in React, you can use a tool like CLSX.

Advice:

  • CSS-in-CSSSolution:CSS Modules
  • CSS-in-JSSolution:Styled Components(By far the most popular)
    • Optional:Emotion 或 Stitches
  • Functional CSS:Tailwind CSS
  • Alternative: Conditional rendering of CSS classes:clsx

Links:

  • styled-components:www.robinwieruch.de/react-style…
  • Tailwind CSS:tailwindcss.com/
  • clsx:github.com/lukeed/clsx

Reading:

  • Best Practices for CSS-IN-JS in React
  • CSS Styles in React
  • 10 Popular CSS Solutions today:
  • Css-in-js vs CSS
  • What DID I learn from the CSS 2021 Annual Report?

Component library

Building reusable components from scratch is a great learning experience for beginners and is recommended. Whether it’s dropdown, Radio Button, or Checkbox, you should eventually know how to create these UI component components.

At some point, however, you want to use a UI component library that gives you access to many pre-built components that share a design system. All of the following UI component libraries come with basic components such as Buttons, Dropdowns, Dialogs, and Lists:

  • Material UI(MUI) (most popular)material-ui.com/
  • Mantine(Most recommended) :mantine.dev/
  • Chakra UI(Most recommended) :chakra-ui.com/
  • Ant Design(Most popular in China) :ant.design/
  • Radix:www.radix-ui.com/
  • Primer:primer.style/react/
  • NextUI:nextui.org/
  • Tailwind UI(charged) :www.tailwindui.com/
  • Semantic UI:www.robinwieruch.de/react-seman…
  • React Bootstrap:react-bootstrap.github.io/

While all of these UI component libraries come with many internal components, they don’t make each component as powerful as a library that focuses on just one UI component. For example, the React-table-library provides a very powerful table component, as well as themes (such as Material UI) that work well with popular UI component libraries.

Reading:

  • Build the React Component Library from zero to one

The animation library

Most animations in Web applications start with CSS. Eventually you’ll find that CSS animations can’t meet all your needs. The React Transition Group is usually used by developers, so they can use the React component to perform animations. Other well-known animation libraries include:

  • Framer Motion(Most recommended) :www.framer.com/motion/
  • react-spring(Also recommended) :Github.com/react-sprin…
  • react-motion:Github.com/chenglou/re…
  • react-move:Github.com/sghall/reac…
  • AnimatedReact (Native) :Facebook. Making. IO/react – nativ…

Visual chart

If you really want to develop some charts yourself from scratch, there is no way around D3. This is a very low-level visualization library that gives you everything you need to develop some cool diagrams. However, learning D3 is difficult, so many developers simply opt for a React diagram library that encapsulates a lot of capabilities by default, but lacks some flexibility. Here are some popular solutions:

  • Recharts:recharts.org/
  • react-chartjs:Github.com/reactchartj…
  • nivo:nivo.rocks/
  • visx:github.com/airbnb/visx
  • Victory:Formidable.com/open-source…

The form

React Hook Form The most popular Form library is React Hook Form. It provides everything from validation (typically integrated with YUP and ZOD) to submission to form state management. Another way that was popular was Formik. Both are good solutions. Another option in this area is React Final Forms. After all, if you’re already using the React UI component library, you can also check out their built-in forms solution.

Advice:

  • React Hook Form
    • integrationyup 或 zodForm validation
  • If you’re already using the component library, see if the built-in forms meet your requirements

Links:

  • React Hook Form:react-hook-form.com/
  • Formik:Github.com/jaredpalmer…
  • React Final Form:final-form.org/react

Reading:

  • React Open Source Form Component Best Practices: Principles and Design Analysis

Type checking

React comes with an internal type checking called PropTypes. By using PropTypes, you can define props for your React component. Whenever a prop of the wrong type is passed to a component, you can receive an error message at runtime:

import PropTypes from 'prop-types';

const List = ({ list }) = >
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>

List.propTypes = {
  list: PropTypes.array.isRequired,
};
Copy the code

PropTypes have become less popular over the last few years, PropTypes are no longer included in the React core library, and TypeScript is now the best choice:

type Item = {
  id: string;
  title: string;
};

type ListProps = {
  list: Item[];
};

const List: React.FC<ListProps> = ({ list }) = >
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>
Copy the code

Reading:

  • The TypeScript ultimate beginners guide: mp.weixin.qq.com/s/6DAyXFHIM…
  • How to Use TypeScript Gracefully in React

Code style.

There are basically two options for code style:

If you want a unified, common code style, use ESLint in your React projects. Linters like ESLint will enforce specific code styles in your React projects. For example, you can ask in ESLint to follow a popular style guide (such as the Airbnb Style Guide). After that, integrate ESLint with your IDE/ editor and it will point out every error you make.

If you want a uniform code format, use Prettier in your React project. It is a stubborn code formatter with few configurations to choose from. You can also integrate it into an editor or IDE to format your code automatically every time you save a file. Although Prettier does not replace ESLint, it integrates nicely with ESLint.

Advice:

  • ESLint:eslint.org/
  • Prettier:Github.com/prettier/pr…

Reading:

  • React Code Style Guide
  • Airbnb Style Guide

The identity authentication

In the React application, you might want to introduce authentication with features like register, log in, and log out. Other features are often required, such as password reset and password change capabilities. These capabilities go far beyond React and are typically managed by the server.

The best learning experience is to implement a server-side application (such as the GraphQL back end) with authentication yourself. However, because authentication has many security risks, and not everyone understands the details, I recommend using one of the many authentication solutions available:

  • Firebase:www.robinwieruch.de/complete-fi…
  • Auth0:auth0.com/
  • AWS Cognito:aws.amazon.com/cognito/

Reading:

  • React Router Authentication

test

The most common React testing scheme is still Jest, which basically provides everything you need for a comprehensive testing framework.

You can use the React test-renderer to render the React component in your Jest tests. This is enough to use Jest to perform so-called Snapshot Tests: once the test is run, a Snapshot of the DOM elements rendered in the React component is created. When you run the test again at a certain point, another snapshot is created that diff with the previous snapshot. If there is a discrepancy, Jest will warn you and you can either accept the snapshot or change the implementation of the component.

The React Testing Library (RTL) is also popular (used in Jest Testing environments), which provides more sophisticated Testing for React. RTL allows rendering components to simulate events on HTML elements, in conjunction with Jest assertions of DOM nodes.

If you’re looking for a testing tool for React end-to-end (E2E) testing, Cypress is the most popular choice right now.

Reading:

  • React Unit Testing Practices

The data structure

Vanilla JavaScript gives you plenty of built-in tools to manipulate data structures as if they were immutable. However, if you feel the need to enforce immutable data structures, one of the most popular options is Immer. I personally haven’t used it, because JavaScript itself can be used to manage immutable data structures, but if someone specifically asks about THE immutability of JS, someone would recommend it.

Links:

  • Immer:Github.com/immerjs/imm…

Reading:

  • Immer: How to Improve React Development efficiency

internationalization

When it comes to the React application’s internationalization i18N, you need to consider not only translation, but also the format of plural numbers, dates, and currencies, among other things. These are the most popular libraries dealing with internationalization:

  • FormatJS:Github.com/formatjs/fo…
  • react-i18next:Github.com/i18next/rea…

Rich text editor

React rich text editor:

  • Draft.js:draftjs.org/
  • Slate.js:www.slatejs.org/
  • ReactQuill:Github.com/zenoamaro/r…

Time to deal with

In recent years, JavaScript itself has done a lot of refinement and effort to handle dates and times, so there is generally no need to use a special library to handle them. However, if your React app has a lot to do with dates, times, and time zones, you can introduce a library to manage these things for you:

  • date-fns:Github.com/date-fns/da…
  • Day.js:Github.com/iamkun/dayj…
  • Luxon:Github.com/moment/luxo…

The client

Electron is now the preferred framework for cross-platform desktop applications. However, there are alternatives:

  • Tauri: (current latest)Github.com/tauri-apps/…
  • NW.js:nwjs.io/
  • Neutralino.js:Github.com/neutralinoj…

Reading:

  • Drop Electron, Embrace Tauri based on Rust: juejin.cn/post/706734…

The mobile terminal

The preferred solution for bringing React from the Web to mobile devices remains React Native.

Reading:

  • The new architecture React Native: segmentfault.com/a/119000004…

VR/AR

React also allows us to delve into virtual or augmented reality. To be honest, I haven’t used any of these libraries yet, but they are the AR/VR libraries I’m familiar with from React:

  • react-three-fiber: (The most popular 3D library, which also has VR implementation)Github.com/pmndrs/reac…
  • ` react – 360: facebook. Making. IO / / react – 360
  • aframe-react:Github.com/supermedium…

The prototype design

If you’re a UI/UX designer, you might want to use a tool to quickly prototype new React components, layouts, or UI/UX concepts. I used Sketch, but now I use Figma. Although I like both, I prefer Figma. Zeplin is another option. For some simple sketches I like to use Excalidraw. If you’re looking for interactive UI/UX design, take a look at InVision.

  • Sketch:www.sketch.com/
  • Figma:www.figma.com/
  • Zeplin:zeplin.io/
  • Excalidraw:excalidraw.com/
  • InVision:www.invisionapp.com/

The document

I use Storybook as a documentation tool in many projects, but there are some other good ones:

  • Docusaurus:Github.com/facebook/do…
  • Docz:github.com/doczjs/docz
  • Styleguidist:Github.com/styleguidis…

The last

Reference: www.robinwieruch.de/react-libra…

At the end of this article, you are welcome to add.

If you want to join the high quality front-end communication group, or you have any other things you want to communicate with me can also add my personal wechat ConardLi.

If you have any thoughts, let me know in the comments section, and if this article has helped you, please like and follow me. Your likes and attention are the biggest support for me!