React JS

JavaScript library for building user interfaces. Created by Facebook.

Yarn

JavaScript package manager compatible with npm that helps automate the process of installing, updating, configuring, and removing npm packages.

Install

# add Yarn repository
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -  

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list  

sudo apt-get update  
sudo apt-get install nodejs yarn  
yarn --version # verify

Create React Project

  • yarn create react-app my-react-app-name creates a template
  • yarn start starts the development server
  • yarn build bundles the app into static files for prod
  • yarn test starts the test runner

React App structure

Main Starter

The main starter to wire a main Component into is App.js. There may you set the structure with the written components. It’s structure is as follows

import React, {Component} from 'react';
import './App.css';
import LogCleanerApp from "./components/LogCleanerApp";

class App extends Component {
  render() {
    return (
      <div className="container">
        <LogCleanerApp/>
      </div>
    );
  }
}

export default App;

Standalone components

They let you split the UI into dependant, reusable pieces. They must always start with a capital letter. Components may refer to other components in their output.

Try to split them into standalone units, as small as possible, as this does code more reusable in larger apps.

Declaration as a .jsx file

Router

Set here the component you want the app to use for a given path

import React, {Component} from 'react';
import {BrowserRouter, Route, Switch} from "react-router-dom";
import FormComponent from "./FormComponent";

class LogCleanerApp extends Component {
    render() {
        return (
            <BrowserRouter>
                <>
                    <h1>LogCleaner Application</h1>
                    <Switch>
                        <Route path="/" exact component={FormComponent}/>
                    </Switch>
                </>
            </BrowserRouter>
        )
    }
}

export default LogCleanerApp

Standalone components

render() returns what needs to be displayed as part of the component.

export default ComponentTest Each JS file is a module. If you want elements from one module to be used in another, you need to export them.

For this example, this is a simple form. When the user writes into the form, it updates the value in a this.state global variable. When he submits the form, it sends the value of this variable to a Service class.

import React, {Component} from 'react';
import LogService from "../services/LogService";

class FormComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            logContent: ''
        };

        this.handleChange = this.handleChange.bind(this);
        this.sendLogContent = this.sendLogContent.bind(this);
    }

    sendLogContent(event) {
        console.log('a name was submitted: ' + this.state.logContent);
        LogService.sendLog(this.state.logContent).then(
            response => {
                console.log(response);
            }
        )
        event.preventDefault();
    }

    handleChange(event) {
        this.setState({logContent: event.target.value});
    }

    render() {
        return (
            <form onSubmit={this.sendLogContent}>
                <label>
                    Name:
                    <textarea type="text" value={this.state.logContent} onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

export default FormComponent

Services

Used with axios, this sends a GET request to our backend.

import axios from 'axios'

const API_URL = "http://localhost:34831"

class LogService {

        sendLog(log) {
            return axios.get(`${API_URL}/logs/${log}`)
        }

}

export default new LogService()

Important Methods

componentDidMount() React defines a lifecycle for its components. This method will be called as soon as the component is mounted.

Formik

React component to build forms

Formik does not (re)load a parameter

Check if at <Formik> tag the following flag has been enabled enableReinitialize={true}. The reason is that the render() method may render it once empty, and the second time it wouldn’t load.

The start tag should look as follows

<Formik
    enableReinitialize={true}
    initialValues=>

Reference(s)

https://www.springboottutorial.com/spring-boot-react-full-stack-crud-maven-application
https://reactjs.org/docs/components-and-props.html