React Home

React.js is a powerful JavaScript library used for building user interfaces, especially single-page applications (SPAs). Developed by Facebook, React makes it easy to create interactive UIs by breaking them into small, reusable components.

In this tutorial, we’ll cover the basics of React so you can get started on your first React project.

---

What You Need Before Starting

Before using React, make sure you have the following installed:

• Node.js and npm: Download from Node.js website
• Code editor: VS Code is highly recommended.

You can check installation by running these commands in your terminal:

node -v
npm -v

---

Create Your First React App

The easiest way to start with React is using Create React App. Open a terminal and run:

npx create-react-app my-app

This will create a new folder my-app with all the files you need.

To start your app, run:

cd my-app
npm start

This opens your app in the browser at http://localhost:3000.

---

React Project Structure

Here are the important files:

my-app/
├── public/
├── src/
│   ├── App.js       // Main component
│   ├── index.js     // App entry point

• App.js is where your main UI logic goes.
• index.js renders the App component into the DOM.

---

React Components

React apps are made of components — JavaScript functions that return HTML (JSX).

Example of a simple component:

function Welcome() {
  return <h1>Welcome to React!</h1>;
}

You can use this component inside App.js like this:

import React from 'react';

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

function Welcome() {
  return <h1>Welcome to React!</h1>;
}

export default App;

---

What is JSX?

JSX stands for JavaScript XML. It allows you to write HTML inside JavaScript.

Example:

const element = <h1>Hello, JSX!</h1>;

JSX looks like HTML, but it’s actually syntactic sugar for React.createElement().

---

Props in React

Props are used to pass data from one component to another.

Example:

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

function App() {
  return <Greet name="xyz" />;
}

Here, "xyz" is passed as a prop to the Greet component.

---

State in React

State is used to manage data that changes inside a component.

Use the useState hook to add state:

import React, { useState } from 'react';

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

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

---

React Hooks (Intro)

Hooks are functions that let you “hook into” React features. Common ones:

• useState – to manage state.
• useEffect – to run side effects (like fetching data).

Example with useEffect:

import React, { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    setInterval(() => setTime(t => t + 1), 1000);
  }, []);

  return <p>Time: {time} seconds</p>;
}

---

Adding CSS to React

You can use regular CSS files or inline styles.

External CSS:

// App.css
.title {
  color: blue;
  text-align: center;
}

// App.js
import './App.css';

function App() {
  return <h1 className="title">Styled Text</h1>;
}

---

Importing and Exporting Components

Split your UI into multiple files:

Welcome.js

function Welcome() {
  return <h2>Hello React!</h2>;
}

export default Welcome;

App.js

import Welcome from './Welcome';

function App() {
  return <Welcome />;
}

---

Summary

React is all about building components and composing them together. With JSX, props, state, and hooks, you can create interactive and powerful web apps.

---

What’s Next?

• Learn React Router for navigation
• Use Context API or Redux for state management
• Try API fetching using fetch or axios
• Explore React frameworks like Next.js

---

Conclusion

React is one of the most in-demand web technologies today. By learning how to create components, manage state, and handle user interactions, you’re on your way to becoming a front-end pro.

So go ahead — start building and bring your ideas to life with React!