In this tutorial, I will walk you through the basic features of a component built with ReactJS. After reading this article, you should have a good understanding of how to start building and designing your components using React. Let us start off looking at a skeleton component. The code below defines the makeup for a PureComponent:
Let us break this code down, one step at a time. First, the majority of ReactJS components that you will create, will inherit from either React.Component or PureComponent. NOTE This guide was written before hooks were released in React v16. You will likely be better off creating a functional component now!
PureComponent is a special React component that comes with the framework. The important thing you should know about 'PureComponent' is that when you create a component and inherit from it, the React handler will delegate certain background tasks for you automatically. To make your life easier, things like memory and speed optimizations will be made for you. For more information about the differences between the different types of components, I recommend reading this.
Property initializers
Property initializers are the internal properties that your component will use. Property initializers are sued for managing the internal state for a component:
There is an alternative way to define properties within a component. If you look at a lot of older tutorials, you may see properties being defined like 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 JSX that is added between the components opening and the closing tag is automatically available inside the component as a property called children within the props collection.
There are several upsides to using props.children rather than just passing data directly into a component via custom props. Using children will mean that your code will resemble how regular HTML works. This makes the code easier to read and understand. Passing content within as children, means you are free to pass in whatever you want. If you only render things via props then your component will be limited in its usefulness. You will need to design everything upfront rather than allowing it to be flexible. To pass data down as children, declare your component tags somewhere in your application. Next, add the JSX you want to render in between its tags. Within MyComponent add this code {children} within the render method and the passed in JSX will render like this:
All the JSX passed into MyComponents will be rendered on screen 🔮
Lifecycle Methods
When you work with anything that inherits from React.Component, you will get access to several lifecycle methods. Each lifecycle method has a specific function. Each lifecycle method will get called at various times during page load. The constructor will be called when the component is accessed for the first time. ComponentDidUpdate will be called at the end of the pipeline after the render method has finished. Aside from the mandatory render() method, when inheriting from PureComponent you can choose which methods you want to override. You do not need to add them if you do not need to use them!
Render()
As you can guess, the render() method is the area where you render the mark-up. This is where you put your JSX, as seen below.
The really important thing to keep in mind when working with React is that render() is called every time a component's state or the passed in props change. It is not simply called once when the component is first rendered and then never called again. In the lifecycle of a page request, it could and likely will 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 React lifecycle method. For reference, more information on life-cycle events can be found here. componentDidMount() gets triggered after the component has been inserted into the virtual DOM. 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
These parts make up the anatomy of a React component. Understanding these concepts is key when building components using ReactJS. That concludes my introduction to the basics of a React component. Happy Coding 🤘
