React is a JavaScript library for building user interfaces. It was developed by Facebook and is widely used for building modern web applications. In this tutorial, we’ll cover the basics of React and build a simple app together.

📦 What You Need

Before starting, make sure you have:

  • Node.js and npm installed (https://nodejs.org)

  • A code editor like VS Code

  • Basic knowledge of HTML, CSS, and JavaScript

🛠️ Setting Up the Project

You can create a new React project using create-react-app, a tool that sets everything up for you.

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

Your browser should open with a page saying “Edit src/App.js and save to reload.”

🧱 Understanding the Structure

Inside your project folder, you’ll find:

  • public/: Static files

  • src/: Source code (JavaScript and CSS)

  • App.js: Main component

  • index.js: Entry point of the app

🧩 Creating Your First Component

React apps are made up of components. Each component is a JavaScript function that returns JSX (a syntax that looks like HTML).

Edit App.js to look like this:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is my first React component.</p>
    </div>
  );
}

export default App;

🌀 JSX: JavaScript + HTML

JSX lets you write HTML-like code inside JavaScript. Behind the scenes, JSX is converted into regular JavaScript using React.createElement().

For example:

const element = <h1>Hello</h1>;

...is compiled to:

const element = React.createElement('h1', null, 'Hello');

🔁 Props and State

Props

Props are like function arguments. They let you pass data to components.

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

function App() {
  return <Greeting name="Alice" />;
}

State

State lets components manage data internally.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

🧪 Putting It All Together

Here’s a simple app that combines components, props, and state:

import React, { useState } from 'react';

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

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

  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <Greeting name="React Developer" />
      <Counter />
    </div>
  );
}

export default App;

🧼 Cleaning Up

To keep your code organized:

  • Use separate files for each component

  • Use meaningful names

  • Keep components small and reusable

🎉 Conclusion

Now you know how to:

  • Create a React project

  • Use JSX

  • Build functional components

  • Work with props and state

This is just the beginning—next, you can explore:

  • React Router (for navigation)

  • Context API or Redux (for state management)

  • Hooks like useEffect, useContext, etc.