What is React? ⚛️

React is a popular JavaScript library created by Facebook in 2013. It allows you to develop fast and convenient interfaces for web applications. If you've ever used Facebook, Instagram, or Netflix, you've already encountered React! 🚀

The main advantage of React is component approach. You can create small independent blocks (components) and reuse them like LEGO cubes! 🧱

How to start programming in React? 💻

To work with React, you will need:

• ✅ Node.js — JavaScript runtime (you can download it from official website).

• ✅ Text editor, for example Visual Studio Code.

• ✅ Install React using create-react-app.

How to install React? 🛠

Open the terminal (or command line) and enter:

npx create-react-app my-app
cd my-app
npm start

This command will create a new React project and start a local server. Now you can develop! 🚀

Key features of React 🔧

• Components: They allow you to break the code into small reusable parts.

• State: Manages data within the application.

• Events: Allow you to respond to user actions.

• Virtual DOM: Speeds up interface updates.

React Basics 📚

1. Components 📦

Components are the main feature of React. They can be functional or class-based.

Example of a simple component:

function Welcome() {
  return <h1>Привет, React!</h1>;
}

This component can be inserted anywhere in the application.

2. JSX — JavaScript + HTML 📜

React uses JSX, which allows you to write HTML directly inside JavaScript.

Example of JSX code:

const element = <h1>Привет, мир!</h1>;

JSX makes the code more readable and convenient.

3. State 🎛

The state allows you to manage dynamic data in the component.

Example of a component with state:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

When the user clicks the button, the number increases! 🔢

4. Event handlers 🖱

React makes it easy to work with events, such as clicks.

Example of an event handler:

function Button() {
  function handleClick() {
    alert('Button pressed!');
  }

  return <button onClick={handleClick}>Нажми меня</button>;
}

5. Working with effects (useEffect) ⚙️

The useEffect hook allows you to execute code when the state changes.

Example:

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
    
    return () => clearInterval(interval);
  }, []);

  return <p>Прошло {seconds} секунд</p>;
}

This component counts down the seconds from the moment the page loads. ⏳

Simple projects in React 💡

1. Counter 📊

Let's create a counter that increases when you press a button.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

2. Random number generator 🎲

Each time you click the button, a new number will appear.

import React, { useState } from 'react';

function RandomNumber() {
  const [number, setNumber] = useState(0);

  return (
    <div>
      <p>Число: {number}</p>
      <button onClick={() => setNumber(Math.floor(Math.random() * 100))}>Сгенерировать</button>
    </div>
  );
}

Conclusion 🎉

React is a powerful tool for creating modern web applications. We have covered the basics: components, state, events, and effects. Now you can start developing your first React applications! 🚀

The main thing is practice! The more code you write, the better you understand it. So feel free to experiment and create your own projects! Good luck learning React! 😊