ReactJS – Components

This is the second part of our ReactJS Tutorial.

In this part we would learn about components. As you know, for best learning experience, follow up with the corresponding video lesson and demo. We’ll cover the following:

1. What is a React Component?
2. Stateless Functional Component
3. Stateful Class Component
4. Comparing Functional and Class Components
5. Exercise
6. Watch the Video Tutorial on Components

1.  What is a Component?

A React component is simply a part of the user interface. For example, a typical application may be made up of: header, body, footer and sidebar.

This is shown below

Also note that a component can be nested within other components. Also a component can be reusable.

So how does this relate to the files in the React folder structure?

A component’s code is normally placed in a javascript file. For example, the App component is placed in the App.js file. So in summary, a component is represented by the code inside a .js file. Please open the App.js file and take a look at the content of the file.

Let’s now talk about the two types of components:

2. Stateless Functional Component

A functional component is simply a JavaScript function. It returns the html code that describes the UI. For example, the code below is a component

function Welcome(props){
  return <h2>Welcoe, {props.name}</h2>;
}

This function when executed, renders  “Welcome, Kindson” to the browser. But we’ll talk about props in next part. This is just for you to know that a functional component is just a JavaScript function.

A functional component recieves properties (known as props) and returns a html code the describes the UI.

Let’s do a demo, to create  functional component

Step 1: Create a file called in the src folder (I named it Welcome.js)

Step 2: Write the following function inside this file

import React from 'react'

function Welcome(){
    return <h1>Hello Kindson</h1>
}

export default Welcome

Step 3: Open the App.js file and write a line to import the Welcome function

Step 4: In the render method of the App component, write a custom html tag <Welcome></Welcome> or <Welcome />

Part of the content of the App.js file is shown below

//**** other imports *****
import Welcome from './Welcome.js';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Welcome></Welcome>
//*** other codes *****

Step 5: Save and refresh the page the see the outpup

Step 6: Rewrite the Welcome component using arrow function. It’s shown below

const Welcome = () => <h1>Welcome Kindson!</h1>

3. Stateful Class Component

A class component, however are regular ES6 classes that extend the component class from the React library. A class component must contain a render method, which in turn returns html. For instance, the code below is an equivalent class component of the above example. A class component can maintain a private internal state.

class Welcome extends React.Component {
    render(){
        return <h1>Welcome, {this.props.name}</h1>;
    }
}

Quiz: take a look at the App.js. Is it a Class or of Functional component?

We would simply write a class component which is equivalent to the functional component we wrote. We call it Hello.js. See the code below

import React,{Component} from 'react'

class Hello extends Component {
    render(){
        return <h1>Class Component</h1>
    }
}

export  default Hello

Also import this component into the App.js file and display the text in the browser

4. Between Functional Component and Class Component

According to Codevolution, here are some things to know about functional and class components:

Note: As a new feature, state can also be used in Functional component by means of Hooks

I recommend you watch to the video for more clarification.

Exercises

1. Create a folder named components in the src directory
2. Move the two components we created into this folder
3. Rewrite the import statements to reflect the change
4. Test the application.