React Part 1: What Is React and How to Build Your First React App

What you should know first: this is the first part, so no earlier part is needed. You should be comfortable with basic HTML, CSS and JavaScript (variables, functions, arrays, objects and arrow functions). If promises and async code still feel new, keep our JavaScript Promises guide open for later parts.

React is the most popular way to build user interfaces for the web, and it shows up in a huge number of frontend job posts in India and around the world. But what exactly is it, and why do so many teams choose it? In this first part of the React series you will learn, in simple words, what is React, the three ideas it is built on (components, JSX and state), and how React updates the page for you. Then you will build and run your first React app with Vite, look at every file it creates, and write your own components.

What is React? (simple definition)

React is a JavaScript library for building user interfaces. It was created at Facebook (now Meta) and released as open source in 2013. Today it is maintained by Meta together with a large community, and it powers apps such as Facebook, Instagram, WhatsApp Web, Netflix and many Indian startups and product companies.

Notice the word library. React focuses on one job, the UI (what the user sees and clicks). It does not decide how you route between pages, talk to a database or deploy your app. That is why you will often hear about React together with other tools, like Vite for development, React Router for pages, or Next.js as a full framework. We will meet all of them in this series.

The official documentation at react.dev is excellent and free, and this series follows the same modern style it teaches: function components and hooks (no old class components).

The problem React solves

Imagine a simple counter: a line of text and a button. In plain JavaScript you have to find the elements, listen for clicks, change a variable and then remember to update every place on the page that shows that variable. That style is called imperative: you give the browser step-by-step orders.

For one counter this is fine. For a real app (a shopping cart, a chat window, a dashboard with filters) there are hundreds of pieces of data and thousands of elements. Forgetting a single update leads to bugs like “the cart icon says 3 items but the cart page shows 2”.

React flips this around. You write a function that says “for this data, the screen looks like this”. When the data changes, React calls your function again and updates the page for you. This style is called declarative, and it is often written as UI = f(state). Compare the two versions of the same counter:

<!-- index.html: a counter in plain JavaScript -->
<p id="label">Clicked 0 times</p>
<button id="btn">Click me</button>

<script>
  let count = 0;
  const label = document.getElementById("label");
  const btn = document.getElementById("btn");

  btn.addEventListener("click", () => {
    count = count + 1;
    // We must remember to update the page ourselves
    label.textContent = "Clicked " + count + " times";
  });
</script>

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  // We only describe the UI. React keeps the page in sync.
  return (
    <>
      <p>Clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </>
  );
}

Click the two tabs to compare the same counter written in plain JavaScript and in React.

The React version has no getElementById and no manual textContent update. You only say what the paragraph and button should show for the current count. If you add a second place that shows the count, it stays correct automatically.

The 3 core ideas of React

Almost everything in React comes back to three ideas. Each one gets its own part later in this series, so for now just get the big picture:

There is one more word you will see everywhere: hooks. Hooks are special functions whose names start with use, such as useState and useEffect. They let a function component remember state, run side effects and more. (If you are curious, we already have a deep dive on the useEffect hook, which Part 8 builds on.)

How React updates the page

When state changes, React does not reload the page and does not rebuild everything. It follows four quick steps:

1. Trigger: something calls a state setter, for example setCount(count + 1) after a click.
2. Render: React calls your component function again. It returns a new description of the UI (React elements).
3. Compare: React compares the new description with the previous one. People often call this the virtual DOM diff; React’s own word is reconciliation.
4. Commit: React changes only the real DOM nodes that are different. Everything else is left alone.

React, frameworks and React Native

Beginners often get confused by all the names around React. Click the tabs to see how they fit together:

For this series we use React with Vite. Vite is a fast build tool and development server. It starts in milliseconds, reloads the browser instantly when you save a file (this is called Hot Module Replacement, or HMR), and creates an optimised build for production. The old create-react-app tool is deprecated, so do not use it in new projects.

Create your first React app with Vite

You need two things installed: Node.js (which also gives you npm) and a code editor such as VS Code. Vite 8 needs Node.js 20.19 or newer, or 22.12 or newer. Download the LTS version from nodejs.org if node -v shows an older version.

Open a terminal and run these commands. The output below is real, from creating the project for this post:

# 1. Check Node.js (Vite 8 needs Node.js 20.19+ or 22.12+)
$ node -v
v22.22.0

# 2. Create a new React project with Vite
$ npm create vite@latest my-first-react -- --template react

create-vite v9.3.1
|
o  Scaffolding project in ~/projects/my-first-react...
|
—  Done. Now run:

  cd my-first-react
  npm install
  npm run dev

# 3. Install packages and start the dev server
$ cd my-first-react
$ npm install
$ npm run dev

Open http://localhost:5173 in your browser and you will see the Vite + React welcome page with a working counter. Keep the dev server running while you work: every time you save a file, the browser updates in under a second.

Project structure tour

Here is what Vite created. You will spend most of your time inside src/:

Now look at the three files that connect everything. They are exactly as Vite generated them:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my-first-react</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

These three files come from the Vite template exactly as generated. Click the tabs to read each one.

Two details worth knowing:

• createRoot(...).render(...) comes from react-dom/client. react is the core library, and react-dom connects it to the browser’s DOM. (React Native uses a different renderer for mobile.)
• <StrictMode> is a development helper. It runs some extra checks and may call your components twice in development only to help you find bugs. This is expected; it does not happen in production.

Write your first components

Let us replace the welcome page with our own small app. Delete src/App.css, then create src/Greeting.jsx and replace src/App.jsx and src/index.css with the code below:

// A component is just a function that returns JSX (UI).
export default function Greeting({ name }) {
  return <p className="greeting">Namaste, {name}! 👋</p>;
}

import { useState } from "react";
import Greeting from "./Greeting.jsx";

export default function App() {
  // count = current value, setCount = function to change it
  const [count, setCount] = useState(0);

  return (
    <main className="app">
      <h1>My First React App</h1>
      <Greeting name="Asha" />
      <Greeting name="Rahul" />

      <button onClick={() => setCount(count + 1)}>
        Clicked {count} {count === 1 ? "time" : "times"}
      </button>
    </main>
  );
}

$ npm run dev

> my-first-react@0.0.0 dev
> vite


  VITE v8.3.5  ready in 254 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

body { font-family: system-ui, sans-serif; margin: 0; background: #0b1020; color: #e8ebff; }
.app { max-width: 480px; margin: 60px auto; text-align: center; }
.greeting { font-size: 1.2rem; color: #a99bff; }
button { font-size: 1rem; padding: 10px 18px; border-radius: 10px; border: 0;
  background: #3178c6; color: #fff; cursor: pointer; }

Open the App.jsx tab and click ▶ Run to see the dev server start. In the browser the page shows two greetings and a button; after two clicks it reads “Clicked 2 times”.

Save the files and look at the browser. You should see a heading, two greetings and a button. Click the button and the text changes from “Clicked 0 times” to “Clicked 1 time” and then “Clicked 2 times”. We tested this exact app in a real browser before publishing.

Let us read the code line by line:

• Greeting is a component: a normal function whose name starts with a capital letter and which returns JSX. It receives props as an object, and we pull out name with destructuring: { name }.
• <Greeting name="Asha" /> uses the component like an HTML tag. name="Asha" is a prop. Using it twice with different props gives two different greetings; that is reusability.
• Curly braces { } inside JSX switch back to JavaScript. {name} shows a variable and {count === 1 ? "time" : "times"} runs a small expression.
• useState(0) creates a piece of state starting at 0. It returns the current value (count) and a function to change it (setCount).
• onClick={() => setCount(count + 1)} passes a function to run on click. Calling setCount triggers a re-render with the new value.
• className is used instead of class, because class is a reserved word in JavaScript.

What JSX turns into

Browsers do not understand JSX. During development and build, Vite’s React plugin turns every JSX tag into a function call that creates a React element, a plain JavaScript object that describes a piece of UI. You can see this yourself without any build tool by calling createElement directly. Create jsx-demo.mjs in the project folder:

// What does JSX turn into? Let's look at a React element.
import { createElement } from "react";
import { renderToString } from "react-dom/server";

// <h1 className="title">Hello React</h1>  is compiled to:
const element = createElement("h1", { className: "title" }, "Hello React");
console.log(element.type, element.props);

// A component is a function that returns elements.
function Greeting({ name }) {
  return createElement("p", null, "Namaste, ", name, "!");
}

// React turns elements into real HTML (here, as a string).
console.log(renderToString(createElement(Greeting, { name: "Asha" })));

$ node jsx-demo.mjs
h1 { className: 'title', children: 'Hello React' }
<p>Namaste, <!-- -->Asha<!-- -->!</p>

Click ▶ Run to see what a React element really is, and the HTML React produces from a component.

The first line of output shows that a React element is just an object with a type ("h1") and props. The second line shows React turning a component into real HTML. (The <!-- --> comments are markers React uses to separate text pieces.) You never need to write createElement by hand, but knowing that JSX is just JavaScript makes many rules easier to understand. Part 2 covers all the JSX rules.

Build for production

The dev server is for development only. When you are ready to deploy, create an optimised build. Vite bundles and minifies your code into the dist/ folder, which you can upload to any static host (Netlify, Vercel, GitHub Pages, Firebase Hosting or your own server):

# Create an optimised production build in the dist/ folder
$ npm run build

> my-first-react@0.0.0 build
> vite build

vite v8.3.5 building client environment for production...
transforming...
✓ 17 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html                   0.46 kB │ gzip:  0.30 kB
dist/assets/index-CuXkAzXh.css    0.29 kB │ gzip:  0.21 kB
dist/assets/index-DO-ZuKAz.js   219.88 kB │ gzip: 68.76 kB

✓ built in 152ms

# Preview the production build locally
$ npm run preview

Your whole app, including React itself, is about 69 kB after gzip compression. File names include a hash (like index-DO-ZuKAz.js) so browsers can cache them safely. Want a styling framework next? Our Tailwind CSS v4 tutorial works with this exact Vite setup.

One more helpful tool: install the React Developer Tools extension for Chrome, Edge or Firefox. It adds a Components tab to the browser DevTools where you can see your component tree, props and state while the app runs.

Common errors and fixes

Best practices for beginners

• One component per file, and name the file after the component (Greeting.jsx).
• Keep components small. If a component does too many things, split it. Small components are easier to read, test and reuse.
• Use function components and hooks. Class components still work, but new code and the official docs use functions.
• Keep StrictMode on in development. It catches real bugs early.
• Learn modern JavaScript well: arrow functions, destructuring, the spread operator, map/filter and modules. React uses them everywhere.
• Read the console. React’s error and warning messages are clear and often include a link that explains the fix.
• Commit early. Run git init in your project and commit after each working step (the Vite template already includes a .gitignore).

Practice task

Frequently asked questions

Conclusion

You now know what React is: a JavaScript library that builds user interfaces from components and keeps the page in sync with your data. You learned the three core ideas (components, JSX and state), saw how React updates only what changed, and understood where frameworks and React Native fit in. Most importantly, you created and ran a real React app with Vite, explored every file, wrote two components with props and state, and made a production build.

Already comfortable with the basics? Try adding sign-in to this app with our Firebase Authentication with React guide.