Основные понятия React JS: справочник

React — это библиотека, а не фреймворк. Она была разработана Facebook для решения специфических задач компании. Понимать новую библиотеку или фреймворк всегда интересно, но важно сначала усвоить её базовые концепции.

Настройка среды разработки

Прежде чем перейти к практическим аспектам ReactJS, необходимо настроить среду разработки. В этом руководстве мы пошагово рассмотрим процесс установки необходимых инструментов и создания первого React-проекта.

Требования:

Для начала вам понадобятся Node.js и npm (Node Package Manager). Node.js — это среда выполнения JavaScript вне браузера, а npm используется для управления зависимостями вашего проекта.

1. Установка Node.js и npm:

• Перейдите на официальный сайт Node.js и скачайте версию, рекомендованную для большинства пользователей (https://nodejs.org/en/download).
• После установки убедитесь, что всё работает, выполнив в терминале следующие команды:

$ node --version

2. Редактор кода: Вы можете использовать любой текстовый редактор, но рекомендуем Visual Studio Code за удобство подсветки синтаксиса, автодополнения и интеграцию с Git.

Вот список популярных редакторов, с которыми можно ознакомиться:

Создание нового проекта React.JS

1. Установка Vite и создание проекта

npm create vite@latest my-react-app -- --template react

Замените my-react-app на желаемое имя вашего проекта.

2. Перейдите в директорию проекта

cd my-react-app

3. Установка зависимостей:

npm install

4. Запуск сервера разработки:

npm run dev

Это откроет приложение в вашем браузере по адресу http://localhost:3000.

Понимание структуры проекта

Ваш новый проект React имеет предопределённую структуру. Вот основные файлы и папки, с которыми вы будете работать:

• public/index.html: единственный HTML-файл, куда будет рендериться ваше React-приложение.
• src/index.js: точка входа JavaScript вашего React-приложения.
• src/App.js: базовый React-компонент, который служит отправной точкой для вашего приложения.

Пример: В этом примере реализовано простое React-приложение с выводом «Hello, World».

import React from 'react';

function App() {
    return (
        <div className="App">
            <h1 style={{ textAlign: 'center' }}>
                Hello, World!
            </h1>
        </div>
    );
}

export default App;

Результат:

Основные концепции React