One awesome feature about React is that, it helps us to define the individual building blocks of our application, without the need to clutter every section in one file.

These building blocks are what is termed as Components.

In this post, I attempt to explain what components are and how to create one.
Let's get started.

What Are Components ?

Components help you divide the user interface of your app into small pieces that are independent and reusable.

It is basically a blueprint or template that allows you to define a section of the user interface (UI) of an app. Components can be seen as JavaScript functions: they accepts some inputs, that we call props (properties) and then return some React elements ( these look like HTML elements ) which basically describe what should appear on your screen and how a particular area of your user interface should look like.

These "HTML-like" elements are special JavaScript syntax called JSX. JSX allows us to describe our interface in a syntax very close to the HTML you are used to.

Since components are the building blocks of your web application, you can for instance segment your web app into the following components:

Navigation Component
Content Component
Sidebar Component
Footer Component

Class and Functional Components

Now that we have understood what components are, let's proceed to create one. There are two ways of creating React components:

Functional Components
Class Components

Functional Components

Let's now look at how to create a functional component. The simplest way to create a component is to describe a JS function.

function Welcome(props){
 return <p>Welcome {props.userName} to the React Tutorials</p>
}

The above function represents a complete component ( piece of your UI) because it accepts a props ( basically an object argument containing some data or information) and then returns a React element which makes use of the data or information from the props.

When the component above is rendered using ReactDOM.render() function, the component above will display a paragraph , welcoming the user to site. The props.userName will get the value of the userName attribute from the props object and display it dynamically on the site. Don't worry if it is confusing, we will talk more about props in our next post. For now, just see props as a way to display dynamic content in our template (component)

Creating a functional Component

The simplest approach is to use the normal method of creating JS functions. The word function followed by the name of the component ( by conversion initial character begins with an upper case).
Alternatively, you can also use ES6 arrow function expression

Welcome= (props) => {
    return <p>Welcome {props.userName} to the React Tutorials </p> ;
}

Within the pair of curly braces { }, you write the React elements you want to display when that component is rendered. All the React elements should be written after the render keyword
The React elements can be the usual HTML elements like h1, p, input tags etc
Adjacent (or additional) React elements should be wrapped in a

tag, else, it would not be rendered.

The below is another example of how to create a Welcome Component

function Welcome(props) {
    return (
        <div>
            <h1>Learn React Components</h1>
            <p>Welcome {props.userName} to the React Tutorials</p>
        <div/>
    );
}

Once defined, the component can be used in the same JS file if you wish or imported into the root component. If you want to use the component in another file, you will first export it , then import the component in the JS file you want to use it.

For this instance, we import the component in the same JS file.

import React from "react";
import {render} from "react-dom";

function Welcome(props) {
    return (
        <div>
            <h1>Learn React</h1>
           <p>Welcome {props.userName} to the React Tutorials</p>
        </div>
    );
}

const root = document.querySelector("#root");

ReactDOM.render(<Welcome />, root);

Displaying The Component

To display the component, you will use the ReactDOM.render() method, we then write the name of the component you created in an angle bracket.

ReactDOM.render(<ComponentName />, root)

This will display that information or elements you defined in the component on the browser window of the web app.

In Conclusion

When you define a component , it becomes like block or section of your web app, these component can be used anywhere on your app, without the need to write it again. This saves you a lot of development time. For instance you can define a side bar component, and anywhere you feel the need to use a side bar , all you have to do is to reuse the component you have defined

In conclusion, Components are basically JavaScript Function that renders some React elements on your web app. It accepts props which helps you display some dynamic content on your app

Components let you split your UI into independent components. There are two main ways of creating components: Function and Class based Components

Hope this article was insightful, will very much like to read your feedback.

In my next post I take you through props and how to use it.

Coding Diaries