Getting Started with React: Deconstructing JSX and Component Architecture

The Shift from Imperative to Declarative

If you are coming from a background of Vanilla JavaScript or jQuery, your mental model of web development is likely imperative. You tell the browser exactly what to do step-by-step: find this element, add this class, change this text content.

React changes the conversation. It introduces a declarative model. Instead of manipulating the DOM directly, you declare what the UI should look like based on a specific state, and React handles the heavy lifting of updating the DOM to match that state.

To bridge the gap between JavaScript logic and UI markup, React utilizes JSX. In this engineering log, we’re going to dissect JSX, understand why it exists, and build a modular component system suitable for a modern dashboard.

---

De-mystifying JSX: It's Just JavaScript

The biggest hurdle for developers new to React is often the syntax. It looks like HTML mixed into JavaScript, which violates the old separation of concerns (HTML for structure, JS for logic). However, in modern application development, logic and structure are tightly coupled.

JSX (JavaScript XML) is syntactic sugar. Browsers cannot read JSX. When you run a build process (like Vite or Webpack), a transpiler (Babel) converts JSX into standard JavaScript function calls.

The Transformation

Here is what you write in JSX:

const element = (
  <h1 className="greeting">
    Hello, Avnish
  </h1>
);

Here is what the browser actually receives after compilation:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, Avnish'
);

Understanding this compilation step is crucial. Because JSX compiles down to a regular JavaScript function call, you can treat it like any other object. You can pass it as an argument, return it from functions, and store it in variables.

---

Component Basics: The Building Blocks

In the world of AI automation and micro-SaaS, we don't build "pages"; we build systems composed of reusable units. These units are Components.

A React component is simply a JavaScript function that returns JSX. That’s it. There is no magic class inheritance required for functional components (which is the modern standard).

Structure of a Functional Component

Let's look at the anatomy of a component designed to display the status of an AI agent.

function AgentStatus() {
  const isActive = true;

  return (
    <div className="status-card">
      <h2>Data Scraper Agent</h2>
      <span>Status: {isActive ? 'Running' : 'Paused'}</span>
    </div>
  );
}

Notice the curly braces {}. This is how we escape back into JavaScript land within our JSX. Inside these braces, you can run any valid JavaScript expression.

---

The Build: Creating a Reusable 'System Card'

Let's move beyond theory. We are going to build a static version of a component that might exist in a SaaS dashboard. We will create a SystemCard component that takes inputs (props) and renders a UI card.

1. Defining the Props

React components communicate via props (short for properties). Think of props as the arguments you pass to a function. They flow one way: from parent to child.

const SystemCard = ({ title, uptime, serverLocation }) => {
  return (
    <div className="border p-4 rounded-lg shadow-sm">
      <h3 className="text-xl font-bold mb-2">{title}</h3>
      <div className="text-gray-600">
        <p>Server: {serverLocation}</p>
        <p>Uptime: {uptime}%</p>
      </div>
    </div>
  );
};

2. Implementing the Parent

Now, we can reuse this logic multiple times within a parent component, passing different data to each instance.

const Dashboard = () => {
  return (
    <section className="grid grid-cols-3 gap-4">
      <SystemCard 
        title="Auth Service" 
        uptime={99.9} 
        serverLocation="US-East" 
      />
      <SystemCard 
        title="Payment Gateway" 
        uptime={98.5} 
        serverLocation="EU-Central" 
      />
    </section>
  );
};

This illustrates the power of React. We defined the UI logic once in SystemCard and reused it indefinitely. If we need to change the styling of the cards later, we update one file, and the change propagates across the entire application.

---

Rules of the Road: JSX Gotchas

While JSX is flexible, it enforces a few strict rules derived from how JavaScript functions work.

1. The Single Parent Rule

A component must return a single parent element. You cannot return two sibling `divs` without wrapping them.

Wrong:

return (
  <h1>Title</h1>
  <p>Description</p>
);

Why? Because under the hood, this converts to `return React.createElement(...), React.createElement(...)`. A JavaScript function cannot return two values simultaneously.

Fix: Wrap them in a Fragment `<>...</>` or a `div`.

2. camelCase Attributes

Since JSX is closer to JavaScript than HTML, standard HTML attributes that conflict with JS keywords are renamed.

• class becomes className.
• for becomes htmlFor.
• onclick becomes onClick.

3. Closing Tags are Mandatory

In HTML, you might get away with leaving an <input> or <br> tag open. In JSX, every tag must be closed. Self-closing tags must end with a slash: <img src="..." />.

---

Conclusion: The Component Mindset

Mastering React starts with mastering the component mindset. You stop looking at a website as a "page" and start seeing it as a tree of nested components—headers, sidebars, cards, and buttons.

JSX is the tool that allows us to describe this tree expressively. By understanding that JSX is just JavaScript objects in disguise, you gain the confidence to manipulate the UI with the full power of the language. Next, we will dive into making these components interactive using State and Effects.