React Basics | A Beginner’s Guide

🔹 What is React?

React is a JavaScript library for building user interfaces. Developed by Facebook (Meta), it is widely used to create fast, scalable, and interactive web applications.

✅ Component-Based – UI is built using reusable components.
✅ Virtual DOM – Efficiently updates the UI for better performance.
✅ Declarative – Simplifies UI development with a predictable state.
✅ Used by Industry Leaders – Facebook, Instagram, Netflix, Airbnb, and more.

---

🔹 Installing React

To create a new React app, use Create React App (CRA):

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

Or use Vite (for faster builds):

```sh
npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

---

🔹 JSX: JavaScript + HTML

React uses JSX (JavaScript XML) to write HTML-like code inside JavaScript.

const element = <h1>Hello, React!</h1>;
ReactDOM.render(element, document.getElementById('root'));

✅ Looks like HTML but gets compiled to JavaScript. ✅ Helps in creating UI components efficiently.

React Components A Component is a reusable UI element. React has two types of components:

1. Functional Component (Modern Approach)

function Welcome() {
  return <h1>Hello, World!</h1>;
}

2. Class Component (Traditional Approach)

class Welcome extends React.Component {
  render() {
  return <h1>Hello, World!</h1>;
  }
}

💡 Best Practice: Use functional components with hooks for modern development.

🔹 Props in React

Props (short for Properties) allow components to receive dynamic data from parent components.

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

<Greeting name="Alice" /> // Output: Hello, Alice!

✅ Props are read-only and cannot be modified inside the component.

🔹 State in React State allows components to manage and update data dynamically.

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

✅ useState(0) → Initializes state with 0. ✅ setCount(count + 1) → Updates the state.

---

🔹 Handling Events in React React events are similar to DOM events, but they use camelCase instead of lowercase.

function ClickButton() {
  function handleClick() {
    alert("Button clicked!");
  }

  return <button onClick={handleClick}>Click Me</button>;
}

---

🔹 Conditional Rendering in React

Use if statements or ternary operators to conditionally render components.

function Message({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>;
}

✅ isLoggedIn ? : for inline conditions.

---

🔹 React Lists & Keys

When rendering lists, always use keys for better performance.

function ItemList() {
  const items = ["Apple", "Banana", "Orange"];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

✅ Keys help React identify elements efficiently when updating lists.

---

🔹 React Hooks (Modern State Management) React Hooks allow functional components to use state and lifecycle features.

1. useState (State Management)

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

2. useEffect (Side Effects, API Calls)

useEffect(() => {
  console.log("Component Mounted!");
}, []);

✅ Replaces class lifecycle methods (componentDidMount, componentDidUpdate).

🔹 React Router (Navigation)

To enable page navigation in React, use React Router.

npm install react-router-dom

Example routing setup:

import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

✅ Routes manages different pages inside the app. ✅ Link provides client-side navigation without reloading the page.

---

🔹 React vs Other Frontend Frameworks

Feature	React	Angular	Vue.js
Type	Library	Framework	Framework
Learning Curve	Easy	Steep	Moderate
State Management	Hooks (useState, useReducer)	Services & RxJS	Vuex, Pinia
Performance	Fast (Virtual DOM)	Moderate	Fast (Reactivity System)
Used For	UI Components	Enterprise Apps	UI Components & Apps

🔹 Getting Started with React Development

1️⃣ Install Node.js → Download from Node.js Official Site 2️⃣ Create a React App → npx create-react-app my-app 3️⃣ Start Development Server → npm start 4️⃣ Build for Production → npm run build

🔹 Conclusion

React is a powerful, flexible, and fast JavaScript library for building modern web applications. By mastering components, props, state, hooks, and routing, you can create scalable and interactive UIs with ease.

🚀 Next Steps? Explore React Context API, Redux, and Advanced Hooks!