|
|
@@ -0,0 +1,48 @@
|
|
|
+# React: basics.
|
|
|
+
|
|
|
+**React** - библиотека для построения интерфейса на JS. Представлена Facebook в 2013.
|
|
|
+
|
|
|
+Изначально была задумана для Web-приложений (браузер), но впоследствии появилась библиотека **React Native**, где
|
|
|
+встроенные элементы интерфейса мобильных ОС скриптуются на JS в библиотеке-близнеце **React**.
|
|
|
+
|
|
|
+На **React** удобно строить **SPA**.
|
|
|
+
|
|
|
+## Virtual DOM.
|
|
|
+
|
|
|
+В крупных веб-приложениях много **DOM**-элементов, что вызывает определенное снижение производительности интерфейса.
|
|
|
+Для решения этой проблемы в React используется не настоящий, а **виртуальный DOM**, который хранит минимум нужной
|
|
|
+информации и синхронизируется с настоящим **DOM** оптимальным образом.
|
|
|
+
|
|
|
+
|
|
|
+## Компонентный подход.
|
|
|
+
|
|
|
+**React** предоставляет **компонентный подход** к работе с интерфейсом. **Компонент** - обособленный
|
|
|
+элемент интерфейса, который обладает своим отображением и логикой. Компоненты реализуются как классы
|
|
|
+**ES6** и могут быть легко переиспользованы путем подключения/копипасты класса в другой проект.
|
|
|
+
|
|
|
+## JSX.
|
|
|
+
|
|
|
+Отображение компонента в-основном реализуется с помощью синтаксиса **JSX**, который представляет
|
|
|
+собой аналог **HTML**, однако вместо тэгов используются имена классов **компонентов**, а атрибуты
|
|
|
+тэга попадают как "Базовые настройки" в объект компонента. При этом в любом месте **JSX** может
|
|
|
+быть "включен" JavaScript с любыми выражениями.
|
|
|
+
|
|
|
+**JSX** *транспилируется* в вызов функций **React** для создания компонентов. Всё, что вы
|
|
|
+видите в **JSX** попадает в параметры этих функций. Поэтому там допустимы только **выражения**, но
|
|
|
+не управляющие конструкции типа `for`.
|
|
|
+
|
|
|
+Возможность строить интерфейс как "HTML со своими тэгами", причем тэги эти (т. е. компоненты)
|
|
|
+могут быть любой сложности - сильно упрощает и способствует структуризации кода и интерфейса.
|
|
|
+
|
|
|
+## create-react-app
|
|
|
+
|
|
|
+Супер скрипт, который позволяет вам создать каркас приложения **React** за одну команду.
|
|
|
+Устанавливается с помощью `npm`:
|
|
|
+
|
|
|
+```bash
|
|
|
+npm install -g create-react-app # ставим глобально, что бы (в идеале) появилась команда в PATH
|
|
|
+create-react-app projectName # создает проект в текущей директории, подтягивает всё нужное опять же используя npm
|
|
|
+```
|
|
|
+
|
|
|
+После таких действий в папке `projectName` появятся файлы с проектом. Корнем приложения является файл `App.js` в
|
|
|
+папке `src`.
|
