Javascript React UI with REST HTTP call

🕓 40 minutes

What you’ll learn

In this tutorial, we will create a simple Javascript React component with Javascript React scaffolder as an SPA (single page application). We want to show a very simple UI with the input field for the username, call ClientInfoService endpoint and show the retrieved information to UI.

reactClientInfo

Project source

This example project can be cloned from: http://gitlab.factory.codenow-control.codenow.com/public-docs/client-authorization-demo/client-information-ui.git

Prerequisites

Steps

Open your IDE, import created component and start coding:

  • Modify main file App.js and replace the content with the following code

    01 import React, { Component } from 'react'
    02 import './App.css'
    03
    04 class App extends Component {
    05 constructor() {
    06 super()
    07 this.state = {
    08 username: 'mkomar',
    09 data: {roles: []}
    10 }
    11
    12 this.handleSubmit = this.handleSubmit.bind(this);
    13 this.handleChange = this.handleChange.bind(this);
    14 }
    15
    16 handleSubmit(event) {
    17 // console.log(this.state);
    18
    19 fetch(window.env.CLIENT_INFO_SERVICE_URL + this.state.username)
    20 .then(resp => resp.json())
    21 .then(data => {
    22 // console.log(data);
    23
    24 this.setState({ data: data })
    25 }
    26 );
    27
    28 event.preventDefault();
    29 }
    30
    31 handleChange(event) {
    32 this.setState({ username: event.target.value });
    33 }
    34
    35 render() {
    36
    37 return (
    38 <div className='container'>
    39 <br />
    40 <form onSubmit={this.handleSubmit}>
    41 <label>
    42 <strong>Client:</strong>&nbsp;&nbsp;
    43 <input type="text" size="10" maxLength="10" value={this.state.username} onChange={this.handleChange} />
    44 </label>&nbsp;&nbsp;
    45 <input type="submit" value="Check" />
    46 </form>
    47 <br />
    48 <p><label><strong>Firstname:</strong> {this.state.data.firstname}</label></p>
    49 <p><label><strong>Surname:</strong> {this.state.data.surname}</label></p>
    50 <p><label><strong>Birth date:</strong> {this.state.data.birthdate}</label></p>
    51 <p><label><strong>Authorization roles:</strong> {this.state.data.roles ? this.state.data.roles.toString() : ''}</label></p>
    52 </div>
    53 )
    54 }
    55 }
    56 export default App;
  • Next, edit the file config/runtime-configuration.js and add the configuration for server URL

    • note that URL should be different depending on your implementation of the ClientInfoService tutorial example (see Micronaut REST client/server )

      01 //This is an example configuration for local development, it will be replaced by configurations for individual environments.
      02
      03 //define all configuration properties under window.env
      04 window.env = {
      05 CLIENT_INFO_SERVICE_URL: "https://client-info-service-stxacademy.box.innobank.codenow.com/info/",
      06 };
  • You are ready to go now. Try to start your application using the terminal command npm start and go to the browser URL http://localhost:3000

reactApp

What’s next?

If your code works in local development, you are ready to push your changes to GIT and try to build and deploy your new component version to the CodeNOW environment. For more information, see Application Deployment and Monitoring.

See our other developer tutorials: