React Basics – Lets create a class based component – Part 1 of 2

In this example, we will be creating a class based component. We will then be creating a basic state object, and then using the props from the state object in our return statement, which we will present to the user. There are a few different ways to build components in React. The two that I personally use the most are functional and class based, and this has been true for me in both React & Vue. The code for our entire component file is below

import React from 'react';

class ComponentName extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: 'Jeremy',
      age: 34,
      job: 'software engineer',
      company: 'some company',
    };
  };

  render() {
    return <h1>My name is {this.state.firstName}, I am {this.state.age}, and I am a {this.state.job} at {this.state.company}</h1>
  };

};

export default ComponentName;

The very first thing we do in our file is import React. By importing React, it gives us complete access to everything that React has to offer. It’s worth noting that in every file you create and want to use React, you must start by doing an import statement.

import React from 'react';

Next we will create our class component. To define a React class component, you need to extend React.Component. Just as a side note, the only method that has to be defined in a React.Component is the render() function, and everything else is completely optional. The most basic component would look like this

class ComponentName extends React.Component {
    render() {
        return { 
            <div> </div>
        }
    }
}

A more complete component would look like what is below. In it, we are using a constructor. What a constructor does is helps to construct things. We tell our constructor we want access to a single parameter, which in our case is props, which we use in our state object. We can then pass the props through to our render function, and display this to our user.

class ComponentName extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            firstName: 'Jeremy',
            age: 34,
            job: 'software engineer',
            company: 'some company',
        };
    }

    render() {
        return <p>My name is {this.state.firstName}, I am {this.state.age}, and I am a {this.state.job} at {this.state.company}</p>
    }
}

The last thing in our file is the code below

export default ComponentName;

What this does is makes our component usable anywhere in our application. To use this in another file, we would simply import it into the other files the same way we imported react in this file, like below

import ComponentName from 'routeToThisFileGoesHere';

In our terminal, lets start up our React project using the following command

npm run start

Once your environment boots up, you should see the following in your browser of choice(I personally use Firefox)

While this is just a simple example of what is capable, I want to cover functional components in my next post. If you have any questions, improvements, or just want to share some love, leave a comment below. Thanks until next time!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s