Core Concepts

Components

Components are the core building blocks of React. A component is an independent, reusable piece of code.

Function Components

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

Class Components

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

JSX

JSX is a JavaScript syntax extension that looks similar to XML.

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

Props

Props are used to pass data from parent components to child components.

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

<Welcome name="Alice" />

State

State is data managed internally by a component.

import { useState } from 'react';

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

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

Lifecycle

React components have a lifecycle that can execute code at specific stages.

import { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // Execute after component mounts
    console.log('Component mounted');

    return () => {
      // Execute before component unmounts
      console.log('Component will unmount');
    };
  }, []);

  return <div>Example Component</div>;
}