Learning React: Part 3: Building Classes

Learning React

React is a popular JavaScript library for creating user interfaces. It combines many features of JavaScript ES6 together to create a powerful way to quickly create front-end functionality.


Building Classes

As shown in the last part of this series, new classes can be created based on the existing React.Component class. This helps developers to very quickly create classes that have their own render() function that can include HTML.

Consider the following code:


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class AdditionalExample extends React.Component {
  render() {
    return(
      <p>I'm new!</p>
    );
  }
}


class Example extends React.Component {
  render() {
    return (
      <AdditionalExample />
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('root')
);

As reviewed in the previous part, classes that extend React.Component are included through treating them as if they were HTML elements. In this example, the ReactDOM.render() function runs into Example. Example runs into AdditionalExample and, finally, the text “I’m new” surrounding by paragraph tags is found.

Using classes and components, different parts of an interface can be broken up and used in others in this way. As long as they are in the same scope, classes can used in this way.

Giving Props

While having an interface composed of different static content can be useful for some contexts, often areas need to be update dynamically or have their contents changed as a result of other function calls.

To help with this, React uses the value props. This stands for properties and is passed to any objects or functions that are rendered by any React component. It is the properties of the HTML element representing the class or function.

Consider the following code:


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Example extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>My name is {this.props.name}</h1>
    );
  }
}

ReactDOM.render(
  <Example name="Dan" />,
  document.getElementById('root')
);

When the HTML fragment ‘<Example name=”Dan” />’ is parsed by the ReactDOM.render() function, it first looks for an object or function by the name Example. Finding it, the function creates the object and passes it a props argument.

As this class is extending the React.Component object, the super() function is used to initialize the parent class with the same props values.

Internally, the new object has access to the this.props variable and can access any other values “passed” to it that were part of the properties of the HTML fragment in which it was used.

In this case, the property name was used and given a value “Dan”. This was passed to the class Example as part of the this.props and became the value of this.props.name.

What’s with the opening and closing curly brackets?

The opening and closing brackets around the variable this.props.name is part of functionality called JSX in React. It actually what is allowing for the intermixing of HTML and even part of how classes are HTML.

JSX will be explained more in the next part of the series, but the basics are that it allows for embedding variables and even function called into HTML through using opening and closing curly brackets around them. This is similar but has a different syntax and formatting from the way JavaScript ES6 uses template literals.

Building Complexity

Classes can be included through treating them as HTML. If that HTML is given properties with different values, these are passed to the class as part of the prop value that becomes this.props internally.

Through using JSX, the values of variables and even function calls can be intermixed with HTML to dynamically create content.

Consider the following code:


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Item extends React.Component {
  render() {
    return (
      <li>I am number {this.props.number}</li>
    );
  }
}

class ShoppingList extends React.Component {

  createItem(x) {
    return (
      <Item number={x} />
    )
  }

  render() {
    return (
      <ul>
      {this.createItem(1)}
      {this.createItem(2)}
      {this.createItem(3)}
      </ul>
    );
  }
}

ReactDOM.render(
  <ShoppingList />,
  document.getElementById('root')
);

In this more complex example, the ReactDOM.render() function first encounters the HTML of “<ShoppingList />”. The class matching that name is created and its render() function called.

Inside of this function, the return expression contains JSX that contains function calls. These internal functions are called, which contain more JSX. An object or function matching “Item” is then found and created. Since it contained the property “number,” this was passed to the class as this.props.number.

Inside the Item class, its own render() function is called and it returns line-item HTML along with some JSX that translates its this.props.number variable into a value.

Reviewing

Classes can be extended through using the React.Component class. Since all components render, this allows for building code that uses multiple objects using their names as HTML elements.

Through using props, values can be passed to classes. The variables part of props are the properties of the HTML used to invoke them.

Finally, JSX can be used within the HTML to have variables display their values or to make internal function calls.

All of these can be combined to make HTML that passes properties to classes that also uses these same methods to create complex projects.

Play with the example on Repl.it!