Now that our backend is implemented, we can turn our attention to the frontend React application.
Since we will be creating our user interface using the React Bootstrap UI toolkit, we need to add it to our project.
First of all, we will need to install the react-bootstrap library as well as the bootstrap package:
- Go to the frontend folder.
- Execute yarn add react-bootstrap bootstrap.
The bootstrap package is the official Bootstrap CSS library. We need to install it because the stylesheet of Bootstrap is not included in react-bootstrap. We should be able to use the most recent version.
Next, we need to load the stylesheet of Bootstrap, so that components can later be styled correctly.
Open the frontend/src/index.tsx file and add the following import on top:
import 'bootstrap/dist/css/bootstrap.min.css';
The installation is now complete!
To use react-bootstrap components, we need to import them one by one, just like Angular Material components with Angular Material. This limits the impact on the size of application code bundles.
To verify that we have correctly installed the library, let's try to use some react-bootstrap components. We'll add the title of the application to the App component.
Go ahead and open the frontend/src/App.tsx file. Then, replace its current content with the following:
import React from 'react';
import './App.css';
import Jumbotron from 'react-bootstrap/Jumbotron';
import Button from 'react-bootstrap/Button';
const App: React.FC = () => {
return (
<Jumbotron>
<h1>LyricsFinder v2</h1>
<p>
This will become the number one source of lyrics on the
Interwebs.
</p>
<p>
<Button variant="primary">Learn more</Button>
</p>
</Jumbotron>
);
};
export default App;
Notice that we have imported two components from react-bootstrap:
- Jumbotron is used to display some content that can take up the entire viewport.
- Button supports different variants (for example, primary, secondary, success, danger, and so on).
After doing this, you can also do the following:
- Clear the current contents of the frontend/src/App.css and frontend/src/index.css files as we won't use those styles at all.
- Remove the frontend/src/logo.svg file as we won't be using it either. This might prove difficult as the animation is mesmerizing!
If everything goes according to plan, then the home page of the application should now look like this:
As you can see, using the Bootstrap components in our application is quite easy with react-bootstrap. As an added benefit, we now have auto-completion for the different properties. The react-bootstrap package even includes TypeScript type definitions!
Let's move on!
Check out these references: