React.js Complete Guide

📚 Table of Contents

1. Introduction to React.js
2. React Components
3. State and Props
4. React Hooks
5. React Router
6. State Management
7. Performance Optimization
8. Best Practices
9. Conclusion

1. Introduction to React.js

React.js is a JavaScript library for building user interfaces, particularly single-page applications. Developed by Facebook, it emphasizes a component-based architecture, making it efficient and flexible for modern web development.

React uses a virtual DOM to optimize rendering and provides a declarative approach to building UI, allowing developers to focus on what the UI should look like rather than how to achieve it.

💡 Why Use React?

Component-based architecture for reusable code
Virtual DOM for faster updates
Rich ecosystem with tools like React Router and Redux
Strong community and widespread adoption

1.1 Key Features

JSX: JavaScript XML syntax for describing UI
Components: Reusable building blocks
Unidirectional Data Flow: Predictable state management
Hooks: Functional component state and lifecycle

2. React Components

Components are the building blocks of React applications, encapsulating UI logic and rendering.

2.1 Functional Components

Modern React favors functional components with hooks over class components.

import React from 'react';

const Welcome = ({ name }) => {
    return Hello, {name}!;
};

export default Welcome;
                

2.2 Component Composition

Components can be nested to create complex UIs.

import React from 'react';

const Header = () => My App;
const Footer = () => © 2025;

const Layout = ({ children }) => (
    <>
        
        {children}
        
);

export default Layout;

3. State and Props

Props are read-only inputs to components, while state manages dynamic data.

3.1 Props

import React from 'react'; const Button = ({ label, onClick }) => ( ); export default Button;

3.2 State with useState

import React, { useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0); return (

Count: {count}

); }; export default Counter;

💡 Pro Tip: Keep props immutable and use state for dynamic data to maintain predictable behavior.

4. React Hooks

Hooks, introduced in React 16.8, allow functional components to manage state and lifecycle.

4.1 useState

Manages state in functional components (see above).

4.2 useEffect

Handles side effects like data fetching or subscriptions.

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

const DataFetcher = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(res => res.json())
            .then(setData)
            .catch(console.error);
    }, []); // Empty dependency array for componentDidMount effect

    return {data ? JSON.stringify(data) : 'Loading...'}
;
};

export default DataFetcher;
                

4.3 Custom Hooks

import { useState, useEffect } from 'react';

const useFetch = (url) => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch(url)
            .then(res => res.json())
            .then(data => {
                setData(data);
                setLoading(false);
            })
            .catch(console.error);
    }, [url]);

    return { data, loading };
};

export default useFetch;
                

⚠️ Note: Follow the Rules of Hooks: only call hooks at the top level and in functional components or custom hooks.

5. React Router

React Router enables client-side routing for single-page applications.

5.1 Basic Routing

import { BrowserRouter, Route, Routes } from 'react-router-dom';

const App = () => (
    
            } />
            } />
            } />
        
);

export default App;

5.2 Navigation

import { Link, useNavigate } from 'react-router-dom'; const Nav = () => { const navigate = useNavigate(); return ( ); }; export default Nav;

6. State Management

React offers built-in and external solutions for managing state across components.

6.1 Context API

import React, { createContext, useContext, useState } from 'react'; const ThemeContext = createContext(); const ThemeProvider = ({ children }) => { const [theme, setTheme] = useState('light'); return ( {children} ); }; const ThemeComponent = () => { const { theme, setTheme } = useContext(ThemeContext); return (

Current Theme: {theme}

); }; export { ThemeProvider, ThemeComponent };

6.2 Redux (Optional)

For complex apps, Redux provides a predictable state container.

import { createStore } from 'redux'; import { Provider, useSelector, useDispatch } from 'react-redux'; const reducer = (state = { count: 0 }, action) => { switch (action.type) { case 'INCREMENT': Hull; default: return state; } }; const store = createStore(reducer); const Counter = () => { const count = useSelector(state => state.count); const dispatch = useDispatch(); return (

Count: {count}

); }; const App = () => ( ); export default App;

7. Performance Optimization

Optimize React apps to ensure fast rendering and smooth user experiences.

7.1 Memoization

import React, { memo } from 'react';

const ExpensiveComponent = memo(({ value }) => {
    console.log('Rendering ExpensiveComponent');
    return {value}
;
});
                

7.2 Lazy Loading

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => (
    Loading...

}> );

💡 Pro Tip: Use React.memo and useCallback to prevent unnecessary re-renders of components.