Article first word personal blog: Front taoyuan

Disclaimer: this article is for the translation, the original link: www.robinwieruch.de/react-libra…

React has been around for a long time, and since its inception, there has been a very comprehensive ecosystem around component drivers, but developers from other programming languages or frameworks have had a hard time finding all the components to build a React system. If you’re a framework developer like Angular, you’re probably used to the idea that frameworks contain all the functionality you need,

For React, however, the core is not to complete all the optional libraries. Whether it’s a strength or a weakness depends on you. When I switched from Angular to React, I definitely experienced the advantages of being React.

Only with React can you build a component-driven user interface using function components and props. It comes with a few built-in solutions, such as React Hooks for local state and side effects.

The following article will give you some ways to summarize your own choices from the supplemental libraries to build a full React application.

How to Start React

If you are a beginner who is completely unfamiliar with React and want to create a React project, join the React world. There are many toolkit projects to choose from, each attempting to meet different needs. The React community currently exists through Facebook’s Create-React-App (CRA). It provides a zero-configuration setup and gives you an out-of-the-box and simple React application to get up and running. All the tools are hidden from you, but ultimately it’s up to you to change them.

If you’re already familiar with React, you can opt for one of its popular starter kits: Nex.js and Gatsby. Both frameworks are built on top of React, so you should already be familiar with the fundamentals of React. Next. Js is used for server-side rendering (such as dynamic Web applications), and Gatsby. Js is used for static site generation (such as blogs, landing pages).

If you just want to see how these starter kits work, try setting up the React project from scratch. You’ll start with a basic HTML and JavaScript project and then add React and its support tools yourself.

If you want to select a custom boilerplate project, try narrowing your requirements. Boilerplate should be minimal and don’t try to fix everything. It should address your problem. For example, the Gatsby – FireBase-authentication boilerplate only gives you the full Firebase authentication mechanism in Gatsby. Js, but everything else is omitted.

Advice:

  • create-react-app for React beginners/advanced
  • Gatsby.js for static websites in React
  • Next.js for server-side rendered React
  • custom React project to understand the underlying tools

React State Management

React has built-in hooks to manage local state: useState, useReducer, and useContext. All of this can be used in React for complex local state management. It can even simulate Redux, a popular state management library in React.

All of React’s built-in hooks are great for local state management. When it comes to state management of remote data, I recommend using the Apollo Client if the remote data has a GraphQL endpoint. Alternatives to the Apollo Client are URQL and Relay.

If the remote data is not coming from the GraphQL endpoint, try using React Hooks to manage it. If not, a solution like Redux or MobX/ MobX State Tree might help.

If you want more details, check out my comprehensive State Management Response tutorial.

Recommendation:

  • Local states: React useState, useReducer, useContext Hooks
  • Remote state via Graph QL: Apollo Client
  • Reacthooks or Redux/MobX/ MobX State Tree

Use React routing

Routing plays an important role in React. After all, React can help you implement a single-page application that handles routing on the client side. When introducing a complex route, there are several routing solutions. The most recommended solution is the React Router.

Before you import routes, you can try React’s conditional rendering, which is not a reasonable alternative to routing, but is good enough for small applications.

Advice:

  • React Router

Style library in React

While there are many solutions to React style handling, as a React beginner, it’s good to start using inline styles and basic CSS.

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

While inline styles can be added dynamically in React using JavaScript, an external CSS file can have all the remaining styles in the React application. Once your application grows, there are many other styles to choose from.

First, I suggest you take a look at CSS Modules as one of the csS-in-CSS solutions. CSS Modules are supported by create-React-app and give you a way to encapsulate CSS into Modules. This way, it won’t accidentally leak into someone else’s style. Although some parts of the application can still share a style, others do not have to access it. In React, CSS Modules typically coexists CSS files with React component files.

import styles from './style.css';
const Headline = ({ title }) =>
  <h1 className={styles.headline}>
    {title}
  </h1>
Copy the code

Secondly, I would like to recommend one of the CSS-in-JS solutions called as Styled Components as React. This method is provided by a library called Styled – Components, which shares styles with JavaScript next to the React component:

import styled from 'styled-components';
const BlueHeadline = styled.h1`
  color: blue;
`;
const Headline = ({ title }) =>
  <BlueHeadline>
    {title}
  </BlueHeadline>
Copy the code

Third, I’d like to recommend Tailwind CSS as a functional CSS solution:

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

Whether you choose CSS in CSS, CSS in JS, or functional CSS is up to you. All of these strategies apply to the large React application.

Advice:

  • CSS-in-CSS with CSS Modules
  • CSS-in-JS with Styled Components
  • Functional CSS with Tailwind CSS

The React UI library

If you don’t want to build all the necessary React UI components from scratch, you can choose the React UI Library to do the job. All of these have some basic components, such as buttons, drop-down menus, dialog boxes, and lists. React has a number of UI libraries to choose from:

  • Ant Design
  • Chakra UI
  • Tailwind UI
  • Semantic UI
  • Material UI
  • React Bootstrap 1. React Bootstrap

The React animation

Animation in any Web application starts with CSS. Eventually you will find that CSS animations are not enough for your needs. Usually developers check the React Transition Group so they can perform animations using the React component. Other notable React libraries are:

  • react-motion
  • react-spring
  • Framer Motion
  • Animated (React Native)

Advice:

  • React Transition Group

React visualization and charting library

If you really want to build your own charts from scratch, you can’t help but learn 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 adventure, so many developers simply want to choose a React charting library that does everything for them in exchange for flexibility. Here are some popular solutions:

  • nivo
  • Victory
  • react-vis
  • Recharts
  • Chart Parts

The form library in React

The most popular form library in React is Formik. It provides everything from validation to submission to state formation management. Another option is React Hook Form. Both approaches are effective solutions for React applications if you start using more complex forms.

Advice:

  • Formik
  • React Hook Form

Data acquisition library in React

Soon, you’ll have to make a request to the remote API to get data in React. Modern browsers come with local fetch apis to perform asynchronous data requests:

function App() {
  React.useEffect((a)= > {
    const result = fetch(my/api/domain)
      .then(response= > response.json())
      .then(result= > {
        // do success handling
        // e.g. store in local state
      });
    setData(result.data);
  });
  return (
    ...
  );
}
Copy the code

Basically, you don’t need to add any other libraries to do this. However, there are times when not only do you need to provide complex asynchronous requests, but you also need them to be more powerful and just a lightweight library. One of these libraries I recommend is called Axios. As your application grows, you can use it in place of the local fetch API.

If you have enough time to work with the GraphQL API, I recommend that you use the Apollo Client. The alternative GraphQL client will be URQL or Relay.

Advice:

  • The browser’s local FETCH API
  • axios
  • Apollo Client

React type checking

Fortunately React has its own type checking capabilities. With PropTypes, you can define the props that are passed in for your React component. Whenever an incorrect type is passed to a component, an error message is received when the application is run. But this form of type checking should only be used for smaller applications.

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

In larger React applications, TypeScript adds type safety to the entire application instead of using React PropTypes. When using such a type checker, you can get errors during development. You don’t have to launch the application to find bugs that could have been prevented by this type of checking. In this way, the type checker can improve your developer experience and avoid introducing bugs in the first place.

Advice:

  • TypeScript

React Code style

For code styles, there are basically three options available.

The first is to follow a style guide that is accepted by the community. A popular Airbnb open source React Style Guide. Even if you don’t follow these style guidelines deliberately, it makes sense to read them and get the gist of common code styles in React.

The second way is to use linter, such as ESLint. Although the style guide only makes recommendations, linter enforces this recommendation in the application. For example, you can ask to follow the popular Airbnb style guide, and your IED/ editor will tell you about every mistake.

The third and most popular way is to use “Prettier”. It is a mandatory code formatter. You can integrate it into an editor or IDE and have it format your code every time you save a file. It may not always be to your taste, but at least you don’t have to worry about the format of the code in your own or your team’s code base. Although Prettier cannot replace ESLint, it does integrate pretty well with ESLint.

Advice:

  • ESLint
  • Prettier

The React certification

In a larger React application, you might want to introduce authentication with registration, login, and logout capabilities. In addition, password reset and password change functions are often required. These features go far beyond React, because the back-end application manages these things for you.

The usual approach is to implement your own custom backend application using custom authentication. If you don’t want to start your own authentication, consider something like Passport. Js.

If you don’t want to care about the back end at all, the following three solutions might work for you:

  • Firebase
  • Auth0
  • AWS Cognito

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

Advice:

  • DIY: Custom Backend
  • Get it off the shelf: Firebase

The React host

You can deploy and host the React application just like any other Web application. If you want full control, opt for something like Digital Ocean. If you want someone to take care of everything, Netlify is a popular solution if you are already using third-party authentication/databases, such as Firebase, and you can check if they are also Hosting (such as Firebase Hosting). You can also use S3’s static sites to host with Cloudfront.

The React test

If you want to learn more about testing in React, read How to Test Components in React. Here’s the gist: The trunk for testing the React application is Jest. It provides a test runer, an assertion library, and monitoring/mocking /stubbing functionality, everything that is needed in a comprehensive testing framework.

At a minimum, you can render React components in Jest tests using react-test-renderer. This is enough to use JEST to perform so-called snapshot tests. The snapshot test works like this: After running the test, a snapshot of the DOM elements rendered in the React component is created. When you run the test again at some point in time, another snapshot is created to be used as a difference from the previous snapshot. If the diff is not exactly the same, Jest will report an error, and you will either have to accept the snapshot or change the component’s implementation.

Eventually, you’ll find yourself using the Enzyme or React Testing Library (both of which are used in the Jest test environment) for a more detailed set of test features. These two libraries make it possible to render components and simulate events on HTML elements. Jest is then used for assertions on DOM nodes.

If you are looking for a test tool for react-to-end (E2E) testing, Cypress is the most popular choice.

Advice:

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

Tool library for React

Javascript provides a lot of built-in functionality 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. Why is that? Because you always have to render the list in the component. Since JSX is a mixture of HTML and JavaScript, you can use JavaScript to map on arrays and return JSX. Creating list components with React is easy:

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

However, you may need to select a utility library to provide more detailed functionality. You might even want to be more flexible in linking these utility functions together, or even combine them dynamically. At this point, you introduce a utility library: Lodash or Ramda. While Lodash is a more realistic library for every JavaScript developer, Ramda has a strong core in functional programming. Keep in mind that modern JavaScript offers so many features out of the box that the need to use a utility library is now reduced.

Advice:

  • JavaScript
  • Lodash

React and immutable data institutions

Native JavaScript provides a number of built-in tools to handle 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. Personally, I don’t use it, but any time someone asks about immutability in JS, everyone will point to Immer, and this can be added with redux or React hooks.

Internationalization of the React

When it comes to internationalizing the React application, you need to consider not only translation, but also diversification, date and currency formatting, and a few other things. Here are some of the most popular libraries that deal with this issue:

  • react-i18next
  • react-intl
  • LinguiJS
  • FBT

Advice:

  • react-i18next

React rich text editor

When it comes to the rich text editor in React, I can only think of the following because I don’t use anything else in React:

  • Draft.js
  • Slate

Payment in React

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

  • PayPal
  • Stripe Elements or Stripe Checkout

Time in React

If your React app is handling a lot of dates and time zones, you should introduce a library to manage these things for you. The most popular library is moment.js. Lighter alternatives are date-fns and day.js.

Reac Desktop application

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

  • NW.js
  • Neutralino.js

React mobile development

My preferred solution for taking React from the web to mobile remains React Native. If you are a React Native developer and want to create a Web application, you should check out React Native Web.

REACT VR/AR

To be honest, there’s a good chance we’ll use React to go deep into VR or AUGMENTED reality. I haven’t used any of these libraries, but these are the ones that flash through my mind when I talk about React AR/VR:

  • React 360
  • react-viro
  • react-native-arkit

Design prototypes for React

If you come from a UI/UX background, you might want to use a tool to rapidly prototype new React components, layouts, or UI/UX concepts. I’ve used Sketch before, but recently switched to Figma. Although I love both, I don’t regret using Figma now. Another popular tool is the Framer.

Write documentation for React

If you’re responsible for documenting your software, UI libraries, or anything else, you can use the React documentation tools, which are neat. I’ve used Storybook extensively, and I can say it works very well, but I’ve also heard the benefits of other solutions:

  • Styleguidist
  • docz
  • Docusaurus

conclusion

So ultimately, the React ecosystem can be seen as a React framework, but it remains flexible. It’s a flexible framework, and you can decide which libraries you want. You can start small and only add libraries to solve specific problems. As your application grows, you can extend the building blocks along the way. Otherwise you can stay lightweight by using the regular React. So, here again are the libraries that can complement React as the application’s core for different project sizes. Please keep in mind that this list is my personal opinion and I am eager to get your feedback.

Small application

  • Example: create – react – app
  • Style library: Basic CSS and Inline Style
  • Asynchronous request: Fetch or AXIos
  • Code style: none
  • Type check: None
  • State management: React Hooks
  • Route: None or React Router
  • Authentication: Firebase
  • Database: Firebase
  • The UI library: none
  • Form library: none
  • Test library: Jest
  • Utility library: JavaScript
  • Internationalization: React-i18NEXT
  • React desktop: Electron

Medium application

  • Boilerplate: nex.js or Gatsby
  • Style library: CSS Modules or Styled Components
  • Asynchronous request: Fetch or AXIos
  • Code styles: Prettier, ESLint
  • Type checking: none or TypeScript
  • State management: React Hooks and/or Apollo
  • Route: React Router
  • Authentication: Firebase
  • Database: Firebase
  • Ui library: None or Ui component library
  • Form library: None or Formik or React Hook Form
  • Jest with React Testing Library
  • Utility library: JavaScript
  • Internationalization: React-i18NEXT
  • React desktop: Electron

Large applications

  • Sample files: Next. Js, Gatsby. Js, custom Setup
  • Style library: CSS Modules or Styled Components
  • Asynchronous request: Axios or Apollo Client
  • Code styles: Prettier, ESLint
  • Type checking: TypeScript
  • State management: React Hooks and/ or Apollo/Redux/MobX
  • Route: React Router
  • Authentication: Node.js service + Passport. Js
  • Database: provide node.js services using SQL/NoSQL DB
  • Ui library: Ui component library or your own Ui components
  • ** Form library :** None or Formik or React Hook Form
  • Jest with React Testing Library and Cypress
  • Utility library: API for JavaScript, Lodash
  • Internationalization: React-i18NEXT
  • React desktop: Electron

Previous advice was personal. You can choose your own flexible framework for your ideal React application. Each “ideal” React setup is subjective and depends on the needs of the developer and the project. After all, there’s no ideal React app setup.

Afterword.

I am Taoweng, a thoughtful front-end er, want to know more about the front-end related, please pay attention to my public number: “Front-end Taoyuan”, if you want to join the exchange group to follow the public number reply “wechat” to pull you into the group