To create the user interface of LyricsFinder V2, we will install and use React Bootstrap (https://react-bootstrap.github.io), a React UI components library created on top of the hugely popular Bootstrap (https://getbootstrap.com) CSS library.
With nearly 30 components at our disposal, we should have more than enough to construct our new user interface.
Again, just like with Angular and Vue.js, there are many alternative UI toolkits available for React. We didn't do a thorough evaluation for LyricsFinder V2 though. We simply chose a popular library different from what we have used so far in this book (namely, Angular Material and Element). That way, you get to see one more way of assembling an interface.
Here are some other React UI toolkits that you might want to take a look at:
- https://dev.to/kayis/react-ui-kits-3fm2
- https://www.codeinwp.com/blog/react-ui-component-libraries-frameworks
- https://hackernoon.com/23-best-react-ui-component-libraries-and-frameworks-250a81b2ac42
To handle the navigation between our pages, we will use React Router (https://reacttraining.com/react-router), a popular open source router for React.
We will see later how to install and use all of these tools.
Check out the following references:
- React Bootstrap: https://react-bootstrap.github.io
- Bootstrap: https://getbootstrap.com