20 Most important React concepts you need to know

Components: Components are the building blocks of React applications. They can be either function components or class components.

Example:

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

// Class Component
class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

JSX (JavaScript XML): JSX allows you to write HTML-like code within JavaScript, making it easier to create React elements.

Example:
```
const element = <h1>Hello, world!</h1>;
```

Props (Properties): Props are inputs passed to components. They are immutable and help components to be customizable and reusable.

Example:

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

ReactDOM.render(
    <Welcome name="John" />,
    document.getElementById('root')
);

Lifecycle Methods: Lifecycle methods are special methods that are executed at various points in a component's lifecycle.

Example:

class Example extends React.Component {
    componentDidMount() {
        console.log('Component did mount');
    }

    componentWillUnmount() {
        console.log('Component will unmount');
    }

    render() {
        return <h1>Hello, world!</h1>;
    }
}

State: State allows components to manage their internal data. It can be changed over time in response to user actions or network responses.

Example:

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

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

ReactDOM.render(
    <Counter />,
    document.getElementById('root')
);

Hooks: Hooks are functions that let you use state and other React features without writing a class. Introduced in React 16.8.

Example:

import React, { useState } from 'react';

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

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

Conditional Rendering: Conditional rendering allows components to render different elements or components based on certain conditions.

Example:

function Greeting(props) {
    if (props.isLoggedIn) {
        return <h1>Welcome back!</h1>;
    }
    return <h1>Please sign up.</h1>;
}

Event Handling: React provides a way to handle user interactions, such as clicks or inputs, using event handlers.

Example:

function Button() {
    function handleClick() {
        console.log('Button clicked');
    }

    return (
        <button onClick={handleClick}>
            Click me
        </button>
    );
}

Lists and Keys: Rendering lists of elements efficiently with unique keys for identification.

Example:

function ListExample() {
    const items = ['apple', 'banana', 'orange'];

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

Forms: Managing form inputs and submissions.

Example:

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
    }

    handleChange = (event) => {
        this.setState({ value: event.target.value });
    };

    handleSubmit = (event) => {
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
    };

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

Context API: Providing a way to pass data through the component tree without having to pass props manually at every level.

Example:

const ThemeContext = React.createContext('light');

function App() {
    return (
        <ThemeContext.Provider value="dark">
            <Toolbar />
        </ThemeContext.Provider>
    );
}

function Toolbar() {
    return (
        <div>
            <ThemedButton />
        </div>
    );
}

function ThemedButton() {
    const theme = useContext(ThemeContext);
    return <button>{theme}</button>;
}

Error Boundaries: Error boundaries catch JavaScript errors that occur anywhere in their child component tree, allowing you to handle and manage errors gracefully.

Example:

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    componentDidCatch(error, info) {
        this.setState({ hasError: true });
        console.error('Error caught:', error, info);
    }

    render() {
        if (this.state.hasError) {
            return <h1>Something went wrong.</h1>;
        }
        return this.props.children;
    }
}

<ErrorBoundary>
    <MyComponent />
</ErrorBoundary>

Refs: Accessing DOM elements directly within React components.

Example:

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }

    render() {
        return <div ref={this.myRef}>Hello</div>;
    }
}

Higher-Order Components (HOCs): HOCs are functions that take a component and return a new component with additional props or behavior.

Example:

function withLogging(Component) {
    return function WrappedComponent(props) {
        console.log('Props:', props);
        return <Component {...props} />;
    };
}

 const EnhancedComponent = withLogging(MyComponent);

React Router: React Router is a library for routing in React applications, enabling navigation between different components.

Example:

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

function App() {
    return (
        <Router>
            <div>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                </ul>

                <hr />

                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
            </div>
        </Router>
    );
}

Styling: Various approaches for styling React components, including CSS, inline styles, CSS modules, and styled-components.

Example:

import './MyComponent.css'; // External CSS file
import React from 'react';

function MyComponent() {
    return <div className="my-component">Styled with CSS</div>;
}

State Management: Libraries like Redux or MobX for managing global state in larger applications.

Example (using Redux):

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';
import App from './App';

const store = createStore(rootReducer);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

Server-Side Rendering (SSR): Rendering React components on the server side before sending HTML to the client, improving performance and SEO.

Example:

// Server-side code (Node.js)
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

const app = express();

app.get('/', (req, res) => {
    const html = ReactDOMServer.renderToString(<App />);
    res.send(html);
});

app.listen(3000, () => {
    console.log('Server is listening on port 3000');
});

Context Providers and Consumers: Using context to share data between components without having to explicitly pass props through every level.

Example:

const ThemeContext = React.createContext('light');

function App() {
    return (
        <ThemeContext.Provider value="dark">
            <Toolbar />
        </ThemeContext.Provider>
    );
}

function Toolbar() {
    return (
        <div>
            <ThemedButton />
        </div>
    );
}

function ThemedButton() {
    return (
        <ThemeContext.Consumer>
            {theme => <button>{theme}</button>}
        </ThemeContext.Consumer>
    );
}

Lazy Loading: Loading components or resources asynchronously only when needed, improving initial loading times.

Example:

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

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

function App() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <LazyComponent />
        </Suspense>
    );
}