Essential ReactJS Cheat Sheet for Beginners

This cheat sheet serves as a comprehensive reference guide for beginners learning ReactJS, an open-source JavaScript library for building user interfaces. Below are the main points, key concepts, and examples to help you understand ReactJS better.

Key Concepts

1. Components

• Definition: The building blocks of any React application.
• Types:
  • Functional Components: Simple JavaScript functions that return JSX.
  • Class Components: ES6 classes that extend React.Component.

Example:

// Functional Component
const MyComponent = () => {
    return <h1>Hello, World!</h1>;
};

// Class Component
class MyClassComponent extends React.Component {
    render() {
        return <h1>Hello, World!</h1>;
    }
}

2. JSX (JavaScript XML)

• Definition: A syntax extension that allows writing HTML-like code within JavaScript.
• Usage: Makes it easier to create React elements.

Example:

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

3. Props (Properties)

• Definition: Short for properties, these are read-only attributes passed to components.
• Usage: Allow data to be passed from parent to child components.

Example:

const Greeting = (props) => {
    return <h1>Hello, {props.name}!</h1>;
};

// Usage
<Greeting name="Alice" />

4. State

• Definition: An object that determines the component's behavior and how it renders.
• Usage: Managed within class components and can be updated using setState().

Example:

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

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.increment}>Increment</button>
            </div>
        );
    }
}

5. Lifecycle Methods

• Definition: Special methods in class components that allow you to hook into different stages of a component's lifecycle.
• Common Methods:
  • componentDidMount()
  • componentDidUpdate()
  • componentWillUnmount()

6. Hooks

• Definition: Functions that let you use state and other React features in functional components.
• Common Hooks:
  • useState(): For managing state.
  • useEffect(): For side effects like data fetching.

Example:

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

const Timer = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        const timer = setInterval(() => setCount(c => c + 1), 1000);
        return () => clearInterval(timer);
    }, []);

    return <h1>{count}</h1>;
};

Conclusion

This cheat sheet provides a foundation for understanding and using ReactJS. By grasping these key concepts—components, JSX, props, state, lifecycle methods, and hooks—you'll be well on your way to building dynamic web applications.