React.js

Table of Contents

Introduction

React is a JavaScript library for building user interfaces, particularly single-page applications. It lets you create reusable UI components that manage their own state.

Key Features:

Components

Functional Components


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

// Arrow function component with destructuring
const UserCard = ({ name, email }) => (
    <div className="card">
        <h2>{name}</h2>
        <p>{email}</p>
    </div>
);

Class Components


// Class component with lifecycle methods
class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    componentDidMount() {
        console.log('Component mounted');
    }

    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                    Increment
                </button>
            </div>
        );
    }
}

State and Props

Props:


// Parent component
function ParentComponent() {
    return <ChildComponent name="John" age={30} />;
}

// Child component
function ChildComponent({ name, age }) {
    return (
        <div>
            <p>Name: {name}</p>
            <p>Age: {age}</p>
        </div>
    );
}

State:


// Using useState hook
function StateExample() {
    const [count, setCount] = useState(0);
    const [user, setUser] = useState({ name: '', email: '' });

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

Hooks

Common Hooks:


// useState
const [state, setState] = useState(initialState);

// useEffect
useEffect(() => {
    // Side effects here
    return () => {
        // Cleanup function
    };
}, [dependencies]);

// useContext
const value = useContext(MyContext);

// useRef
const inputRef = useRef();

// useMemo
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

// useCallback
const memoizedCallback = useCallback(
    () => {
        doSomething(a, b);
    },
    [a, b],
);

Routing


// React Router setup
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

function App() {
    return (
        <BrowserRouter>
            <nav>
                <Link to="/">Home</Link>
                <Link to="/about">About</Link>
            </nav>

            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
                <Route path="/users/:id" component={UserProfile} />
            </Switch>
        </BrowserRouter>
    );
}

State Management

Context API


// Create context
const ThemeContext = React.createContext();

// Provider
function ThemeProvider({ children }) {
    const [theme, setTheme] = useState('light');

    return (
        <ThemeContext.Provider value={{ theme, setTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

// Consumer
function ThemedButton() {
    const { theme, setTheme } = useContext(ThemeContext);
    return (
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
            Toggle Theme
        </button>
    );
}

Redux Integration:


// Action
const increment = () => ({
    type: 'INCREMENT'
});

// Reducer
const counterReducer = (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        default:
            return state;
    }
};

// Store connection
function Counter({ count, increment }) {
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

export default connect(
    state => ({ count: state }),
    { increment }
)(Counter);

Best Practices

Development Guidelines:

Performance Optimization


// React.memo for component memoization
const MemoizedComponent = React.memo(function MyComponent(props) {
    return (
        <div>
            {/* Component content */}
        </div>
    );
});

// useCallback for memoized callbacks
const memoizedHandler = useCallback(() => {
    console.log('Handler called');
}, []);

// useMemo for expensive calculations
const expensiveValue = useMemo(() => {
    return computeExpensiveValue(a, b);
}, [a, b]);

Related Resources