React Basics

React is a popular JavaScript library for building user interfaces, especially web applications.

What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components."

Key Concepts

Components

Components are the building blocks of React applications.

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

JSX

JSX is a syntax extension for JavaScript that looks similar to HTML.

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

Props

Props are how you pass data from parent to child components.

function App() {
  return <Welcome name="React Developer" />;
}

State

State allows components to manage their own data.

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

Getting Started

1. Create a new React app: npx create-react-app my-app
2. Navigate to the project: cd my-app
3. Start the development server: npm start

Start building amazing user interfaces with React! ⚛️