The Ultimate React.js Cheat Sheet for Developers
Tags: beginners, react, webdev, learning
Published: 2024-04-27 03:15:56

## 🚀 Check Out My YouTube Channel! 🚀
Hi everyone! If you enjoy my content here on Dev.to, please consider subscribing to my YouTube channel [devDive with Dipak](https://www.youtube.com/@DevDivewithDipak). I post practical full-stack development videos that complement my blog posts. Your support means a lot!

React.js is a popular JavaScript library for building user interfaces, particularly single-page applications where you need a fast response to user interactions. Whether you're new to React or looking to sharpen your skills, this cheat sheet will help you get the most out of your React development.

### Essential React Concepts

#### Components

**Functional Components**:
These are simpler components defined by functions that return JSX. They do not manage state or lifecycle methods on their own.

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

**Class Components**:
These components are more complex and can manage state and lifecycle methods.

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

#### Props and State

**Props**:
Props (short for properties) are how you pass data from a parent component to a child component. They are read-only within the child.

```javascript
function Greeting(props) {
  return <h1>Welcome, {props.name}!</h1>;
}

// Usage in a parent component
function App() {
  return <Greeting name="Alice" />;
}
```

**State**:
State is used for data that changes over time within a component. It is local and fully controlled by the component.

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

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

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

### Lifecycle Methods (Class Components)

Lifecycle methods are used in class components to perform actions at different points in a component's lifecycle:

- **`componentDidMount`**: Called after the component is mounted to the DOM.
- **`componentDidUpdate`**: Called after the component's updates are flushed to the DOM.
- **`componentWillUnmount`**: Called right before the component is removed from the DOM.

```javascript
class LifecycleDemo extends React.Component {
  componentDidMount() {
    console.log('Component did mount!');
  }

  componentDidUpdate() {
    console.log('Component did update!');
  }

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

  render() {
    return <div>Check the console for lifecycle logs!</div>;
  }
}
```

### React Hooks

Hooks allow functional components to manage state and side effects.

- **`useState`**:
  Allows functional components to have state.

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```

- **`useEffect`**:
  Handles side effects in functional components.

```javascript
useEffect(() => {
  document.title = `You clicked ${count} times`;
});
```

### Best Practices

- **Composition vs Inheritance**: Prefer composition over inheritance to reuse code between components.
- **Lifting State Up**: Often, several components need to reflect the same changing data. Lift the shared state up to their closest common ancestor.
- **Immutable Data**: Treat state as if it were immutable. Never modify this.state directly, instead use `setState`.
- **Functional Updates**: If the next state depends on the previous state, pass a function to `setState`, rather than an object.

### Conclusion

This React cheat sheet should serve as a quick reference to the most critical concepts and best practices of React development. Whether you are building a small widget or a large-scale application, these principles will help guide your project to success.