React authentication

➞Components - The Types and API
➞Props
➞State
➞JSX

⟹Components - The Types and API

React is basically about components.

A ReactJS app is just one big component made up of interoperable smaller components. Working with ReactJS means you are thinking in components most of the time.

An example of a component is an HTML 5 tag, say <header>. 

A header can have attributes, it can be styled and also possess its own behaviour. In ReactJS, you'll be able to build your own custom component using ES6 like so:

 class CustomComponent extends React.component {

render() {

  return '<h3> This is my custom component !!!</h3>';

  }

}

So, your component will now be <CustomComponent></CustomComponent>.

React provides some methods that are triggered at various points from creating a component up until the component is destroyed. 

This is called the Component's Lifecycle. 

You can declare methods to hook into the component's lifecycle to control the behaviour of components in your app. 

Some examples of these lifecycle hooks are componentDidMount(), componentWillMount(), componentWillUnmount(), shouldComponentUpdate(), componentWillUpdate() and more.

 ⟹componentWillMount() : 

This method is called before the component is initially rendered. So it is called before the render method is executed. You can't perform any type of DOM manipulation here because the component isn't available in the DOM yet.

 ⟹componentDidMount() :

This method is called right after the component has been rendered. So it is called immediately after the render method has been executed. It's the best place to perform network and AJAX calls.

 ⟹componentWillUnmount() : 

This method is called right before the component is removed from the DOM.

 ⟹shouldComponentUpdate() : 

This method determines if a re-rendering should occur or not. It is never called on initial rendering and it's always called before the render method.

 ⟹componentWillUpdate() : 

This method is called as soon as shouldComponentUpdate returns true. It is called just before the component is rendered with new data.

There are also methods like render and setState that you can use to render an element on the DOM and set the state of a component respectively.

Take this example for a spin and watch how these lifecycle hooks work. Observe the sequence of logs in the browser console.

import React, { Component } from 'react';
import { render } from 'react-dom';

class Experiment extends Component {

  componentWillMount() {
    console.log("This will mount");
  }

  componentDidMount() {
    console.log("This did mount");
  }

  componentWillUnmount() {
    console.log("This will unmount");
  }

  render() {
    console.log("I am just rendering like a boss");
    return <div>I got rendered!</div>;
  }

}

render(
  <Experiment />,
  document.getElementById("root")
);

⟹Props

Props is the short form for properties. Properties are attributes of a component. 

In fact, props are how components talk to each other. A tag in HTML such as <img> has an attribute, a.k.a prop called src that points to the location of an image.

In React, you can have two components, FatherComponent and SonComponent. Let's see how they can talk to each other.

class FatherComponent extends React.Component {
   render() {
      return <SonComponent quality="eye balls" />;
   }
}

 ⟹FatherComponent

 class SonComponent extends React.Component {
    render() {
      return <p> I am a true son. I have my father's "{ this.props.quality }" . </p>;
    }
}

⟹SonComponent

Now, when the page is served and a <FatherComponent> is called, I am a true son. I have my father's eyes will be rendered on the page.

⟹State

When developing ReactJS applications, it is important to know when and when not to use state in components. 

The question now is: When do I use state?, When do I use props? Props are data that the component depends on to render correctly. 

Most times, it comes from above, meaning it is passed down from a parent component to a child component. 

Like props, state holds information about the component but it is handled differently.

For example, the number of times a button was clicked, user input from a form, etc. 

When state changes in a component, the component automatically re-renders and updates the DOM.

Inside a component, state is managed using a setState function.

class Layout extends React.Component {
  constructor() {
    super();
    this.state = {
      position: "right"
    };
  }

  render() {
    return (
      { this.state.position }
    )
  }
}

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (
      <button onClick={() => this.updateCount()} >
        Clicked {this.state.count} times
      </button>
    );
  }
} 

Now, this works great for simple applications like the one we'll build in this tutorial. 

For medium and large apps, it is recommended to use a state management library like Redux or MobX to avoid big balls of messy code and also to help you track every event happening within your app.

⟹JSX

Initially, looking at JSX seems awkward. 

JSX is the combination of HTML and JavaScript code in the same file. 

You can decide to name the extension of the file .jsx or just .js. An example of JSX is:

class Layout extends React.Component {
  render() {
    return <p>Hello {this.props.layoutStructure ?  'Frontend layout' : 'Backend Layout'}</p>;
  }
}