Step-by-Step Guide to Rendering React Components

Step by step guide in rendering components

Alright. So I have babbled on what components are, how to keep them pure, and so on. However, I haven’t really gone over on how to render a component step by step.

So, today, we will do just that.

index.jsx

const MyComponent = () => {
 return <h1>Hello, React</h1>;
};

I also realized that I need to do this for myself. I got a memory of a Goldfish lately. LOL I blame the plague that I keep catching. Please stop coughing on strangers, besties!

Or else, people like me, who are as weak as a Victorian Child, will perish. Natural Selection is chasing after my butt…wait, a darn minute. Maybe Darwin would argue that I should perish to keep gene pool healthy, but to keep us on topic, I’ll digress.

index.html

React generates and inserts HTML into the webpage’s pre existing HTML container. For e.g. <div></div>

So, let’s create our index.html file first.

index.html

<html>
 <body>
  <div id="root">loading</div>
 </body>
</html>

The next step would be linking the JavaScript file. When you are using React, you usually do that within the <head> element.

index.html

<html>
 <head>
  <script src="./index.js"></script>
 </head>
 <body>
  <div id="root">loading</div>
 </body>
</html>

Then you need to specify the module type in the <script> tag. This is basically telling the browser that you are going to be using features such as imports and exports.

This is also required for React to work properly.

index.html

<html>
 <head>
  <script type="module" src="./index.js"></script>
 </head>
 <body>
  <div id="root">loading</div>
 </body>
</html>

And that is pretty much it!

Whenever you are working with React, you want to keep your HTML as simple as possible (KISS rule. Keep it simple, stup— silly!).

React renders the components which we will add inside the <div> element with the ID “root.” Then it would replace the loading placeholder later.

index.jsx

Now that your index.html is set up, what’s the next step?

After you have set up your basic HTML code, you are now going to switch into your index.jsx file to work on the React code.

Remember how we referenced the index.js in our HTML?

index.html

<head>
  <script type="module" src="./index.js"></script>
 </head>

This time, the file ends in .jsx because it contains both the JavaScript and HTML — JSX.

If you are a weirdo like me, and so deep into fandoms that you have 100% dishonoured your ancestors, you can think of it this way: HTML and JavaScript became your OTP aka One True Pairing.

index.jsx

const MyComponent = () => {
 
return <h1>Hello, React</h1>;
};

Now, here is the scary part and what people usually forget to do (lol I am “people”): we need to import the React package into our JavaScript file.

index.jsx

import React from "react";

const MyComponent = () => {
 return <h1>Hello, React</h1>;
};

Then, we will import the createRoot function from the react-dom/client package which renders our React components.

This function is what allows us to initialize a root in the DOM, where React manages and renders its components efficiently.

DOM aka Document Object Model — and not the NSFW term, my dearest spicy “BookTok” || Medium Fantasy Dark Romance & horror audience.

P.S. thank you for supporting my coding journey too and for reading my technical posts. May you find coding sexy as well.

index.jsx

import React from "react";
import { createRoot } from "react-dom/client";

const MyComponent = () => {
 return <h1>Hello, React</h1>;
};

The next step is to call the createRoot function and pass the reference to the <div> element as the parameter. Then we would save the returned value in a variable called root. This would give us control over rendering components within the specified DOM element.

index.jsx

import React from "react";
import { createRoot } from "react-dom/client";

const MyComponent = () => {
 return <h1>Hello, React</h1>;
};

const rootElement = document.getElementById("root");
const root = 
createRoot
(rootElement);

Of course, if we want to render something such as our component here, we need to call the render function on the newly created root object!

index.jsx

import React from "react";
import { createRoot } from "react-dom/client";

const MyComponent = () => {
 return <h1>Hello, React</h1>;
};

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render();

So what actually happened?

Well, React replaces the loading placeholder in our index.html inside the root element with the content from the MyComponent component―which displays, Hello React.

So, there we go! Our very first walkthrough on React. See? Like I promised, I would be holding your hand the whole way through (I’m also talking to future me who has a memory of a goldfish lol).

Few points to remember:

We import createRoot to set up the place where React will render our component
root.render purpose: it takes the component and displays it inside the root element
We use index.js instead of index.jsx because JSX is just syntax that gets translated into regular JavaScript during the build process. The build process converts JSX into JavaScript so the browser can comprehend and run the code

Reference: react.dev and my notes 😝💋

Implementing Dark Mode in React

We have previously talked about useState before. A great way to create CSS classes on the fly is to use state variable! Here is an example of how to create Dark Mode in React by using string interpolation to construct the individual classes based on the state variable mode. index.html index.jsx App.jsx App.css So, if…

January 29, 2025
Understanding React’s useState Hook

Buttons To use buttons, you can add the onClick event handler to handle clicks on the button. React also follows the camelCase unlike HTML/JavaScript; and to run the JavaScript, you add an embedded expression. App.jsx You can also run JavaScript directly inside the embedded expression. However, it is executed without clicking the button because the function is…

January 21, 2025
Understanding Props in React: A Comprehensive Guide

This content explains the concept of props in React, which allow data to be passed to components, making them dynamic. It covers how to access props as objects, pass multiple properties, and handle different data types. The importance of correctly rendering non-string values and using props in JSX is emphasized.

January 17, 2025
The Power of JSX: Combining HTML and JavaScript

JSX is a syntax extension for JavaScript that resembles HTML, used primarily in React to create components. It allows developers to write HTML-like code within JavaScript, enhancing readability and enabling dynamic web applications. With JSX, one can embed JavaScript expressions, making the integration of logic and UI layout seamless.

January 12, 2025
Organizing React Components for Better Code

The content discusses best practices for organizing React components in separate files for maintainability. It details the process of importing React, creating functional components, and exporting them. Additionally, it covers returning multiple elements and using named vs. default exports, emphasizing strategic organization for better code management.

January 11, 2025
Step-by-Step Guide to Rendering React Components

The content provides a step-by-step guide on rendering components in React. It emphasizes creating and linking HTML and JavaScript files, setting up the main component, and utilizing the createRoot function to manage rendering. The author injects humor while guiding readers through the essential concepts of React component rendering.

January 10, 2025
Introduction to React: Understanding the Basics

React is a JavaScript library for creating single-page web applications that dynamically update without page reloads. It organizes code into reusable components, akin to functions returning HTML-like JSX. This enhances development efficiency, as components can be reused, resembling custom HTML tags. Overall, React simplifies coding while improving functionality.

January 10, 2025
HTML Structure Explained: A Beginner’s Guide

The content discusses HTML, the foundational markup language for web development. It highlights its structure, including elements like tags and attributes. The post humorously reflects on the author’s learning journey while encouraging newbies by simplifying concepts like nesting elements and the importance of HTML in web design. It concludes with code examples.

January 9, 2025
Why Use Pure Functions in React Components?

Pure functions in JavaScript are self-contained and produce consistent results without affecting external variables or objects. They enhance clarity and maintainability in code, minimizing bugs. Unlike impure components that modify existing variables, pure components receive data as props. Understanding component relationships, like the React render tree and module dependency tree, further optimizes performance and structure.

January 9, 2025
React Components Explained: A Guide for Developers

This post analyzes React components, highlighting their crucial role in creating dynamic user interfaces. It details the types of components, including functional and class components, and explains props and state. Additionally, it covers lifecycle methods and emphasizes the importance of reusability and composition in building complex applications effectively.

January 8, 2025

Step-by-Step Guide to Rendering React Components

Step by step guide in rendering components

index.html

index.jsx

So what actually happened?

Few points to remember:

Implementing Dark Mode in React

Understanding React’s useState Hook

Understanding Props in React: A Comprehensive Guide

The Power of JSX: Combining HTML and JavaScript

Organizing React Components for Better Code