What is React?

You've learned how to structure pages with HTML and style them with CSS. Now, it's time to make them interactive! React is a powerful JavaScript library for building user interfaces (UIs). Its main idea is to break down your UI into small, reusable pieces called components.

Instead of manually changing what the user sees when data changes, React automatically updates the UI for you. This makes building complex applications much more manageable.

1. Setting Up Your First React App

The fastest way to start a new React project is by using a tool called Vite. It sets up a complete development environment for you with just one command.

Open your terminal and run the following command:

bash

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

This command creates a new directory called my-react-app with a basic React project inside. To run your new app, navigate into the directory and start the development server:

bash

cd my-react-app
npm install
npm run dev

Now, open your browser and go to http://localhost:5173. You should see your first React application running!

2. Understanding JSX

Open the src/App.jsx file in your new project. You'll see something that looks like a mix of HTML and JavaScript. This is JSX (JavaScript XML).

jsx

function App() {
  return (
    <>
      <h1>Hello, React!</h1>
      <p>This is JSX, which looks like HTML.</p>
    </>
  );
}

export default App;

JSX allows us to write HTML-like code directly within our JavaScript. Under the hood, this JSX is converted into regular JavaScript that browsers can understand. It makes writing UI components intuitive and easy to read.

3. Components: The Building Blocks of React

Everything in React is a component. A component is essentially a JavaScript function that returns some JSX. Components are reusable and can be nested inside one another.

Let's create our own component.

Create a new file src/Greeting.jsx.
Add the following code:

jsx

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

export default Greeting;

This component accepts an object called props (short for properties) and uses the name property to render a personalized greeting.

Now, let's use this new component in our App.jsx:

jsx

// src/App.jsx
import Greeting from "./Greeting";

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

export default App;

We've just reused our Greeting component twice with different props! This is the core power of React.

4. State and Events: Making Components Interactive

So far, our components are static. To make them interactive, we need two more concepts: state and events.

State: A piece of data that is internal to a component. When the state changes, React automatically re-renders the component to reflect the new data.
Events: Actions that the user performs, like clicking a button or typing in a form. We can "listen" for these events and update our state in response.

Let's build a simple counter application to see this in action. Replace the content of App.jsx with the following:

jsx

// src/App.jsx
import React, { useState } from "react";

function App() {
  // 1. Initialize state with the useState hook
  const [count, setCount] = useState(0);

  // 2. Create a function to handle the button click
  function handleIncrement() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Simple Counter</h1>
      <p>Current count: {count}</p>
      {/* 3. Add an onClick event listener to the button */}
      <button onClick={handleIncrement}>Increment Count</button>
    </div>
  );
}

export default App;

Let's break down what's happening:

useState(0): This is a React Hook. It initializes our state. useState returns an array with two things: the current state value (count) and a function to update it (setCount). We start the count at 0.
handleIncrement: This is our event handler function. When called, it uses setCount to update the count state to its previous value plus one.
onClick={handleIncrement}: We attach our event handler to the button's onClick event. Now, whenever the button is clicked, handleIncrement will be called, the state will update, and React will automatically re-render the <p> tag to show the new count.

Conclusion

You've just scratched the surface of what React can do, but you've learned the most important concepts! You now understand how to create components, write JSX, manage component data with state, and respond to user actions with events.

This component-based architecture is what makes React so powerful for building large, complex applications. The best way to learn is to keep building. Try creating a decrement button for our counter, or a button to reset it to zero. Happy coding!

Azhagu-swe