React Components Simplified : The Complete Beginner’s Guide

I expect that you came across this blog to understand the basics of react components. As a beginner React developer its very important to know the base of the react-which is React components. Please go through complete article and I can assure you that by end of it. you will have solid understanding of React components.

Let’s dive into the ocean. 🥽

Introduction

React manages the complex UIs and making DOM manipulation much easier. Visitor often perceive a React website as a multi-page website, but in reality, React creates it as a single page application. Its simply a matter of rendering different components within that single page. This powerful rendering feature of React gives users a feeling that they are nevigating from one page to another. 😂

Creating and Managing such complex UI within single page is made possible by React components.

Let’s go and take a look inside the components. 🚀

What is React Components

As we learned in HTML, a website consist of multiple blocks – like a header, content area, footer, sidbar and more. These blocks comes together to create a complete and fully functional website.

In above mentioned image you can see the basic structure of the website home page which consist of multiple blocks. This is how we structure our html code and in blocks.

To explain it simply, each block from the image above can be a component — or it can be made up of multiple smaller components that together form one specific block.

So, to better understand: a page consists of multiple components, and these can also include nested components.

What do we mean by nested components? Let’s look at the diagram below to understand this more clearly.

The above diagram clarifies that each component can have multiple nested components, and this is what makes React a powerful UI library for building fully functional single-page websites.

I know you’re curious to see how these React components are written in code 🤓 — so let’s dive into it now!

React Components in code

By now, you must have understood that React is written in JSX, which allows developers to write HTML-like code directly inside JavaScript.

This breaks away from the traditional coding style where HTML and JavaScript were kept in separate files. See? React just made everything easier! 😄

Let’s take the example of a CompanyInfo component, which is created inside the Footer. Now, let’s create this component in a JSX file.

File name – CompanyInfo.jsx

Not sure what everything in this file means? 😵‍💫 No worries — let’s break it down into smaller pieces to understand it better.

import React from 'react';

const CompanyInfo = () => {

  return (
    <div className="company Info">
      <img src="logo.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed   do.</p>
      <button>Know more</button>
    </div>
  );

};

export default CompanyInfo;

Import statements

Since this is an independent file named CompanyInfo.jsx, we need to import a few required things. Also, the import statements should always be placed at the top of the file.

Here’s an example of an import statement:

import React, { useState } from "react"; //import react and hooks
import "./index.css";  //import CSS file
import { TrashIcon } from "@heroicons/react/24/outline"; // third party icons file
import CTAButton from "./CTAButton"; //another Component

In the import section, we can have multiple required imports.

As you can see in the example above, we’ve imported another component into our CompanyInfo component. This is how we interlink components and create nested components in React.

Don’t worry — we’ll dive deeper into this later in the article.

Creating Function

Here we go — we’re now creating a component! A component is nothing but a JavaScript function.

You can write it as a named function or an arrow function, depending on your preference — there’s no restriction. However, it’s always recommended to keep the function name the same as the file name to improve readability.

This function returns JSX code, which is basically a combination of JavaScript and HTML.

The most interesting part? This function can accept arguments, and they’re called props.
Props are one of the core concepts in React.

👉 To learn more about props, [click here].

return()

This could be the most confusing part, but just remember: a component is essentially a JavaScript function. When it’s called, it must return HTML code, which is written inside the component.

To render the HTML, the function needs to return it. If we don’t return anything, the function will return undefined, and nothing will render on the UI.

So, to render the HTML inside a component, returning it is mandatory.

HTML inside javascript function

We’ve seen that a component (which is a function) must return HTML.

This HTML is written directly inside the function using JSX. But there’s one important rule you need to follow:

return(
<div>
<h2> Company Information </h2>
<p> All information about the company</p>
<button> Know More </button>
</div>
)

If we try to return multiple <div> elements (or any multiple HTML elements) without wrapping them inside a single parent element, React will throw an error.

To avoid this, you must wrap all the elements inside one parent tag.

But what if you don’t want to use an extra <div> just for wrapping?
In that case, you can use <> </>, which is called a Fragment.

A Fragment lets you group multiple elements together without adding an extra node (like a <div>) to the DOM.

Export Component

The export keyword is mandatory when creating a component in a separate .jsx file.

Since each component is typically created in its own file, we need to export it so that it can be used in other components or in the main React component file.

Without exporting it, we won’t be able to import or use the component elsewhere in our React app.

React Basic File Structure

So, let’s understand React’s basic structure.

Before we dive in, try to recall how basic web development works using plain HTML, CSS, and JavaScript. In traditional web development, we link the CSS and JavaScript files to the index.html file.

In React, the concept is quite similar — but with a slightly different approach.

If you check the index.html file in a React project, you’ll notice it contains only one <div> element, and the main JavaScript file is linked using a <script> tag.

This <div> acts as the root element, and React injects all the content dynamically into it using JavaScript.

The main game is played by the main.jsx file, which renders all the components into the root <div> of the index.html file.

To understand how components are linked in React, it’s crucial to know how React connects the index.html file with main.jsx, and how it renders all the components into a single root <div> in the HTML file.

In the main.jsx file shown below, React renders a component called <App />. It selects the element with the id="root" from the index.html file and injects the component inside it.

The main.jsx file can contain multiple components. However, if you include more than one component, they must be wrapped inside a Fragment (<> </>) or a single parent element — otherwise, React will throw an error.

Suppose the App component is only responsible for displaying “Hello World!” on the screen — here’s how the App.jsx file should be written:

In the above example, the App component is known as a functional component.

Now, let’s dive deeper into React components 👇

How React Components Are Linked to Other Components

Linking all React components together is essentially a game of rendering.
Suppose in the above <App /> component, we want to insert the CompanyInfo component — here’s how it would look:

import CompanyInfo from './CompanyInfo';

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
      <CompanyInfo />
    </div>
  );
}

export default App;

The main important points to understand while nesting components:

• We can see we have injected React component <CompanyInfo />. It will looks like self closed html tag.
• The most important is we need to import the component which we need to use here, in above emaple we linked component with statement – import CompanyInfo from ‘./CompanyInfo’;
• We can import multiple components and we can nest them inside <App /> component.
• This is the core idea of component-based architecture in React

What means Functional React Components

As we saw in the previous example, every React component returns JSX to display content on the UI.
A component that returns JSX like this is called a functional component.

Functional components are the modern and simpler way to write React components.
Earlier, React used class-based components, but they came with several limitations and were often harder to write and manage.
That’s why functional components are now the most preferred and widely used approach in modern React development.

Important Points about Functional React Components

• Functional components are easy to read and write.
• It supports React Hook (like useState, useEffect etc)
• It provides better performance with less code
• Functional React components use javascript function.

I believe that by now, you have a clear understanding of the React project structure and how to create components within a React application.

🚀 Follow me on Twitter for more tips and updates : @ravindra5k

💡 Check out my other articles:

• Everything You Need to Know About JavaScript Functions – Beginner to Pro
• 10 Tips to Write CSS Faster and More Efficiently for New Web Developers
• React Fiber VS Virtual DOM: How React Optimizes UI Updates
• Type conversion VS Type coercion in JavaScript
• JavaScript Data Types in Web Technology for Begginers
• How to Create an Image Gallery with Filter Buttons in Just 10 Minutes!
• Create Website Slider with HTML, CSS & Swiper.js!