In previous posts, we have created a fully working application in Spring Boot 2. Now it’s time to create a frontend that will communicate with our backend. If you have not read previous posts, I invite you to read.
Before we start coding, we have to create React project:
Open the shell terminal and execute the following command: npx create-react-app wallet-ui
Type following command: wallet-ui
Start npm by executing: npm start
On the http://localhost:3000/ you should see the start page of the project in React:
Changing the default appearance
Our design will be very simple. Our app.js looks like this:
And the App.css file:
Creating CRUD functionalities
Firstly, we will create a component with the currencies table with paging, filtering and sorting rows/columns. In previous posts, we have created localhost:8080/currencies in our backend. Now we will use it to list all currencies in the frontend. We will start by creating a catalog for components. Create the components folder in the main project directory. Then create the Currencies.js file:
Now update the App.js adding a new component - the <Currencies /> :
Fetching data from the backend
To connect via HTTP we will use the Fetch API. The Fetch API provides the fetch() method of which we pass the path to the HTTP resource. In our case, it will be the URL of the backend:
That’s all we need to do to get data from the external API. But when the data should be fetched? The best place to fetch data is componentDidMount(). React’s lifecycle method. When this method runs, the component was already rendered with the render() method so we have a guarantee that data won’t be loaded until after the initial render.
There is one more thing to keep in mind. We have secured our application using JWT. The above use of the fetch() method will not work. We need to add the Authorization header with the generated jwt token. I generated a JWT token with Postman, then I injected it as a header in the fetch() method (You must generate the JWT token yourself. I showed how to do it in the previous post).
Now, we will add a simple display of the data fetched from the backend:
Using the react-table to display data
We will use React Table to display currencies. Reac Table allows to display tabular data client-side, and provides sorting, filtering, and pagination over that data. To install a react-table in our application, run the npm install reactable --save command in the main project directory and restart the application.
Now we have to remove the current table in the render() method and define the new one with react-table. If you want to configure the table in a different way, read the following doc: https://www.npmjs.com/package/react-table.
Updated render() method:
The effect looks much better:
Add new currency functionality
Let’s add functionality to adding new currencies. We will start with creating a new component - AddCurrency.js in the components directory. We will implement an add functionality with React Skylight component. SkyLight is a simple react component for modals and dialogs. Install a component like a react-table: npm install react-skylight --save The following source code shows the AddCurrency.js code:
We added the form inside the render(). It contains the Skylight component with buttons and the input fields for adding the currency. We also added a button that opens the modal window - it will be shown in the Currencies component.
Import the AddCurrency component inside the Currencies.js by adding:
And update the render() method in the Currencies.js with addCurrency component:
After refreshing the page you should see the “Add Currency” button. After clicking on it, you will see a window with inputs to complete:
Edit and Remove functionality
Currencies can be deleted/updated in the database by sending the DELETE/PUT HTTP method request to the backend. We will start by adding new columns with buttons to the react-table using Cell . We do not want to enable sorting and filtering functionalities for this column so we have to set props to false. The final code of the table is shown below:
Now, we have to implement two methods: onDelClick() and updateCurrency(). After each change, we need to re-collect currencies from the backend. In order not to repeat the code, let us move the functionality to fetch the data for the separate method fetchCurrencies():
The onDelClick() method implementation:
And the onDelClick() method implementation:
Finally, we need to add the editable function, which will allow us to edit the table’s cells:
Buttons appeared. The functionality for editing and deleting data works correctly!
Adding login functionality with JWT
For the application to work properly, we still need to implement the user’s login functionality. Let’s start by creating a new Login.js component in the components folder:
We are going to use bootstrap styles in the Login page. Install the following component: npm install --save bootstrap and add import 'bootstrap/dist/css/bootstrap.min.css'; at the beginning of Login.js. Update render() method by adding login form:
If the user is already authenticated (isAuthenticated is true), the Currencies component will be displayed. Let’s now implement the methods used in the form. The handleChange() method for handling the changes from the form:
And the login function:
The login is done by calling the /login endpoint with the POST HTTP method (we are sending the user object inside the request body). If the backend authenticates the provided user, we get an Authorization header in the response. We get a JWT token and save to session storage.
Now we need to update App.js to display the <Login /> component instead of <Currencies />:
We also have to update the Currencies.js so that each time we use thefetch()method, it retrieves the JWT from sessionStorage and sends it to the Authorization header. The following source code shows the Currencies.js final code:
By going to localhost:3000 you should see the login page. After entering the username and password (in our case, admin: admin - we have set this data in our backend) - you will be authenticated and you will have access to the application:
Congratulations, we have created a fully working application, secured by JWT. In the next (last) post we will configure PostreSQL.
The source code of the entire application (frontend and backend) is available on Github: