JONDJONES.COM
  • About
  • CMS
  • Clean C#
  • Javascript
  • Resources
  • Ask Jon
  • Hire Me
  • Contact
Follow Me
  • ;

what are you looking for?

JONDJONES.COM
  • About
    About Me
    • Who Is Jon D Jones?
    • Things I Use
    • My Projects
    How You Can Help
    • How You Can Support This Site
    • Submit A Guest Post
  • CMS
    CMS Tutorials
    • Umbraco
    • Sitecore
    • Episerver
    Resources
    • Episerver: The Missing Manual
    • #ILoveEpiserver
    • #ILoveUmbraco
  • Clean C#
    • TDD
    • Clean Code
    • Devops
    • Faster Page Load Times
    • Developer Tool Tutorials
  • Javascript
    Tutorials
    • Javascript
    • React
    • CSS
    Resources
    • #ILoveJavascript
    • Dev Tools List
    • #ILoveReact
  • Resources
    Free Guides
    • Shit My Websites Down...
    • #ILoveJavascript
    • #ILoveReact
    • #ILoveTechnicalInterviews
    • Land Your First Contract
    Books
    • Episerver Missing Manual
  • Ask Jon
  • Hire Me
    My Services
    • Umbraco Freelancer
    • Episerver Freelancer
    • Sitecore Freelancer
    • Javascript Freelancer
    My Company & Experience
    • Digital Prompt
    • My Portfolio
    • LinkedIn Profile
    • Stackoverflow CV
  • Contact

What Makes Up A React Component?

  • Homepage
  • Frontend
  • React
  • Getting Started React
  • What Makes Up A React Component?

In this tutorial, I will walk you through the basic features of a component built with React.js. After reading this you should get a good understanding of how to start building and designing your components using React.

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {

    state = {
        values: '',
    };
    
    handleInputChange = () => {
        // do something
    };

    componentDidUpdate(prevProps) {
    }

    shouldComponentUpdate(nextProps) {
    }
    
    render() {
        const { loading } = this.props;

        return (
            <div>
                {
                    loading ? 
                    <div>Loading</div> 
                        : 
                    children
                }
            </div>
        );
  }
}

export default MyComponent;

Let's break this down and go over it one step at a time.

PureComponent

class MyComponent extends PureComponent {

First, in the majority of React.js components you create, you will inherit from either React.Component or PureComponent.  PureComponent is a special React component that comes with the framework. The important thing you should know about 'PureComponent' is that when you inherit from PureComponent, React will delegate certain background tasks for you to make your life easier, for example, memory and speed optimizations.  For more information about the differences between the different types of components, I recommend reading this.

Property initializers

Property initializers are the specific properties that your component will use.

    state = {
        values: '',
    };

If you look at a lot of older tutorials, you may see property initializers that like this:

constructor(props) {
    this.state = {};
    this._handleInputChange = this._handleInputChange.bind(this);
}

This format was the old way of declaring property initializers. As long as you are using an up-to-date version of Babel you can use the new format which is a lot nicer. Babel will transpile your code and add a constructor for you behind the scenes. The ES.next class properties proposal is currently in stage 3 - as of writing, which should add this to the language native.

Children

Children is a special prop that can be passed from the owners to the components. Anything you put between an opening and a closing component tag is placed inside the props.children prop. And you should use that as often as you can.

<div>
    {children ? <div>{children}</div> : null}
</div>

There are several upsides to using props.children rather than just passing content in via a custom prop you define yourself. Using Children means your code will resemble how regular HTML works. Passing content within as children, means you are free to pass in whatever you want. For example, if you wanted to render MyComponent and within some text inside of MyComponent. First, you declare your component tags, then you just add the HTML within it. As long as you add the {children} call within MyComponent render method anything you pass in will be rendered.

<MyComponent>
 <div> 
    hello <AnotherComponent />
 </div>
</MyComponent>

All the HTML within the MyComponents tags will automatically be contained within its children prop.

 

Lifecycle Methods

When you work with anything that inherits from React.Component, you will get access to several lifecycle methods. Each life-cycle method has a specific function and the get method will get called at various times during page load. The constructor will be called right at the start. ComponentDidUpdate will be called at the end. Aside from the mandatory render() method, when you inherit a react component you can choose which methods you want to override.

Render()

As you can guess, the render method is the area where you render the component, as seen below.

render() {
}

 

The really important thing to keep in mind when working with React is that render is called anytime a component's state or props change.  It is not simply called once on page and load and ignored.  In the lifecycle of a page request, it could be called a lot of times.  This is important to understand because poorly written code that causes constant repaints, will make your pages slow and sluggish.

componentDidMount()

ComponentDidMount is another example of a React lifecycle method.  For a full list of all the other ones, I suggest you take a look at react component.  ComponentDidMount gets triggered after the component has been inserted into the tree. Some example of things you might use ComponentDidMount for, include:

  • AJAX calls to get external APIs
  • Memorisation of data into state
  • Filter any of your components data

That concludes my introduction to the basics of a React component. 

Installing Node With NVM
Installing Node With NVM
Quick And Dirty Guide To Deploying Your React App
Quick And Dirty Guide To Deploying Your React App
Tips When Using JSX With React - It's All Javascript!
Tips When Using JSX With React - It's All Javascript!
What Makes Up A React Component?
What Makes Up A React Component?
FOUND THIS TUTORIAL USEFUL? PLEASE CONSIDER DONATING
FREE BOOK
Shit My Websites Down
DOWNLOAD NOW

Subscribe

Join us today and get instant access to FREE books

YOU ARE A LEGEND!

You just made.. THE LIST!

SUPPORT THIS SITE
CLICK AN AD!

WELCOME

Hi, I'm Jon, I write articles about creating and optimizing websites to help your business meet its goals. I am a technical architect and technology fanatic by profession. You can find out more about me by joining my newsletter.

Latest Posts
  • Umbraco V8 Fails To Load On Remote Server
  • How To Enable Optional Chaining Within Your Javascript Project
  • How To Call An API Within A React.js App
  • Quick And Dirty Guide To Deploying Your React App

© Jon D Jones