Изучение документации - не самый популярный у программистов способ начать работу с новым инструментом 😄 Но почему бы и не попробовать. Тем более, у React как будто очень хорошая документация:

👉 https://reactjs.org/ - официальный сайт (англ.)
👉 https://ru.reactjs.org/ - официальный перевод на русский

#ссылки #документация

Подключение React

Есть несколько способов подключить React в проект.

👉 Самый простой - через CDN

Отличный вариант для начала, чтобы попробовать-поиграться с новым инструментом. Просто создал страницу, подключил пару тегов script и начал работу.
все ссылочки - здесь https://reactjs.org/docs/cdn-links.html
есть и develop, и production версии

👉 Чуть сложнее - create-react-app

create-react-app это инструмент для разворачивания проекта на React с нуля. Сначала нужно установить npm-пакет, а затем запустить команду в консоли. Опять же хороший вариант для обучения, чтобы не заморачиваться с настройкой среды, а также для создания новых проектов, не отягощенных старым кодом.

Инструкции здесь: https://github.com/facebook/create-react-app

👉 Для продвинутых - Собрать собственную среду разработки

Потребуется подключить собственно React (npm-пакет: https://www.npmjs.com/package/react) и настроить компиляцию JSX с помощью плагинов Babel.

👉 Песочница

А можно ничего никуда не подключать, а пойти на https://codepen.io/ (или https://codesandbox.io/) и поиграть прямо там.

#началоработы #подключение #документация

Hello, world!

Любой навык закрепляется практикой, а любая практика начинается с Hello, world!

https://codepen.io/furrycat/pen/VwprQLO

Что мы тут имеем:

1. Корневой html-элемент #root, в который будет рендериться React-приложение
2. Подключение нужных библиотек по CDN (React и ReactDOM)
3. Подключение Babel для компиляции JSX-синтаксиса
4. Метод ReactDOM.render, который принимает JSX-разметку и элемент, в который ее нужно вывести

#началоработы #примерыкода #документация

Компоненты

React основан на компонентном подходе, компоненты - это кирпичики, из которых строится ваше приложение.

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

Вообще есть два способа создать компонент - с помощью простой функции и с помощью класса. Пока разберем только первый, как самый популярный.

В общем, и разбирать особо нечего. Функциональный компонент - это просто функция, которая возвращает JSX-разметку, которую нужно вывести.

https://codepen.io/furrycat/pen/RwpjQKN

Имя функции в данном случае можно использовать как тег. Например, тег Component1 будет замещен на разметку, которую возвращает функция Component1.

#примерыкода #началоработы #компоненты #документация

Важно: Всегда именуйте компоненты с заглавной буквы.

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

#важно #началоработы #компоненты #документация

​Передача параметров в компоненты

В компонент можно передать параметры - в React они называются пропсы (props). Это делается через атрибуты тега.

https://codepen.io/furrycat/pen/eYveVqX?editors=0010

Если нужно передать строку, то используйте кавычки, как мы всегда делаем с атрибутами. Для любого другого типа данных (через пропсы можно передать все, что угодно) потребуются фигурные скобки.

Функциональный компонент принимает объект props первым аргументом. Чтобы вывести полученные данные в разметке, используйте фигурные скобки. О JSX-разметке поговорим подробнее в следующий раз.

#началоработы #компоненты #примерыкода #документация