Chapter 9: Useful Third-Party Components for React

React is component-based, and we can find a lot of useful third-party components that we can use in our apps. In this chapter, we are going to look at several components that we are going to use in our frontend. We will examine how to find suitable components and how you can then use these in your own apps.

In this chapter, we will cover the following topics:

• Using third-party React components
• Working with AG Grid
• Using the MUI component library
• Managing routing in React

Technical requirements

In this book, we will be using the Windows operating system, but all the tools are available for Linux and macOS as well.

Node.js also has to be installed, and the following GitHub link will be required: https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-and-React/tree/main/Chapter09.

Using third-party React components

There are lots of nice React components available for different purposes. Our first task is to find a suitable component for your needs. One good site for searching components is JS.coach (https://js.coach/). You just have to type in a keyword, search, and select React from the list of libraries.

In the following screenshot, you can see a search of table components for React:

Figure 9.1 – JS.coach

Another good source for React components is awesome-react-components (https://github.com/brillout/awesome-react-components).

Components often have good documentation that helps you to utilize them in your own React app. Let's see how we can install a third-party component to our app and start to use it, as follows:

1. Navigate to the JS.coach site, type date in the search input field, and filter by React. From the search results, you can find a list component called react-date-picker, as illustrated in the...

Working with AG Grid

AG Grid (https://www.ag-grid.com/) is a flexible grid component for React apps. It has many useful features, such as filtering, sorting, and pivoting. We will use the community version, which is free to use (Massachusetts Institute of Technology (MIT) license).

Let's use the GitHub REST API app that we created in Chapter 8, Consuming the REST API with React. Proceed as follows:

1. To install the ag-grid community component, open PowerShell and move to the restgithub folder, which is the root folder of the app. Install the component by typing the following command:

      npm install ag-grid-community ag-grid-react

2. Open the App.js file with Visual Studio Code (VS Code) and remove the table element inside the return statement. The App.js file should now look like this:

   import React, { useState } from 'react';
   import './App.css';
   function App() {
     const [keyword, setKeyword] = useState('');
    ...

Using the MUI component library

MUI (https://mui.com/) is the React component library that implements Google's Material Design language. In this book, we are using MUI version 5, and if you are using some other version, you should follow the official documentation. MUI contains a lot of different components—such as buttons, lists, tables, and cards—that you can use to achieve a nice and uniform user interface (UI).

We will create a small shopping list app and style the UI using MUI components, as follows:

1. Create a new React app called shoppinglist by running the following command:

   npx create-react-app shoppinglist

2. Open the shopping list app with VS Code. Install MUI by typing the following command in the project root folder to PowerShell or any suitable terminal you are using:

   npm install @mui/material @emotion/react @emotion/styled

3. Open the App.js file and remove all the code inside the App div tag. Now, your App.js file should look like this, and...

Managing routing in React

There are multiple solutions available for routing in React. The most popular one, which we are using, is React Router (https://github.com/ReactTraining/react-router). For web applications, React Router provides a package called react-router-dom.

To start using React Router, we have to install dependencies using the following command. In this book, we are using version React Router version 6:

npm install react-router-dom@6 history@5

Four different components in the react-router-dom library are required to implement routing. BrowserRouter is the router for web-based applications. The Route component renders the defined component if the given locations match.

The following code snippet provides an example of the Route component. The element prop defines a rendered component when the user navigates to the contact endpoint that is defined in the path prop. The path is relative to the parent route that renders them:

<Route path="contact"...

Summary

In this chapter, we learned how to use third-party React components. We familiarized ourselves with several components that we are going to use in our frontend. ag-grid is the table component with built-in features, such as sorting, paging, and filtering.

MUI is the component library that provides multiple UI components that implement Google's Material Design language. We also learned how to use React Router for routing in React applications.

In the next chapter, we will build an environment for frontend development.

Questions

1. How can you find components for React?
2. How should you install components?
3. How can you use the ag-grid component?
4. How can you use the MUI component library?
5. How can you implement routing in a React application?

Further reading

Packt Publishing has other great resources available for learning about React. Some of these are listed here:

• React – The Complete Guide, by Academind GmbH:
• React 17 Design Patterns and Best Practices – Third Edition, by Carlos Santana Roldán: https://www.packtpub.com/product/react-17-design-patterns-and-best-practices-third-edition/9781800560444