Установка и вывод данных

Начало работы с React

Для работы с React сначала надо установить Node.JS, и запустить команду ниже для установки приложения:

npx create-react-app folder-app

После выполнения команды npm start в браузере станет доступен адресс localhost:3000, в котором загрузится приложение на React.

Для более детального изучения рекомендуется установить Next.JS, которая является готовым веб-приложением на React.

В React используется библиотека Babel, которая позволяет использовать более читабельный код для React-приложений (такой код называется JSX).

Сборка create-react-app на данный момент считается устаревшей, и больше подходит для начала обучения React. Если надо создавать боевые проекты, то для этих целей лучше устаналивать фреймворки, такие как Next, на котором сейчас работает большинство проектов на React.

Вывод данных

Сначала надо создать HTML-тег, в котором будет загружаться React-приложение.

<!-- Тег, в котором будет выводится приложение -->
<div id="react-app"></div>

И в файле index.js вызвать React-приложение через метод render().

// index.js
# React 19
import React from 'react';
import {createRoot} from 'react-dom/client';

const root = createRoot(document.getElementById('react-app'));
root.render("Приложение на React");

# React 18
import React from 'react';
import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('react-app'));
root.render("Приложение на React");

Теперь в теге «#react-app» будет загружаться строка «Приложение на React».

В методе render() передаётся строка, т.е. прописать HTML не получится (теги будут экранированы). Но можно создать объект, который сгенерирует HTML, для этого будет использоваться JSX.

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
    return(
        <div className="react-app">
            <p>Приложение на React</p>
        </div>
    )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

В коде выше создаётся компонент App, которая через метод render() выводит HTML-код в теге «#react-app».

Компонент App завёрнут в тег <React.StrictMode>. Он нужен для того, чтобы React сделал дополнительные проверки на ошибки или на устаревший код.

Также стоит обратить внимание, что классы в HTML задаются через атрибут className.

Компоненты надо называть с заглавной буквы, иначе React будет воспринимать объект как тег. Т.е. <app /> восприниматся как тег <app></app>, а <App /> уже как компонент.

JSX выглядит как обычный HTML, но при генерации кода элементы HTML преобразуются в объекты JavaScript.

HTML-код должен быть завёрнут в теге <div>, иначе будет появляться ошибка «Uncaught SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?».

// Ошибка: нет родительского тега
function App() {
  return(
    <img src="logo" alt="" />
    <p>Приложение на React</p>
  )
}

// Правильный вариант
function App() {
  return(
    <div>
      <img src="logo" alt="" />
      <p>Приложение на React</p>
    </div>
  )
}

Также стоит отметить, что все теги должны быть закрыты. Если используется одиночный тег, например <img>, то в JSX он должен выглядеть как <img />.

В версии React 16.8 появились хуки, которые полностью изменили разработку приложений на React.