Learn Reaction 18: Introduction to Components

Components are the building blocks of a React app. They are somewhat similar to a JavaScript function you might define in a program. They are independent entities that make up the UI of your app and you can reuse them again and again.

In fact, you can define a component using classes or functions. Functional components are the most up-to-date technique, so that’s what I’ll show you in this lesson.

Creating a reaction component

Let’s start by updating our “Hello World” app from the first tutorial to use a React component. We will modify it in a way that allows us to greet someone specific instead of the whole world.

When React components are defined as functions, you can pass them a single called object argument props with all the required data. These functions will return a React element. Our helloElement from the previous tutorial it looked like this:

let helloElement = React.createElement('h1', {id: 'greeting', className: 'hello'}, 'Hello, World!');

We can convert it to a function that returns a React element using the following code:

function Greeting() {
    return React.createElement('h1', {id: 'greeting', className: 'hello'}, 'Hello, World!');
}

let helloElement = React.createElement(Greeting);

Opening the webpage in the browser will still show us the same old one Hello World! message because the message is hard-coded in the function.

Let’s modify it so that it accepts a prop object as an argument with all the information it needs.

function Greeting(props) {
    return React.createElement('h1', {id: 'greeting', className: 'hello'}, `Hello, ${props.name}!`);
}

let helloElement = React.createElement(Greeting, {name: 'Nitish'});

There is another way to create our component as shown below. However, keep in mind that a simple function call like this will only work if the Greeting the component has no hook (in this case it doesn’t). I would suggest sticking to the method above to create components.

function Greeting(props) {
    return React.createElement('h1', {id: 'greeting', className: 'hello'}, `Hello, ${props.name}!`);
}

let helloElement = Greeting({name: 'Nitish'});

Open the web page in a browser and you will see “Hello, Nitish!” instead of “Hello, World!”. We can say hello to anyone now.

Creating more complicated components

The code we have written so far to create the components is manageable. However, we have only defined a very simple component consisting of a single header element. In real life, you will have to create much more complicated layouts and using the above method to create components will no longer be feasible.

The following example creates another component that will demonstrate how cumbersome it can become to create complicated components with multiple children.

function Country(props) {
    return React.createElement('div', {
        className: "container"
    }, React.createElement('h2', {
        className: "country-name"
    }, `Country Name: ${props.name}`), React.createElement('p', {
        className: "capital"
    }, `Capital: ${props.capital}`), React.createElement('p', {
        className: "population"
    }, `Population: ${props.population}`));
}

let countryElement = React.createElement(Country, {name: 'United States', capital: 'Washington, D.C.', population: '332 million'});

let rootElement = document.getElementById('root');
ReactDOM.createRoot(rootElement).render(countryElement);

After updating the webpage, the markup in the inspection tab will look like the image below:

I used some CSS to make the component more presentable.

You can see the final result of executing the above code in a browser in the CodePen below. Try modifying the code to add another element to the component showing the US area.

Final thoughts

We were able to produce our component as we wanted. However, you can see that it required us to write a lot of code. Writing so much code to create simple components is error prone and will reduce productivity.

There are a ton of tools and libraries out there that can help you build a React app while writing a lot less code. The code for our component could also be significantly reduced by using JSX. We will learn this in the next tutorial.