Learning Next.js: Part 1: Reviewing React

On By Dan CoxIn code, JavaScript, React

Learning Next.js

Next.js is a JavaScript framework based on React for rapidly developing web sites and applications.

Reviewing React

Understanding Next.js starts with first reviewing how React works and its basic concepts.

Everything is a Component

React divides up sites and web applications into different parts called components. These can be anything from input areas to an entire page. The difference between components is not in how they do things, but what makes the most sense in understanding parts in relation to each other.

React enforces no strict design patterns. However, certain patterns have developed over time based on how React works. This includes the concept of “lifting state” where the state (data) of one component is handled by another, parent component.

Components Render

Anything that inherits from the class React.Component should have a render() function. Whenever this class is used, anything found within the component is added to the page through its render() function.

import React from 'react';

class Example extends React.Component {
    render() {
       return(
         <p>This is the best example!</p>
       );
    }
}

export default Example;

React uses JSX

React uses JavaScript XML (JSX) to allow the use of HTML within other JavaScript code. However, as XML, it follows some strict rules such as having a single root element, that all elements should close, and uses expressions for values.

import React from 'react';

class Example extends React.Component {
    render() {

       let greeting = "Hello!";

       return(
         <p>{greeting} This is the best example!</p>
       );
    }
}

export default Example;

Properties and State

React allows for creating classes that inherit from React.Component through using their named XML equivalent. For example, with a class named Example, it can be created, and its render() function automatically called, through the code <Example />.

React also converts elements and attributes into objects and properties. Any attributes added to a XML class name is sent to the same class as an object literal based on its key-value pairs.

<Example name="Dan" greeting="Hello!" />

import React from 'react';

class Example extends React.Component {

    constructor(props) {
      super(props);
      // props.name will be "Dan"
      // props.greeting will be "Hello!"
    }

    render() {
       return(
         <p>This is the best example!</p>
       );
    }
}

export default Example;

Note: The use of the super() function should be used to make sure all attributes (converted into properties) are properly passed to the component and its parent class of React.Component.

State

When dealing with internal data, all components should use its state. Defined initial within a constructor(), this should be this.state with an object literal containing values

import React from 'react';

class Example extends React.Component {

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

    }

    render() {
       return(
         <p>This is the best example!</p>
       );
    }
}

export default Example;

Component Lifecycle

Each component follows a lifecycle and movement between three different phases: mounting, updating, and unmouting.

Mounting

When a component is initially used, its constructor is first called and properties passed to it. The render() function is also called and any HTML elements are “mounted” to the page.

At the end of the mounting phase, the function componentDidMount() will be called. When adding data from an external source, this is the best function to use.

Updating

During the updating phase, any content within the render() function will be updated if the state also changes. To update its state, the function this.setState() should always be used, passing to it an object literal of new key-value pairs.

Unmounting

When a component is removed from the page, it undergoes an unmounting phase. The function componentWillUnmount() will be called last.

Event Handlers

Finally, events within a browser such as clicks can be handled through using an onEvent attribute on the component with an event handler defined as an arrow function or a member function of the class.

import React from 'react';

class Example extends React.Component {

    constructor(props) {
      super(props);
      
      this.state = {clicked: false};

    }

    clickHandler = () => {
      this.setState({clicked: true});
    }

    render() {
       return(
         <div>
           
           <p>Button clicked? {this.state.clicked ? "Yup!" : "Nope!"}</p>
           
           <button onClick={this.clickHandler}>Click me!</button>

         </div>
       );
    }
}

export default Example;

Play with the Repl.It Example!