Начало работы: создание проекта в Visual Studio Code
Создайте новую папку (например, «my-react-app»). Откройте её в Visual Studio Code. Создайте внутри два файла: index.html и src/index.js.
Подключение React и ReactDOM в index.html
В файле index.html добавьте базовую структуру HTML:
<!DOCTYPE html>
<html>
<head>
<title>React JS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="src/index.js"></script>
</body>
</html>Подключите React и ReactDOM. Для получения скриптов воспользуйтесь официальным сайтом React (ссылка в описании). Добавьте скрипты в раздел <head>. (Скрипты с официального сайта React должны быть добавлены сюда).
Написание первого кода React в index.js
В файле index.js используйте ReactDOM.render() для отображения элементов. Этот метод принимает два аргумента: отображаемый HTML-элемент и DOM-элемент, куда он будет вставлен.
ReactDOM.render(<h1>Привет</h1>, document.getElementById('root'));Этот код отобразит заголовок «Привет» внутри элемента с id «root».
Отображение нескольких элементов
Чтобы вывести несколько элементов, оберните их в родительский элемент (например, <div>):
ReactDOM.render(
<div>
<h1>Привет</h1>
<h2>Мир</h2>
</div>,
document.getElementById('root')
);ReactDOM.render() всегда возвращает один родительский элемент.
Запуск проекта
Установите расширение «Live Server» в Visual Studio Code. Кликните правой кнопкой мыши на index.html и выберите «Open with Live Server».
В этом уроке вы создали простой проект на React, подключили необходимые библиотеки и вывели HTML-элементы на страницу. В следующих уроках будут рассмотрены более эффективные методы подключения React и более сложные аспекты работы с библиотекой.