React Introduction: Components, JSX and Your First App

Imagine a notification bell in the corner of a page. When a new message arrives, the red badge must change from 2 to 3, the dropdown list must grow, and the page title should show the count. In plain JavaScript you would hunt for each of those DOM nodes and update them by hand, and sooner or later one of them gets forgotten. React exists to remove that whole class of bug.

What React is and why people use it

React is a JavaScript library for building user interfaces out of small, reusable pieces called components. A component is a function that returns a description of what should be on screen. You describe the UI for the current data, and React works out which DOM nodes need to change when that data changes.

This is called declarative programming. With plain DOM code you write imperative steps: find the element, set its text, add a class, remove a child. With React you write "given this data, the UI looks like this", and the library handles the steps. The trade-off is that you learn a few concepts (components, props, state) and add a build step, but in return big interfaces stay predictable as they grow.

React itself is only the view layer. Routing, data fetching and server rendering come from the surrounding ecosystem. Frameworks such as Next.js bundle those choices for you, while Vite gives you a lightweight starting point where you add them yourself. Both are good places to learn.

JSX: HTML-like syntax inside JavaScript

Components return JSX, a syntax that looks like HTML but is really JavaScript. A build tool converts each tag into a function call that creates a description of an element. You never need to read that output, but it explains why JSX has stricter rules than HTML.

1. A component must return a single root element. Wrap siblings in a <div> or in an empty fragment <>...</> if you do not want an extra node in the DOM.
2. Every tag must be closed. Write <img src="a.png" alt="" /> and <br />, never <img> on its own.
3. Use className instead of class, htmlFor instead of for, and camelCase for other attributes such as tabIndex and onClick.
4. Curly braces {} embed a JavaScript expression: a variable, a function call, a ternary, items.length. Statements such as if and for do not fit inside braces.
5. The style attribute takes an object, not a string: style={{ color: "teal", fontSize: 18 }}. The outer braces mean "JavaScript here" and the inner pair is the object literal.

Here is a profile card that uses variables, an expression and a method call inside JSX.

function ProfileCard() {
  const name = "Asha Verma";
  const role = "Frontend Developer";
  const skills = ["React", "TypeScript", "CSS"];

  return (
    <section className="card">
      <h2>{name}</h2>
      <p>{role}</p>
      <p>Skills: {skills.join(", ")}</p>
      <p>Years of experience: {2 + 3}</p>
    </section>
  );
}

export default ProfileCard;

Asha Verma            (heading)
Frontend Developer
Skills: React, TypeScript, CSS
Years of experience: 5

Create a project: Vite or Next.js

You need Node.js installed. The quickest route to a running app is Vite with the React and TypeScript template. If you plan to build a full website with routing and server rendering, Next.js is a sensible alternative.

# Option 1: Vite (client-side React, very fast dev server)
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

# Option 2: Next.js (routing and server rendering built in)
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

Local:   http://localhost:5173/    (Vite)
Local:   http://localhost:3000/    (Next.js)

In a Vite project the entry point is src/main.tsx. It finds the <div id="root"> in index.html and tells React to render your top-level component inside it. You rarely touch this file again, but it is worth reading once.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

StrictMode is a development-only helper. It runs some code twice on purpose to expose bugs such as missing cleanup in effects. It does nothing in production builds, so do not be surprised if a console.log prints twice while developing.

Your first component, composed into an app

Open src/App.tsx, delete the starter content and replace it with a small app that uses the ProfileCard above. Components can be used like HTML tags, and they can contain other components, which is how large UIs are built from small parts.

import ProfileCard from "./ProfileCard";

export default function App() {
  return (
    <main>
      <h1>Team directory</h1>
      <ProfileCard />
      <ProfileCard />
    </main>
  );
}

Team directory        (page heading)
Asha Verma            (card 1)
Frontend Developer
Skills: React, TypeScript, CSS
Years of experience: 5
Asha Verma            (card 2, identical for now)
...

Both cards look identical because the component has its data hard-coded. The next lesson, React Components and Props, fixes that by letting the parent pass different data into each card.

Common mistakes

• Returning two sibling elements. Symptom: the error "JSX expressions must have one parent element". Wrap them in a fragment <>...</>.
• Using `class` instead of `className`. Symptom: styles do not apply and the console warns about an invalid DOM property.
• Lowercase component names. Symptom: <profileCard /> renders nothing useful because React looks for an HTML tag with that name.
• Putting a statement in braces. Writing {if (isAdmin) ...} fails to compile. Use a ternary {isAdmin ? <Admin /> : null} or compute the value before the return.
• Calling a component like a function and defining one inside another. Define components at the top level of the file. A component declared inside another component is recreated on every render and loses its state.

How this shows up in interviews and real projects

Beginner interviews usually ask what JSX is, why the virtual DOM exists, and what the difference is between a component and an element. A solid answer is that JSX is syntax sugar for creating element descriptions, and that React compares the new description with the previous one to apply the smallest set of DOM changes. In real projects, almost everything you build is a tree of components like the one above, so fluency here pays off in every later lesson.

A small React project with a clear README is also a strong item for a resume. See how to write a resume that passes ATS for how to present projects, and browse open frontend jobs to see which React skills employers actually list.