Component types in React

React is an ever changing library, and this description will probably get outdated fast enough without getting an update ever again.

This is however React Components as of Easter 2019.

The three component types

There are 3 primary ways to create Components in react, in order of occurrence:

• createClass Components
• ES6 class Components
• Function Components

React.createClass Components have largely fallen out of favor, and are not used a lot anymore. We'll therefore only cover the latter two Component types.

ES6 class Components

'ES6 class Components', or just 'class Components' are the type of Component you will find a lot of tutorials about on the internet. Until recently they were the only way to keep state in your React applications.

These Components utilize the still quite new (2015) way to create classes in JavaScript. They rely a bit on object oriented methods of programming, but not to an extremely large extent.

As an example, let us create a simple class Component:

// A very basic class Component button
class Button extends React.Component {
	render() {
    	return (
			<button>Click me!</button>
		);
	}
}

This Component is quite basic, and will just render a button.

State in class Components

Let us add what class Components are known for: state! We'll use a slightly new syntax, which you can read about here // TODO: Provide link Don't be thrown off by that it may look slightly different than what you have seen other places :)

// A button that keeps track of being clicked
class Button extends React.Component {
	state = {
		clicked: false,
	};
	
	setClicked = () => {
		this.setState({ clicked: true });
	};

	render() {
    	return (
			<button onClick={this.setClicked}>
				{ this.state.clicked ? 'I'm clicked!' : 'Click me!' }
			</button>
		);
	}
}

In this case we set an initial state, where the button is not clicked. We describe a function to change the state on the class, which will set state.clicked to true if it is run. We also describe what text will be displayed inside the button depending on the state of the Component.

this

One of the things to note about class Components is the use of this. In JavaScript classes, this has to be used to reference any method or variable defined in the class/object. As an example; we define the setClicked method on the class, and we have to reference this.setClicked when we use it.

this.setState() and other inherited methods

The React.Component class has a lot of nifty predefined methods on it. We'll not go through all of them here, there may be an article about them in the future here // TODO: Provide link?

setState()

setState may be the most used, and simplest method on React.Component. It is used to change the state of a React class Component.

Because of how React works, it is not advised/possible to change the state of a Component by assigning to this.state directly.

// DO:
this.setState({ foo: 'bar' });
// DON'T
this.state.foo = 'bar';

This is because React uses the setState() method to to trigger a re-render. This means that the render() method will run after setState() is finished, and the HTML will be automatically updated without any mow work!

Function Components