Mastering React.js: A Developer's Guide

React.js is a powerful JavaScript library developed by Facebook for building interactive user interfaces efficiently. It's widely used for single-page applications, mobile apps (via React Native), and modern web development workflows.

---

🚀 What is React?

React is a declarative, component-based library that makes it easy to build complex UIs from small and isolated pieces of code called “components.”

Key Features of React:

• 🧩 Component-Based Architecture
• ⚛️ Virtual DOM for faster rendering
• 🔁 Unidirectional Data Flow
• 🪝 Built-in Hooks for state and lifecycle
• 🔧 Seamless integration with other libraries

---

🔧 Setting Up React

Using Create React App

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

Using Vite (Faster alternative)

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

---

🧱 React Fundamentals

JSX - JavaScript XML

JSX allows writing HTML in JavaScript:

const Greeting = () => <h1>Hello, World!</h1>;

Components

Functional Component:

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

Arrow Function Component:

const Welcome = ({ name }) => <h1>Hello, {name}</h1>;

---

🪝 React Hooks

useState

import { useState } from "react";

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

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

useEffect

import { useEffect, useState } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <p>Timer: {seconds} seconds</p>;
}

---

⚙️ Props and State

Props Example:

function Profile({ name, age }) {
  return (
    <p>
      {name} is {age} years old
    </p>
  );
}

State Example:

const [theme, setTheme] = useState("light");

---

🧭 Routing with React Router

Install:

npm install react-router-dom

Setup:

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

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

---

💾 Fetching Data

Using fetch:

useEffect(() => {
  fetch("https://api.example.com/data")
    .then((response) => response.json())
    .then((data) => setData(data));
}, []);

Using Axios:

npm install axios

import axios from "axios";

useEffect(() => {
  axios
    .get("https://api.example.com/data")
    .then((response) => setData(response.data));
}, []);

---

🧪 Testing React Components

Using Jest and React Testing Library

npm install --save-dev @testing-library/react jest

import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders welcome message", () => {
  render(<App />);
  expect(screen.getByText(/welcome/i)).toBeInTheDocument();
});

---

🧠 Best Practices

• Break components into smaller reusable ones
• Keep state as close to where it's needed as possible
• Use PropTypes or TypeScript for type checking
• Avoid unnecessary re-renders

---