React

# React Concepts and Code Examples
 
## Introduction to React
React is a JavaScript library for building user interfaces, developed by Facebook. It allows developers to create large web applications that can change data without reloading the page.
 
## Key Features of React
- **Component-Based Architecture**: Build encapsulated components that manage their own state.
- **Virtual DOM**: Efficiently updates and renders the right components when data changes.
- **Unidirectional Data Flow**: Data flows in a single direction, making it easier to understand and debug.
 
## Setting Up a React Project
To create a new React project, you can use Create React App:
 
```bash
npx create-react-app my-app
cd my-app
npm start

import React from 'react';
 
const HelloWorld = () => {
    return <h1>Hello, World!</h1>;
};
 
export default HelloWorld;

import React, { Component } from 'react';
 
class HelloWorld extends Component {
    render() {
        return <h1>Hello, World!</h1>;
    }
}
 
export default HelloWorld;

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

const Greeting = ({ name }) => {
    return <h1>Hello, {name}!</h1>;
};
 
// Usage
<Greeting name="Alice" />

import React, { useState } from 'react';
 
const Counter = () => {
    const [count, setCount] = useState(0);
 
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
};
 
export default Counter;

const Button = () => {
    const handleClick = () => {
        alert('Button clicked!');
    };
 
    return <button onClick={handleClick}>Click Me</button>;
};

const Message = ({ isLoggedIn }) => {
    return isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Log In</h1>;
};

const ItemList = ({ items }) => {
    return (
        <ul>
            {items.map(item => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
};

const FormExample = () => {
    const [inputValue, setInputValue] = useState('');
 
    const handleSubmit = (e) => {
        e.preventDefault();
        alert(`Input: ${inputValue}`);
    };
 
    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
            />
            <button type="submit">Submit</button>
        </form>
    );
};

import React, { createContext, useContext, useState } from 'react';
 
const MyContext = createContext();
 
const ProviderComponent = ({ children }) => {
    const [value, setValue] = useState('Hello');
 
    return (
        <MyContext.Provider value={{ value, setValue }}>
            {children}
        </MyContext.Provider>
    );
};
 
const ChildComponent = () => {
    const { value } = useContext(MyContext);
    return <h1>{value}</h1>;
};

npm install react-router-dom

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
const App = () => {
    return (
        <Router>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
            </Switch>
        </Router>
    );
};

import React, { useEffect } from 'react';
 
const Timer = () => {
    useEffect(() => {
        const timer = setInterval(() => {
            console.log('Tick');
        }, 1000);
 
        return () => clearInterval(timer); // Cleanup
    }, []);
 
    return <h1>Check the console for ticks!</h1>;
};

import { useState, useEffect } from 'react';
 
const useFetchData = (url) => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
 
    useEffect(() => {
        fetch(url)
            .then((response) => response.json())
            .then((data) => {
                setData(data);
                setLoading(false);
            });
    }, [url]);
 
    return { data, loading };
};
 
// Usage
const DataComponent = () => {
    const { data, loading } = useFetchData('https://api.example.com/data');
 
    if (loading) return <h1>Loading...</h1>;
    return <div>{JSON.stringify(data)}</div>;
};

import React from 'react';
 
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
 
    static getDerivedStateFromError(error) {
        return { hasError: true };
    }
 
    componentDidCatch(error, errorInfo) {
        console.log('Error logged:', error);
    }
 
    render() {
        if (this.state.hasError) {
            return <h1>Something went wrong.</h1>;
        }
 
        return this.props.children; 
    }
}
 
// Usage
<ErrorBoundary>
    <MyComponent />
</ErrorBoundary>

const withLoading = (WrappedComponent) => {
    return ({ isLoading, ...props }) => {
        if (isLoading) return <h1>Loading...</h1>;
        return <WrappedComponent {...props} />;
    };
};
 
// Usage
const MyComponent = () => <h1>Data Loaded!</h1>;
const MyComponentWithLoading = withLoading(MyComponent);