Classes and components

Author: Dawid Adach

-

Let's have a quick look at the current version of our current code. We have one class called App.

    import React, { Component } from "react";
    import ReactDOM from "react-dom";
    import '@fortawesome/fontawesome-free/css/all.min.css';
    import "bootstrap-css-only/css/bootstrap.min.css";
    import "mdbreact/dist/css/mdb.css";
    import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
    import "./index.css";
    class App extends Component {
        state = {};
        render() {
        return (
            <React.Fragment>
            <MDBContainer>
                <MDBRow>
                <MDBCol md="9">Left column </MDBCol>
                <MDBCol md="3">Right column </MDBCol>
                </MDBRow>
            </MDBContainer>
            </React.Fragment>
        );
        }
    }
    ReactDOM.render(<App />, document.getElementById("root"));
      

1. A new class

To fully understand what classes are, let's create a new Event class below our App class:

            class Event extends Component {
                state = {};
                render() {
                  return "Schedule item";
                }
              }
              
     
This is a very simple Class or as we call it more often React component class, or React component type. Most of the people will call it simply a component, however here is the one important thing which I want you to remember if you didn't have any experience with Object Oriented Programming in the past. Our class is just a definition of the component. It describes how our component will look and behave but it doesn't create an instance of the component yet

You can think of it like a stamp. The stamp itself is just a definition of a picture/image. In order to create a stamp imprint, you have to make some action. Furthermore - our of the single stamp (class) can create multiple copies (instances).


2. Component instance

2.1 Method #1 — ReactDOM.render()

So how to render our "stamp" in React? You already know one of the ways, we could use the render() method which you already know:

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

      

2.2 Method #2 — <ComponentTag>

Let's be honest. It would be horrible to render each and every component that way. Especially in the case of nested ones. There is another, much easier way — whenever we are creating a Component definition, we can render it using the <ComponentName> tag, in exactly the same way as we would use other HTML/JSX tags: <Event />.

Let's render our schedule items in the left end right columns:

            <MDBCol md="9"><Event/></MDBCol>
            <MDBCol md="3"><Event/></MDBCol>
            
      

As a result, we will see two instances of our Event component 



Let's work on our schedule item now. Update our render method with the following template:

            render() {
                return (
                    <React.Fragment>
                      <h3>9:00 - Title</h3>
                    </React.Fragment>
                );
              }
              
     
Now, delete the schedule item from the right—hand column and add the second one in the left—hand column:

            <MDBRow>
                <MDBCol md="9">
                    <Event/>
                    <Event/>
                </MDBCol>
                <MDBCol md="3" />
            </MDBRow>
                
     
Our app starts to look like a real agenda:

Since we know how to create a render class, it's a high time to learn how to make it a little bit more dynamic and pass some values to it!


Rate this lesson

Previous lesson Download Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...