Introduction

Welcome to Day 4 of my web development journey!
For the past few days, I’ve been diving into ReactJS after completing the fundamentals of HTML, CSS, and JavaScript.

I'm sharing my learning process in public to stay consistent and hopefully help others who are on a similar path.

Here’s what I’ve covered so far:

Day 1:
→ What is React?
→ Why React?
→ React Element
→ JSX
→ Babel
Day 2:
→ Source Map
→ How to Render Multiple Elements using an Array
→ Basics of React Component
Day 3:
→ Props
→ Practice React Components by building small UI blocks

Let’s break down each of these topics below 👇

What is React?

React is a JavaScript library for building user interfaces, especially SIngle-Page Applications where we need a fast, dynamic user experiences.
React is declarative programming , means we describe what we want UI to look like, and react takes care of updating the actual DOM.

Why React?

Here are some key reasons why React is useful and widely adopted:

Component-based Architecture:

Breaks UI into small, reusable components.
Easier to maintain & scale.

Virtual DOM for faster updates:

React uses a Virtual DOM to detect and apply only the changes needed in the actual DOM.
Improves speed & efficiency compared to traditional DOM manipulation.

Single Page Application(SPA):

Ideal for apps that need fast,smooth user experiences without full page reloads.

One-Way Data Binding:

Data flows in a single direction(from parent to child).
Makes debugging and tracking state easier.

React Element:

A React element is the smallest building block of react application.
It is plain Javascript object.
React Element are not real DOM elements but description of what the DOM should look like.
React uses these descriptions to create and update actual DOM efficiently using it's virtual DOM system.

How to create a React Element?

Syntax : React.createElement(type,props,children)  
Here,
type     - HTML Tag or React Component  
props    - attribute or optional props object  
children - content inside the element

const h1 = React.createElement('h1',{className: 'heading'},'Hello React');
Here, h1 is javascript object

How to render a react element to DOM?

import {createRoot} from 'react-dom/client';
const root = createRoot(document.querySelector('#root'));
root.render(h1);

JSX:

JSX stand for Javascript XML.
When building larger UI's using React.createElement(), It becomes hard to read, nested elements become messy.
JSX solve this problem by letting us write HTML-like syntax in JS.
It is a syntax extension for JavaScript that lets you write HTML-like code inside JavaScript — which React then transforms into React.createElement() calls behind the scenes.

const h1 = <h1>Hello World</h1>

Benefits of JSX:

HTML like syntax.
Can embed dynamic javascript - variables & expressions.
Clean Structure.
Reusability

const name = "ritik";
const h1 = <h1>Hello, {name}</h1>;
Here, h1 is a react element.

Babel:

Babel is a javascript compiler.
JSX is not understand by browser directly - this is where Babel comes in.
Transform JSX into React.createElement() calls.
Compiles modern javascript(ES6+) into code that older browsers can understand.

JSX:
const element = <h1>Hello World</h1>;

Babel compiles this to:
const element = React.createElement('h1',null,'Hello World');

JSX makes Writing UI easier, and
Babel makes it browser compatible.

Source Map:

A source map is a file that maps your transformed (compiled/minified/bundled) JavaScript code back to your original source code — like your .jsx or .js files.
This helps to debug the original code in the browser, even though the browser is actually running the compiled/minified version.

Why we need source map?

React projects use JSX and modern javascript(ES6+), which browser cannot understand directly.
So Babel compile our code before it reaches the browser.
But once it's compiled:
- Variable name changes
- Code is minified
- JSX becomes React.createElement(...)
- It's hard to read and debug
So, Source map fix this problem.
It tells the browser that this compiled code came from this original code.

How to render multiple elements:

Create an array of data(can be strings,objects or jsx).
Use .map() to loop over the array.
Return JSX for each item.
Add a unique key to each element.

// e.g. Rendering cards from object array.
const products = [
    {id:1,name:"iphone 13",price:799},
    {id:2,name:"samsung s22",price:699},
    {id:3,name:"oneplus 10",price:599}
];
function App() {
    return (
        <div className="container">
            {products.map(product => (
                <div className="card" key={product.id}>
                    <h3>{product.name}</h3>
                    <p>Price : {product.price}</p>
                </div>
            ))}
        </div>
    );
}

React Component:

A React Component is a javascript function that returns JSX.
A component is a reusable, independent piece of UI that can accept inputs (called props) and returns React elements that describe what should appear on the screen.

// Greeting.jsx
function Greeting(props) {
    return <h1>Hello, {props.name}</h1>;
}
export default Greeting;

// This is a functional component
// It accepts a props object and returns a react element(JSX).

Working Behind the Scenes:

We write JSX:

<Greeting name="ritik"/>

JSX gets transformed by babel:

React.createElement(Greeting, {name : "alpha"});
// type - the component Greeting
// props - {name : "alpha"}

React calls our component function:

// call component function
Greeting({name : "alpha"});
// and that function returns:
<h1>Hello, ritik</h1>
// which again becomes:
React.createElement('h1',null,'Hello, ritik');
// so here everything becomes a nested tree of React.createElement() calls

React builds a virtual DOM:

React takes this tree and builds a virtual DOM, a lightweight copy of the real DOM.

React compares and updates Real DOM:

React then compares the new virtual DOM to the prevous one using a process called reconcilliation.
If there's a difference, it updated the real DOM only where needed(this is why react is fast).

props:

props are read-only data passed from a parent component to child component.
This allow us to make components dynamic and reusable.

// parent component
import Greeting from "./components/Greeting";
function App() {
  return <Greeting name="ritik"/>
}
// child component
function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}
// we can destructure props
function Greeting({name}) {
  return <h1>Hello, {name}</h1>;
}

How I Built a Reusable Card Component in React:

A Card component is a small, reusable UI block that typically contains an image, title, and some text content. Think of it like the UI you see in online stores like Amazon or Flipkart.

Here's the code I wrote for the Card component:

// Card.jsx
function Card({ title, src, brand, price }) {
  return (
    <div className="card">
      <img src={src} alt={title} />
      <div className="card-content">
        <h3>{title}</h3>
        <p>{brand}</p>
        <p><b>${price}</b></p>
      </div>
    </div>
  );
}
export default Card;

Rendering the Component with Dynamic Data

// App.jsx
import Card from './Card';
function App() {
  return (
    <div className="container">
      {products.map(product => (
        <Card
          key={product.id}
          title={product.title}
          src={product.images[0]}
          brand={product.brand}
          price={product.price}
        />
      ))}
    </div>
  );
}

What i learned:
- How to break UI into components
- How to pass props
- How to render multiple elements using .map()
- How to structure clean and readable code

What's next:

I’m continuing this journey and will be:

Posting blogs every 3 days
Also learning DSA using Java — check out my DSA Journey Blog.
You can follow my journey on Follow me on X (Twitter) where I post regular updates.

Conclusion:

Today was all about reviewing what I’ve learned and reflecting on how React makes front-end development modular and maintainable. As I move forward, I’m excited to explore hooks, state management, and real-world projects.

If you're on a similar journey, feel free to reach out or follow along — we’re all in this together.

Day 4: React Elements vs Components Explained | My Web Dev Journey (ReactJS)