Cheatsheets
React Components

React Components

Functional Components

Basic Functional Component

A functional component is a simple JavaScript function that accepts props as an argument and returns a React element.

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

Functional Component with Hooks

You can also use hooks like `useState` in functional components for managing state.

              
              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>
  );
};

Class Components

Basic Class Component

A class component is a JavaScript class that extends `React.Component` and requires a `render()` method.

              
              import React, { Component } from 'react';

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

export default Greeting;

Class Component with State

Class components can manage state using `this.state` and update it using `this.setState()`.

              
              import React, { Component } from 'react';

class Counter extends 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>
    );
  }
}

export default Counter;

JSX Syntax

JSX Elements

JSX syntax allows you to write HTML structures in the same file as JavaScript code.

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

JSX Expressions

You can embed JavaScript expressions in JSX by wrapping them in curly braces.

              
              const name = 'Alice';
const greeting = <h1>Hello, {name}!</h1>;

Programming Cheatsheets: Quick Reference for Productivity

Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.

ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.

React Components

Topics