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 will 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 them in your own apps.

In this chapter, we will cover the following topics:

• Installing third-party React components
• Working with AG Grid
• Using the Material UI component library
• Managing routing with React Router

Technical requirements

Node.js must be installed. The following GitHub link for this chapter will also be required: https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-3-and-React-Fourth-Edition/tree/main/Chapter11.

Installing third-party React components

There are lots of useful React components available for different purposes. You can save time by not doing everything from scratch. Well-known third-party components are also well tested, and there is good community support for them.

Our first task is to find a suitable component for our needs. One good site to search for components on 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 search results for table components for React:

Figure 11.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 use them in your own React app. Let’s see how we can install a third-party component in our app and start to use it:

1. Navigate to the JS.coach site, type...

Working with AG Grid

AG Grid (https://www.ag-grid.com/) is a flexible data grid component for React apps. It is like a spreadsheet that you can use to present your data, and it can contain interactivity. It has many useful features, such as filtering, sorting, and pivoting. We will use the Community version, which is free (under an MIT license).

Let’s modify the GitHub REST API app that we created in Chapter 10, Consuming the REST API with React. Proceed as follows:

1. To install the ag-grid community component, open the command line or terminal 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.tsx file with Visual Studio Code (VS Code) and remove the table element inside the return statement. The App.tsx file should now look like this:

   import { useState } from 'react';
   import axios from &apos...

Using the Material UI component library

Material UI (https://mui.com/), or MUI, is the React component library that implements Google’s Material Design language (https://m2.material.io/design). Material Design is one of the most popular design systems today. 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).

In this book, we will use MUI version 5. If you want to use another version, you should follow the official documentation (https://mui.com/material-ui/getting-started/). MUI version 5 supports Material Design version 2.

In this section, we will create a small shopping list app and style the UI using MUI components. In our app, a user can enter shopping items that contain two fields: product and amount. Entered shopping items are displayed in the application as a list. The final UI looks like the following screenshot. The ADD ITEM button...

Managing routing with React Router

There are a few good libraries available for routing in React. React frameworks such as Next.js and Remix provide built-in routing solutions. The most popular library, 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. React Router uses URL-based routing, which means that we can define which component is rendered based on the URL.

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

npm install react-router-dom@6

The react-router-dom library provides components that are used 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...

Summary

In this chapter, we learned how to use third-party React components. We familiarized ourselves with several components that we will use in our frontend. ag-grid is a data grid component with built-in features like sorting, paging, and filtering. MUI is a 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 create an environment to develop the frontend for our existing car backend.

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

Here are some resources for learning about React:

• Awesome React, a great resource for finding React libraries and components (https://github.com/enaqx/awesome-react)
• The Top React Component Libraries that are Worth Trying, by Technostacks (https://technostacks.com/blog/react-component-libraries/)

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask the author questions, and learn about new releases – follow the QR code below:

https://packt.link/FullStackSpringBootReact4e