ReactJSJavaScriptFrontendWeb DevelopmentJSX

React.js Foundations: Building Fast, Scalable & Modern UIs (Part 1)

Step into the modern frontend landscape. Learn how React revolutionizes web development through component-based architecture, declarative UI, and deep dive into JSX and props.

July 2, 2026

25 min read

React.js Foundations: Building Fast, Scalable & Modern UIs (Part 1)

In the early days of the web, sites were mostly static collections of linked text documents. As user demands grew, we started utilizing vanilla JavaScript to manipulate the Document Object Model (DOM) directly. We wrote tedious code telling the browser exactly step-by-step how to find an element, create an element, change a style, and append it to the page. While this imperative approach worked for simple setups, it became an absolute nightmare to maintain when building modern, real-time apps like Facebook, Twitter, or Netflix.

Every time data changed, developers had to keep track of which parts of the interface needed to be updated manual-by-manual. Miss a single DOM update, and your application's UI fell completely out of sync with its data state, leading to broken buttons, ghost notifications, and critical runtime errors.

To solve this systemic friction, Facebook built and open-sourced React.js. React introduced a paradigm shift: instead of telling the browser *how* to modify the webpage step-by-step, you simply describe *what* the user interface should look like at any given moment based on your current data. React handles all the painful under-the-hood DOM manipulations automatically.

By adopting a declarative syntax and a rigid component-based architecture, React lets you break a complex layout into small, isolated, and completely reusable puzzle pieces. You write code once, test it once, and reuse it everywhere.

In this massive first part of our React trilogy, we are going to dismantle the black box. We will learn how to shift our brains from standard JavaScript scripting to declarative UI architecture. We will explore the inner secrets of JSX, master the lifeblood data systems known as Props and State, and write components that interact dynamically with your users.

// Your Very First React Functional Component

WelcomeCard.jsx

import React from 'react';

function WelcomeCard() {
  // A declarative functional component returning markup
  return (
    <div className="welcome-card">
      <h1>Welcome to Modern Frontend Development!</h1>
      <p>React makes building highly dynamic web applications absolute fun.</p>
    </div>
  );
}

export default WelcomeCard;

// Nesting Components Together

App.jsx

import React from 'react';
import WelcomeCard from './WelcomeCard';

function App() {
  return (
    <main className="app-container">
      <header>
        <nav>My Personal Dev Dashboard</nav>
      </header>
      
      {/* Reusing our isolated functional component child piece */}
      <WelcomeCard />
      <WelcomeCard />
    </main>
  );
}

export default App;

The Core Philosophy: Declarative UI vs Imperative Code

To truly understand why React reigns supreme, we must understand the difference between imperative and declarative programming models. Imagine you are entering a taxi cab. An imperative instruction sounds like this: 'Drive straight for 200 meters, take the second exit at the roundabout, turn left on Main Street, and stop at building 4B.' If a single street is blocked or a turn is missed, the entire operation crashes into a wall.

A declarative instruction, however, sounds like this: 'Take me to the central airport terminal, please.' You do not care which specific gears shift or which exact routes the driver selects; you simply declare your desired target state, and the system delivers it. This is exactly what React does for your user interfaces.

In traditional Vanilla JavaScript, you write imperative code. You search the entire DOM tree using document.getElementById, you track the element in memory, and you push updates manually. In React, you simply write code saying: 'When the user is logged in, show a dashboard profile; when they are logged out, show a clean login form.' React tracks the data state behind the scenes, calculates the visual differences using a blazing-fast Virtual DOM cache memory system, and modifies the physical browser page securely without dropping frame rates.

Demystifying JSX: The Marriage of JavaScript and HTML

When you look at a React component for the first time, you might experience syntax shock. You will see what appears to be raw HTML tags written directly inside your standard JavaScript return statements! This is not HTML—it is JSX, which stands for JavaScript XML.

JSX is a powerful extension of JavaScript syntax that allows you to write structural visual elements with full programmatic power. Behind the scenes, build tools like Babel compile every single line of your JSX markup into standard JavaScript function invocations called 'React.createElement()'. This means that writing a div tag in JSX actually generates a safe, structured JavaScript object under the hood.

Because JSX is fundamentally JavaScript expression logic, there are strict rules you must abide by. First, you cannot return multiple separate root tags side-by-side; everything must be wrapped securely within a single overarching parent container tag, or an empty tag system called a Fragment (<>...</>). Second, you cannot use reserved JavaScript keywords for HTML attributes. For example, instead of using 'class', you must always declare 'className'. Instead of 'for' on labels, you must use 'htmlFor'.

// Evaluating Expressions Live Inside JSX

UserGreeting.jsx

import React from 'react';

function UserGreeting() {
  const currentUsername = "Puneet Tiwari";
  const loginSessionActive = true;
  
  return (
    <div className="auth-wrapper">
      {/* Using curly braces to execute dynamic JavaScript expressions inline */}
      <h2>Hello, {currentUsername.toUpperCase()}!</h2>
      <p>Today's Current Date: {new Date().toLocaleDateString()}</p>
      
      {/* Evaluating a conditional expression directly inside your markup */}
      <div className="status-badge">
        Account Status: {loginSessionActive ? "🟢 Active Session" : "🔴 Disconnected"}
      </div>
    </div>
  );
}

// Using Fragments to Avoid Markup Bloat

ColumnLayout.jsx

import React from 'react';

function ColumnLayout() {
  return (
    // React.Fragment short syntax avoids injecting useless extra structural wrapper div tags
    <>
      <td>Data Engineering Node</td>
      <td>Frontend Component Node</td>
      <td>Core State Controller</td>
    </>
  );
}

Now that we understand how components render structural markup via JSX, we need a way to pass information between them. Components without communications are static and useless. This brings us directly to the concept of Props.

Props is short for 'Properties'. Think of props as custom configuration parameters passed into a component, exactly like passing arguments into a standard JavaScript function. Props are strictly read-only (immutable). A child component can read the props it receives, but it must never modify them directly—ensuring a predictable, single-direction unidirectional data flow from parent down to child.

But what happens when data *needs* to change dynamically based on user interaction, like ticking a clock or tracking clicks? That is where State enters the picture. State represents the private, local memory of a component. When local state updates, React automatically wakes up, runs a re-render cycle, and pushes changes to the user's screen instantly.

// Passing and Receiving Custom Props Data

ProductItem.jsx

import React from 'react';

// Destructuring incoming custom props object directly in function parameters
function ProductItem({ title, purchaseCost, inStock }) {
  return (
    <div className="product-card">
      <h3>Item Name: {title}</h3>
      <p>Price: ${purchaseCost}</p>
      <button disabled={!inStock}>
        {inStock ? "Add to Shopping Cart" : "Out of Inventory"}
      </button>
    </div>
  );
}

// The Parent Orchestrating Data Flow

StoreFront.jsx

import React from 'react';
import ProductItem from './ProductItem';

function StoreFront() {
  return (
    <section className="catalog">
      <h2>Available Gadgets</h2>
      {/* Injecting static configuration configurations down as unique attributes */}
      <ProductItem title="Mechanical Keyboard" purchaseCost="129" inStock={true} />
      <ProductItem title="Ergonomic Mouse" purchaseCost="89" inStock={false} />
    </section>
  );
}

// Managing Interactive State via Hooks

InteractiveCounter.jsx

import React, { useState } from 'react';

function InteractiveCounter() {
  // Declare state variable 'tally' and its dedicated setter function 'setTally'
  const [tally, setTally] = useState(0);
  
  function triggerIncrement() {
    // Always use the setter function so React knows it must re-render the view
    setTally(tally + 1);
  }
  
  return (
    <div className="counter-pod">
      <p>Live Action Registrations: <strong>{tally}</strong></p>
      {/* Attaching synthetic event listener directly to the element */}
      <button onClick={triggerIncrement}>
        Record Click Action
      </button>
    </div>
  );
}

Summary

What a massive win! You have successfully crossed the threshold into modern component-driven development. In this first part, you broke away from messy, imperative vanilla script tracking and moved into clean, declarative structures. You mastered how JSX turns into programmatic JavaScript objects, how data cascades predictably using immutable Props, and how components store local memory using the useState hook. In our upcoming guide (Part 2), we will take this knowledge and build massive structural applications—diving deep into tracking complex component lifecycles, using the useEffect hook for side effects, rendering complex loops of lists safely with unique tracking keys, and capturing clean user inputs using forms.

Written By

Puneet Tiwari

Full Stack Developer