Make writing a habit together! This is the second day of my participation in the “Gold Digging Day New Plan · April More text challenge”. Click here for more details.

React has been around for a while. Since then, a comprehensive and robust library ecosystem has developed around component-driven libraries. Developers from other programming languages or libraries/frameworks often have a hard time keeping track of all the libraries that create Web applications using React.

Essentially, React enables users to create component-driven user interfaces using functional components. However, it comes with several built-in solutions, such as React Hooks for local state, side effects, and performance tuning. But after all, you’re only dealing with functions (components and hooks) here to create the UI.

The following articles will provide you with guidance on how to choose libraries to build React applications.

directory

  • How to create a React project
  • React Status Management
  • React Data Acquisition
  • Use the React the Router
  • CSS styles in React
  • The React UI library
  • The React animation library
  • Visualize and chart libraries in React
  • React forms library
  • React Type Check
  • React code structure: Style and format
  • The React to verify
  • The React hosting
  • Tests in React
  • React and immutable data structures
  • Internationalization of the React
  • React rich text editor
  • React payments
  • Time in React
  • React Desktop application
  • Use React for mobile development
  • React VR/AR
  • React prototype
  • React Component documentation

How to create a React project

For every React beginner, how to set up a React project when you join React is unknown. There are many frameworks to choose from. The current state of the React community is Facebook’s Create-React App (CRA). It has zero configuration and gives you a minimalist, out-of-the-box React application. All tools are hidden from you, but you can change tools (such as Eject or Craco) later.

Read on: Learn why frameworks like React matter

However, CRA is now built on outdated tools — which leads to a slower development experience. Vite is one of the most popular new products out there. It’s incredibly fast to develop and produce, and there are a lot of templates to choose from (React, React + TypeScript).

If you’re already familiar with React, you can choose one of its most popular (meta) frameworks as an alternative: next.js and Gatsby. Both frameworks are built on React, so you should already be familiar with the basics of React. Another popular but newer framework in this space is Remix, which is definitely worth a try in 2022.

Read on: Learn more about Websites and Web applications

While Next. Js was originally used for server-side rendering (e.g. dynamic Web applications), Gatsby. Js was primarily used for static sites (e.g. static websites such as blogs and landing pages). However, for the past few years, the lines between the two frameworks have been blurred, as Next. Js allows you to opt in to static sites while Gatsby allows you to opt in to server-side rendering. At this stage, I would say that Next. Js is winning the battle of popularity for most use cases.

Read on: How to Create a modern JavaScript project

If you just want to see how a tool like create-React-app works at the bottom, try creating a React project yourself from scratch. You’ll start with a simple HTML JavaScript project and add React and its supporting tools (such as Webpack, Babel) yourself. It’s not something you have to deal with on a daily basis, but it’s a great learning experience for understanding the underlying tools.

Advice:

  • Vite is used for client React applications
    • CRA alternative
  • Next. Js is primarily used for server-side rendering of the React application
    • Cutting-edge technology: Remix
    • Gatsby is used as a static generator alternative
  • Optional learning experience: Create the React project from scratch

React Status Management

React comes with two built-in hooks to manage local state :useState and useReducer. If state needs to be managed globally, you can use the useContext Hook built into React to pass items from the top component to the bottom component without using them, avoiding the problems with props Drilling.

Read on: Learn when to use useState and useReducer

All three React hooks allow developers to implement powerful state management in React. These state management functions can be placed in components using the React useState/useReducer hooks or combined with the React useContext hooks for global management.

Continue reading: Learn how to combine useState/useReducer and useContext

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. 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.

Read on: Learn Redux

If you happen to use Redux, you should definitely check out the Redux Toolkit as well. It’s a great API on top of the core of Redux and greatly improves the developer experience with Redux.

As an alternative, if you like the overall concept of a global store but don’t like the way Redux handles it, check out other popular local state management solutions, such as Zustand, Jotai, XState, or Recoil.

Advice:

  • UseState /useReducer is used for coexistence or sharing
  • Choose to enable it using useContextSome of theGlobal state
    • Optional learning experience: Learn how to combine useState/useReducer and useContext
  • Redux(or another option) is used for many global states

React Data Acquisition

React’s built-in hooks are great for UI state, but when it comes to state management (and therefore data retrieval) of remote data, I recommend using a dedicated data retrieval library, such as React Query, which comes with built-in state management capabilities. React Query is not considered a state management library per se, as it is primarily used to fetch your remote data from the API, but it handles all state management for that remote data for you (e.g. caching, optimistic updates).

Read on: How does React Query work

React Query is designed to use REST apis. However, it now supports GraphQL as well. But if you’re looking for a dedicated GraphQL library for your React front end, there’s Apollo Client(popular), URQL (lightweight), or Relay (Facebook).

Read on: Everything there is to know about local and remote data states in React

If you’re already using Redux and want to add data retrieval capabilities with integrated state management to Redux instead of Adding React Query, you might want to look at RTK Query, which neatly integrates data retrieval into Redux.

Advice:

  • React Query (REST APIs, GraphQL APIs)
    • Use AXIos as the fetch library
  • Apollo Client (GraphQL APIs)
  • Optional learning experience: Learn how React Query works

Use the React the Router

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

Read on: Learn to use the React Router

Before introducing routers in your React project, you can try out React conditional rendering when you’re about to learn React. It is not a substitute for routing, but in small applications it is common to swap components this way.

Advice:

  • React Router
    • Optional learning experience: Learn to use the React Router

CSS styles in React

React has lots of options for styles /CSS and even more advice, so putting everything in one section isn’t enough. If you want to dig deeper into this topic and see all the options, check out the following guide.

Read on: React CSS styles

But let’s start with an overview. As a React beginner, you can start using inline styles and basic CSS by using a style object with all CSS properties as a key/value pair for HTML style properties.

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

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

import './Headline.css';

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

Once your application grows, there are many other styles to choose from. First, I recommend that you look at CSS modules as one of many 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. While some parts of your application can still share the style, others 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 Headline = ({ title }) = >
  <h1 className={styles.headline}>
    {title}
  </h1>
Copy the code

Second, I’d like to recommend the so-called style component to you as one of the many CSS-in-JS solutions for React. This method is implemented via a library called styles-Components (or another option, such as emotion or), which places styles and JavaScript next to the React component’s JavaScript file or coexistence file:

import styled from 'styled-components';

const BlueHeadline = styled.h1` color: blue; `;
const Headline = ({ 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 them yourself. This makes you more efficient as a developer and makes your React application design system more consistent, but it also needs to know all the classes:

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

It’s up to you to choose csS-in-CSS, CSS-in-JS, or functional CSS. All policies apply to larger React applications. One final tip: If you want to apply a className conditionally in React, use a tool like CLSX.

Advice:

  • CSS – in – the CSS with CSS Modules
  • Styles-components for CSS-in-JS (most popular)
    • Alternative: Emotion or Stitches
  • Functional CSS uses Tailwind CSS
  • Optional: Optionally use CLSX to apply a className conditionally

The React UI library

Building reusable components from scratch is a great learning experience for beginners and is recommended. Whether it’s a drop-down menu, a radio button, or a check box, you should eventually know how to create these UI components.

At some point, however, you’ll want to use a UI library that gives you access to many pre-built components that share the same design system. All of the following UI libraries have basic components such as buttons, drop-down menus, dialogs, and lists:

  • Material UI (MUI) (most popular)
  • Mantine (most recommended)
  • Chakra UI (most recommended)
  • Ant Design
  • Radix
  • Primer
  • NextUI
  • Tailwind UI (not free)
  • Semantic UI
  • React Bootstrap

While all of these UI 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 allows you to create powerful table components in React, while also providing themes (such as Material UI) that fit nicely into popular UI component libraries.

The React animation library

Any animation in a Web application starts with CSS. Eventually you’ll find that CSS animations don’t meet your needs. Often developers will choose the React Transition Group so that they can perform animations using the React component. React’s other well-known animation libraries are:

  • Framer Motion (Best recommendation)
  • React-spring (also often recommended)
  • react-motion
  • react-move
  • Animated (React Native)

Visualize and chart libraries in React

If you really want to create your own charts from scratch, there is no way around D3. This is a low-level visualization library that gives you everything you need to create amazing charts. However, learning D3 is a completely different venture, so many developers simply opt for a React chart library that does everything for them in exchange for flexibility. Here are some popular solutions:

  • Recharts
  • react-chartjs
  • nivo
  • visx
  • Victory

React forms library

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

Advice:

  • React Hook Form
    • Use yUP or ZOD integration for validation
  • If you use the UI library, check that the built-in forms support all requirements

React Type Check

React comes with an internal type checking called PropTypes. By using PropTypes, you can define prop for React components. When a prop of the wrong type is passed to the component, you get an error message when running the application:

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

However, PropTypes are no longer included in the React core library. PropTypes have become less popular in the past few years, replaced by TypeScript:

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

If you really want to embrace types in React, TypeScript is the place to be right now.

Advice:

  • If you need typed JavaScript, use TypeScript

React code structure: Style and format

Essentially, there are two ways to follow common sense code structure:

If you want a unified, common code style, use ESLint in your React projects. Detections like ESLint 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.

Read on: React file/folder structure

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

Advice:

  • ESLint + Prettier

The React to verify

In the React application, you might want to introduce authentication with features such as registration, login, and exit. Other features, such as password reset and password change features, are often required as well. These features go far beyond React, because the background application manages these things for you.

Continue reading: How to Prepare React Router Authentication

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

  • Firebase
  • Auth0
  • AWS Cognito

Advice:

  • Select an authentication service or BaaS(such as Firebase)
  • Optional learning experience: Customize the back end

The React hosting

You can deploy and host the React application just like any other Web application. If you want total control, opt for something like Digital Ocean. Cloudflare Workers, Netlify, or Vercel(especially for next.js) are popular solutions if you want to find someone to handle everything. If you are already using a third-party backend service like Firebase, you can check if they also offer hosting services (e.g. Firebase Hosting).

Tests in React

If you want to learn more about testing in React, read this article: How to Test Components in React. Here’s an important point: The backbone of testing a React application is Jest. It provides test runners, assertion libraries, and monitoring/impersonation/stub capabilities. Everything needed for a comprehensive testing framework.

At a minimum, you can render the React component in Jest tests using the React-test-renderer. This is enough to perform so-called Snapshot Tests with Jest. Snapshot Tests work as follows: Once the Tests are run, a Snapshot of the DOM elements rendered in the React component is created. When you run the tests again at a certain point, another snapshot is created that will be used as the difference from the previous snapshot. If the difference is not the same, Jest will complain, and you must either accept the snapshot or change the implementation of the component.

Eventually, you’ll find yourself using the popular React test library (RTL) — which is used in the Jest test environment — to create a more complex test library for React. RTL makes it possible to render components and simulate events on HTML elements. Jest is then used for assertions on DOM nodes.

If you’re looking for a test tool for React end-to-end (E2E) testing, Cypress is the most popular choice. But another, growing in popularity, is the offender.

Advice:

  • Unit/Integration: Jest + React Testing Library
  • Snapshot Tests: Jest
  • E2E Tests: Cypress

React and immutable data structures

Vanilla JavaScript gives you plenty of built-in tools to work with data structures as if they were immutable. However, if you and your team feel the need to implement immutable data structures, one of the most popular options is Immer. I personally don’t use it because JavaScript can be used to manage immutable data structures, but it’s recommended any time someone asks about THE immutability of JS.

Internationalization of the React

When it comes to the React application’s internationalization i18N, you need to consider not only translation, but also diversification, date and currency formats, among other things. Here are the most commonly used libraries to handle it:

  • FormatJS
  • react-i18next

React rich text editor

When it comes to rich text editors in React, I can only think of the following because I haven’t used any other editors in React:

  • Draft.js
  • Slate.js
  • ReactQuill

React payments

As with other web apps, the most common payment providers are Stripe and PayPal. Both can be neatly integrated into React. This is Stripe Checkout integrated with React.

  • PayPal
  • React Stripe Elements or Stripe Checkout

Time in React

JavaScript itself has done a great job of handling dates and times in recent years. Therefore, you don’t really need to use libraries to process them. However, if your React app needs to handle a lot of dates, times, and time zones, you can introduce a library to manage these things for you. Here are your options:

  • date-fns
  • Day.js
  • Luxon

React Desktop application

Electron is a framework for cross-platform desktop applications. However, there are other options, such as:

  • Tauri (fairly new)
  • NW.js
  • Neutralino.js

Use React for mobile development

The solution to bring React from the web to mobile is still React Native. If you want to help a framework create React Native applications, check out Expo.

Read on: Learn React Native

React VR/AR

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

  • React-three-fiber (popular 3D library, I’ve seen VR examples too)
  • react-360
  • aframe-react

React prototype

If you have a UI/UX background, you may want to use a tool to quickly prototype React components, layouts, or UI/UX concepts. I used to use Sketch but later switched to Figma. Although I like both, I don’t regret using Figma now. Zeplin is another option. For rough and lightweight sketches I like to use Excalidraw. If you are looking for interactive UI/UX design, check out InVision.

React Component documentation

If you’re responsible for documenting components, there are various React documentation tools. I’ve used Storybook for many projects, and I can only recommend it, but I’ve heard the benefits of other solutions:

  • Docusaurus
  • Docz
  • Styleguidist

After all, the React ecosystem can be thought of as a framework for React, but its core is still the flexibility of React. It’s a flexible framework that allows you to make decisions about which libraries you want to add based on what you know. You can start small and only add libraries to solve specific problems. Conversely, if you only need React, you can use this library to stay lightweight.

conclusion

This article was translated from:

React Libraries for 2022

That’s all for this article. If you have any questions, please point out 🌹