What is React?

React is a JavaScript library for building user interfaces, especially for single-page applications. It lets you build components that manage their own state and compose them to create complex UIs.

Creating Your First React App (with Vite)

✅ 1.1 Install Node.js

React projects require Node.js to run. If you haven’t installed it:

👉 Download and install it from: https://nodejs.org
(Choose the LTS version)

After installation, run this command in your terminal to verify:

node -v
npm -v

✅ 1.2 Create a React App using Vite

Vite is a fast build tool that’s perfect for starting a React project.

Open your terminal and type the following:

npm create vite@latest my-react-app -- --template react

You’ll be prompted to enter a project name (my-react-app is fine). After it’s done:

cd my-react-app
npm install
npm run dev

✅ 1.3 Folder Structure

You’ll see something like this inside the my-react-app folder:

my-react-app/
├── index.html        → The main HTML template
├── package.json      → Project metadata and dependencies
├── src/
│   ├── App.jsx       → Main App component (edit this)
│   └── main.jsx      → Entry point (React renders App here)

✅ 1.4 How It Works

Let’s open the file src/App.jsx. You’ll see something like this:

function App() {
  return (
    <div>
      <h1>Vite + React</h1>
      <p>Hello world!</p>
    </div>
  );
}

export default App;

App is your first React component.

It returns JSX — it looks like HTML but is JavaScript under the hood.

This App component is rendered inside the <div id="root"></div> in index.html.

✅ 1.5 Editing the App

Now edit App.jsx to try this:

function App() {
  const name = "React Beginner";

  return (
    <div>
      <h1>Welcome, {name}!</h1>
      <p>This is your first React app.</p>
    </div>
  );
}

export default App;

• This demonstrates JSX with a JavaScript variable.
• Save the file and your browser will auto-refresh.

🧠 Key Concepts You Just Learned:

Concept	Meaning
Vite	A fast development tool to create and run React apps
React	A JavaScript library for building UIs
JSX	HTML-like syntax that lets you write UI in JavaScript
Component	A function that returns UI elements (like <App />)
useState	(Coming soon) A React Hook for managing data in components

Keep Learning 🙂