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

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

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

npx create-react-app folder-app

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

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

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

Вывод данных

Сначала надо создать 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 />.