The Ultimate React.js Cheat Sheet for Developers

🚀 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. 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.

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

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

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.

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.

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.

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.

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.

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.