Найти тему
PulseX education

Создание простого компонента React.js (React 2/∞)

Оглавление

Думал сразу описать как работает JWT, но наверное это будет очень больно для новичков в React. Поэтому, сначала пример попроще - создание компонента.

Вариант 1: в одном файле (не рекомендуется)

Берем наш файл App.js и кидаем туда код.

Создание компонента React в App.js
Создание компонента React в App.js

Что произойдет: при запуске приложения запуститься функция function App(), и там, где указан компонент <Title/> подгрузится результат выполнения функции function Title()

Вариант 2: правильно (без создания структуры)

Создаем файл в src, к примеру, Title.jsx с кодом:

Создание отдельного компонента React
Создание отдельного компонента React

И вызываем его в App.jsx

Создание отдельного компонента React
Создание отдельного компонента React

Идея та же самая, но компонент лежит отдельно.

Вариант 3: правильно

Создаем в нашем проекте папку components, в ней папку для компонента, к примеру Card. И туда кидаем наш компонент и его стили.

Вариант хранения компонентов React
Вариант хранения компонентов React

На самом деле есть куча вариантов, как организовать код в React. Выше лишь один из вариантов.