Getting Started with React

React is a powerful JavaScript library for building user interfaces. In this tutorial, we’ll cover the basics of React, including components, state, and props.

Components

Components are the building blocks of a React application. You can define a component using a function or a class.

function Welcome() {
  return <h1>Hello, world!</h1>;
}

State

State is used to manage data within a component. You can use the useState hook to add state to a functional component.

import React, { useState } from 'react';

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

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

Props

Props are used to pass data from one component to another. They are read-only and cannot be modified by the receiving component.

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

function App() {
  return <Greeting name="Alice" />;
}

By understanding these basic concepts, you’ll be able to start building applications with React.