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.
