The original translated from: https://www.robinwieruch.de/react-libraries, author: ROBIN WIERUCH.

If the translation is not accurate, please correct it!

The React framework has been around for a while now, and it has evolved into a very comprehensive ecosystem around component-driven libraries. But for developers who have been using other programming languages or frameworks for a long time, it’s not easy to fully understand the React building blocks and use the framework for Web application development.

When using the Angular framework, programmers are used to mastering all the necessary functionality, but React does not require them to do so. Supplementary libraries have more scope. React is good or bad for programmers, depending on how you use it and how you think about it. But for me, when I switched frameworks to React, I found this to be a huge convenience.

First, React only allows developers to build user interfaces using feature components and items, and the user interface is component-driven. On the plus side, React comes with some built-in solutions. ReactHooks for local state and side effects, for example, don’t worry about working only in local state because you won’t need them anywhere else.

With such a large complement, it became a challenge to choose materials to build React applications. But don’t worry, this article will bring you some informed advice for your reference, or you can leave a comment below.

01

How to Get started React

• One of the first puzzles for anyone new to the React framework is how to create a React project once you get into React. React provides many projects for beginners to solve this problem. Each project meets different needs of users, and users can choose according to their own needs. The React community is currently equipped with Facebook’s CRA, which comes with zero configuration Settings that allow users to start and run the React application in a minimal way. In addition, because all the tools are hidden in the interface, users can drag and drop some functions into the interface according to their own needs.
• If you’re already familiar with React, feel free to choose one of the two popular toolkits, next.js and Gatsby. Both frameworks are built on React. Next. Js is used for server-side rendering (e.g. dynamic Web applications) while Gatsby. React basics are required.
• If you just want to understand how these starter kits work, you can try setting up the React project to start. But first you’ll start with JavaScript and HTML, and then add React with support tools.
• If you choose a custom sample project, you should not expect the project to solve all problems and meet all needs. Instead, you should minimize the size of the sample so that the project can be tailored to the main problems. For example, the “only” in the gatsby- Firebase-authentication template only provides the complete authentication mechanism of Firebase in the gatsby. Js application, and basically ignores other problems.

Advice:

1. Create-react-app is created for react beginners/advanced users

2.Gatsby. Js is used for static websites in React

3. Next. Js in React is used on the server

4. Learn about the underlying tools by customizing the React project

02

React Status Management

React comes with hooks for managing local state, such as useState, useReducer, useContext. These hooks can be used for complex local state management in React. Not only that, but you can also use them to simulate Redux, the popular state management library in React.

Also all the built-in hooks in React are great for local state management. There are a few suggestions for using ApolloClient if the remote data has a GraphQL endpoint for state management, while Apollo client alternatives recommend URQL and Relay.

If the remote data is not coming from the GraphQL endpoint, try to manage it using the React Hooks. If the problem cannot be solved, a solution such as Redux or MobX/ MobX state tree can be used. If none of this is enough for you, check out the React tutorial for the section on Overall State Management.

Advice:

1. Use the React useState, useReducer, and useContextHooks built-in hooks to manage the system locally

2. Remote state of GraphQL can be managed using Apollo client

3. Remote states can be managed using ReactHooks or Redux/ MobX/MobX state trees using REST.

03

Troubleshoot routing problems with ReactRouter

Routing plays an important role in React applications because React helps implement single-page applications that require routing to maintain the client. But React has only a handful of routing solutions when introducing complex routers, with the most anticipated solution being ReactRouter.

When you’re getting started with React and happen to be referring to a slightly clunky route in your application, you might consider trying React conditional rendering. It’s not a reasonable alternative to routing, but swapping components this way is usually sufficient in small applications.

Advice:

Use the ReactRouter solution

04

The React – style library

React styles vary and people have different opinions about how to use React. For starters to React, inline styles and CSS are a good place to start:

When adding styles dynamically or programmatically with JavaScript in React, consider using inline styles and external CSS files that will preserve the rest of the styles in your React application. Also, as your application grows, there are more styles to choose from.

First, we recommend that you examine CSS modules as one of many CSS-in-CSS solutions. The CSS module is supported by create-React-app and provides users with a way to encapsulate CSS into the module. This way, it doesn’t accidentally leak into the styles of other React components. While some parts of a user’s application can still share the style, others do not have access to it. In React, CSS modules are usually CSS files that are placed together in the user’s React component file.

Second, we recommend styling components, one of many CSS-in-JS solutions in React. The style component is called because this method is provided through a library called the Style component, which places styles alongside JavaScript in the React component:

Finally, TailwindCSS is recommended as a functional CSS solution:

Whether you use CSS-in-CSS,CSS-in-JS, or functional CSS is up to you, but either solution can be extended in larger React applications.

Advice:

Css-in-css and CSS modules

Css-in-js with styled components

Functional CSS with TailwindCSS

05

The React – UI library

When you don’t want to build all the necessary ReactUI components from scratch, you can choose a ReactUI library to do the job. They all come with basic components such as buttons, drop-down menus, dialogs, and lists.

The ReactUI library is not unique and there are many options:

AntDesign

ChakraUI

TailwindUI

SemanticUI

MaterialUI

ReactBootstrap

06

React — Animation effect

Any animation in a Web application starts with CSS, but eventually you’ll find that CSS animation isn’t enough. At this point, developers use the ReactTransition Group, which allows them to perform animations using the React component.

React’s other well-known animation libraries are:

react-motion

react-spring

FramerMotion

Animated (ReactNative)

Advice:

ReactTransition Group

07

React – Visualizations and charts library

If you really want to build your own chart from scratch, you can’t get around D3. This is a low-level visualization library that gives you everything you need to create amazing charts. Instead of learning the detours of D3, the developers chose the React chart library, which provides a lot of convenience and efficiency. Here are some popular solutions:

Nivo

Victory

react-vis

Recharts

ChartParts

08

The React – form library

The most popular form library in React is Formik. It contains everything from validation to submission to form state management. There is also an alternative: the ReactHook Form. Both of these are effective solutions for the React app when you’re doing more complex forms processing.

Advice:

Formik

ReactHook Form

09

React – Data read library

Later, you might be faced with making requests to remote apis to get data in React. Modern browsers ship with native fetch apis to perform asynchronous data requests, and you basically don’t have to add any other libraries to do the job.

There are, of course, libraries that exist only to provide complex asynchronous requests. These libraries are powerful, but still suitable for small (lightweight) applications. As your application grows in size, you can use one of these libraries, called Axios, instead of the native fetch API.

Of course, if you prefer to use the GraphQLAPI, you can also use ApolloClient. The alternative GraphQL client can be urQL or Relay.

Advice:

thebrowser’s native fetch API

axios

ApolloClient

10

The React – check

Luckily, React comes with its own checking function, PropTypes, which allows you to define props passed in the React component. When the program runs, if there are any incorrect style input components, the user will be notified of the incorrect input. But this type of style checking is also limited in size and can only be used for small applications.

Therefore, in a large React application, we can choose TypeScript over PropTypes for checking because TypeScript adds a layer of style security to the entire application. Typescript can report errors during development, as opposed to PropTypes, which find errors at run time. Developers don’t have to run programs to check for bugs that prevent style checking. Checking in this way may improve the user experience and prevent developers from introducing bugs in the first place.

Advice:

TypeScript

11

React — Code style

Follow the consensus when choosing a code style. Here are three suggestions for choosing a code style:

One: follow the community-accepted style guidelines. The React Style Guide, which is open sourced by Airbnb, is one of the most popular communities recently. Even if you don’t deliberately follow this style guide, you should read it to get the gist of common code styles in React.

Second: use small programs such as ESLint. The style guide will only give you suggestions, but this little program can help you apply them to your application. For example, you can ask to follow the popular Airbnb style guide when programming, and the IDE/ editor will naturally point out any errors in the actual operation.

The third method is the most popular: use Prettier, a code formatter. You can integrate it into an editor or IDE for code formatting when saving files. It may not be formatted to your taste, but at least you don’t have to worry too much about the style of your code or that of your team’s code base. While Prettier cannot replace ESLint, the two can be integrated.

Advice:

ESLint

Prettier

12

The React – certification

In the larger React application, you might want to introduce authentication with registration, login, and logout functions. In addition, password reset and password change capabilities are often required. These functions are outside the React scope, and you can rely on backend applications to handle these things.

The common approach is to implement your own custom back-end applications using custom authentication, and if you don’t want to use your own authentication, consider using something like Passport.js.

But if you don’t think about the back end, there are three options:

Firebase

Auth0

AWSCognito

If you’re looking for an all-in-one solution that combines authentication with a database, stick with Firebase or AWS.

Advice:

DIY:Custom Backend

Getit off the shelf: Firebase

13

The React – managed

You can deploy and host the React application just like any other Web application. But for full control, you can choose “DigitalOcean”. If you want something else to take care of everything, Netlify is a solution.

In addition, if you are already using third-party authentication or a database (such as Firebase), check if they also offer hosting (such as Firebase hosting), and you can use S3’s static site hosting with Cloudfront.

14

The React – test

To learn more about testing in React, you can start by learning how to test components in React. The first thing to understand about testing the React application is the Jest backbone. It has assertion libraries, charts, mocking, stubbing, and everything you need for a comprehensive testing framework.

At the very least, you can render the React component in Jest tests using the React-test-renderer, which is enough to perform what’s called a “snapshot test with Jest.”

The snapshot test works as follows: After running the test, a snapshot of the rendered DOM elements in the React component is created. When you run the test again at a certain point in time, another snapshot is created to compare the differences with the previous snapshot. If the difference is not the same, Jest will send a message, at which point you must either accept the snapshot or change the implementation of the component.

Eventually, you’ll find yourself using the Enzyme or ReactTesting Library (both of which are also used in the Jest test environment) to get a more detailed set of test functions. Both libraries can render components and simulate events on HTML elements. Jest can then be used for assertions on DOM nodes.

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

Advice:

Unit/Integration/SnapshotTests: Jest + React Testing Library

E2ETests: Cypress

15

React – Utility library

JavaScript provides many built-in functions for handling arrays, objects, numbers, objects, and strings. One of the most commonly used JavaScript built-in features in React is the built-in Map () array. This is because you must always present a list of items in the component. Because JSX is a hybrid of HTML and JavaScript, you can use JavaScript to map an array and return JSX. React makes it easy to create list components:

However, you may have to choose a utility library that gives you more detailed functionality. Because you might want to be a little more flexible when linking these utility functions and even combining them dynamically with each other, this is the perfect time to introduce the utility libraries Lodash or Ramda.

Lodash is the most solid library for every JavaScript developer, while Ramda displays a powerful kernel when functional programming comes into play, both of which stand out. Unfortunately, while JavaScript offers a lot of off-the-shelf functionality, there’s actually less need to use utility libraries these days.

Advice:

JavaScript

Lodash

16

React and immutable data structures

Native JS provides a number of built-in tools to manipulate data structures and make them immutable. However, if you and your team need to implement immutable data structures, this is the tool of choice. Immer can also be used in conjunction with Redux or Reacthooks. Although I personally don’t use it, this tool is always mentioned when it comes to JS immutability and has some value.

17

Internationalization of the React –

When it comes to internationalization of React applications (called I18N because there are 18 letters between the letters I and N), you need to consider not only translation but also diversification, Date and currency formats and other things. Here are the most popular libraries to deal with these issues:

react-i18next

react-intl

LinguiJS

FBT

Advice:

react-i18next

18

React – Rich text editor

Here are two rich text editors I’ve used in React:

Draft.js

Slate

19

React — Payment method

As in any other Web application, the most common payment methods are Stripe and PayPal. Both can be neatly integrated into React and become effective payment methods under React integration:

PayPal

StripeElements or StripeCheckout

20

The React time –

If your React app needs to handle a lot of dates and time zones, you can choose to introduce a library to help, and the most popular library is moment.js. Or a lighter alternative, date-fns and day.js.

21

React — Desktop application

Electron is the preferred framework for cross-platform desktop applications, but you also have other options, such as:

NW.js

Neutralino.js

22

React for mobile development

My guess is that ReactNative is still the preferred solution for bringing React from the PC to mobile devices. If you are a ReactNative developer building Web applications, you should validate the ReactNative Web.

23

The React – VR/AR

React is maneuverable for diving into virtual or augmented reality. When it comes to React AR/ VR, here are a few libraries that come to mind. I haven’t used them yet, but you can try them out if you need them:

React360

react-viro

react-native-arkit

24

Write documents with React

If you’re writing documentation for your software or UI libraries or anything else, here are a few recommended React documentation tools, such as Storybook, which I’ve used to great effect, and:

Styleguidist

docz

Docusaurus

The last thing I want to conclude with is that the React ecosystem can be viewed as a framework for React, but still has some flexibility. This flexibility is reflected in:

You can add as many libraries to the framework as you want. You can also start small and just add libraries that solve your feature problems. You can also expand your building blocks as your application scales.

On the other hand, you can use plain React to stay lightweight. Finally, we list some libraries that complement React, the core application, for projects of different sizes. At the same time, we also very much hope to receive your feedback, welcome you to leave a comment.

Small applications:

Boilerplate:create-react-app

StylingLibraries: basic CSS and inline style

AsynchronousRequests: fetch or axios

CodeStyle: none

TypeChecking: none

StateManagement: React Hooks

Routing:none or React Router

Authentication:Firebase

Database:Firebase

UILibraries: none

FormLibraries: none

TestingLibraries: Jest

UtilityLibraries: JavaScript

Internationalizing:react-i18next

ReactDesktop: Electron

MediumApplication

Boilerplate:Next.js or Gatsby.js

StylingLibraries: CSS Modules or Styled Components

AsynchronousRequests: fetch or axios

CodeStyle: Prettier, ESLint

TypeChecking: none or TypeScript

StateManagement: React Hooks and/or Apollo

Routing:React Router

Authentication:Firebase

Database:Firebase

UILibraries: none or UI component library

FormLibraries: none or Formik or React Hook Form

TestingLibraries: Jest with React Testing Library

UtilityLibraries: JavaScript

Internationalizing:react-i18next

ReactDesktop: Electron

Large applications:

Boilerplate:Next.js, Gatsby.js, custom setup

StylingLibraries: CSS Modules or Styled Components

AsynchronousRequests: axios or Apollo Client

CodeStyle: Prettier, ESLint

TypeChecking: TypeScript

StateManagement: React Hooks and/or Apollo/Redux/MobX

Routing:React Router

Authentication:Solution with own Node.js Server + Passport.js

Database:Solution with own Node.js Server with a SQL/NoSQL DB

UILibraries: UI component library or roll your own UI components

FormLibraries: none or Formik or React Hook Form

TestingLibraries: Jest with React Testing Library and Cypress

UtilityLibraries: JavaScript Platform APIs, Lodash

Internationalizing:react-i18next

ReactDesktop: Electron

Theprevious recommendations are opinionated. You can choose your ownflexible framework for your ideal React application. Every “ideal”React setup is subjective to its needs of the developers and project.After all, there is no ideal React application setup.

Our previous suggestions are well grounded and targeted. Every developer and project has different requirements for React applications and their Settings. Therefore, there is no optimal setup for React applications. So you can choose a flexible framework for your ideal React application without sticking to anything else.