Skip to content

Latest commit

 

History

History
136 lines (90 loc) · 9.59 KB

03. Hello World на чистом Реакте прямо в браузере.md

File metadata and controls

136 lines (90 loc) · 9.59 KB
Raw

Hello World на чистом Реакте прямо в браузере

Разберёмся почему Реакт в своей основе это самый обычный Джаваскрипт

Погнали дальше! Про Джсх и его отличия от ХТМЛ узнали, с Джаваскриптом разобрались, пора эти знания соединять.

Реакт в браузере

Реакт — это чистый Джаваскрипт. Я об этом говорил и буду говорить: Реакт это чистый Джаваскрипт и это касается не только того, что в Джсх можно писать выражения, но и того, что сам Реакт может работать без всяких Джсх и прочих Вебпаков. Давайте разберёмся.

Как обычно писали сайты? Создавали .html-страницу, туда тегом <script src=""></script> подключали Джс (или писали прямо внутри тегов), так и жили.

Потом сайты усложнялись, превращались в приложения, пришла Нода с NPM-ом (пакетным менеджером), появились всякие RequireJS, Браузерифай и прочее, и прочее, и прочее.

Примерно в 2014-2015 этот пик достиг апогея и появились 6to5 (ныне Babel), systemjs и Вебпак. Честно говоря, освоить тогда Реакт было тяжко — нужно было сначала разобраться со всем этим тулингом. Поэтому сегодня мы изучим Реакт as is, без всяких пекейдж манагеров и модуль бандлеров. Погнали!

Открываем документацию Реакта и идём сразу в Installation → CDN Links. Сама документация посвящена уже работе с Джсх, поэтому будем, так сказать, на своих двоих со всем этим разбираться.

Реакт делится на две библиотеки: Реакт и РеактДОМ.

Чем занимается Реакт? В чём вообще смысл Реакта? Реакт строит дерево элементов и оптимизировано его обновляет через VirtualDOM.

Это всё! В этом весь смысл Реакта: минимальными усилиями отрисовать дерево элементов. К сожалению, обновление самим браузером очень тяжелое, вот и приходится тянуть Реакт, чтобы этим заниматься. ВиртуалДОМ хранит в памяти текущую версию дерева и когда получает обновления, строит новое, затем сравнивает их между собой и ищет отличные куски.

Но если Реакт только строит дерево элементов, кто работает с браузером? РеактДОМ. РеактДОМ это рендерер — то, что рендерит дерево Реакта куда-либо. В данном случае — в ДОМ.

Бывают ещё react-native, react-tv, redocx (рендеринг в .docx!), react-blessed (в терминал!).

Если мы подключим Реакт и РеактДОМ, то у нас будут доступны два объекта: React и ReactDOM. У каждого из них есть свой АПИ (интерфейс для работы с библиотекой), нас интересуют функции React.createElement() и ReactDOM.render(), с помощью них мы и напишем простенькое приложение.

Пишем Hello, world на createElement()

Работать мы будем в онлайн-песочнице: например, в JSFiddle. Обычно используют CodeSandbox — там есть поддержка современных библиотек и фреймворков.

Hello, world это самое примитивное приложение, которое выводит строку Hello, world.

В index.html подключим React и ReactDOM, а наш код будем писать в третьем <script>

<!DOCTYPE html>
<html  lang="en">
<head>
  <meta  charset="UTF-8">
  <title>Курс по Реакту</title>
</head>
<body>

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script>
    // здесь будет код
  </script>
</body>
</html>

скрипты подключаются перед закрывающим </body> чтобы не блокировать загрузку страницы

Теперь создадим див с айди app — он нам понадобится как место, куда будет рендерить РеактДОМ.

...
<body>
  <div id="app"></div>

  ...
</body>
...

Теперь в третьем script напишем наш первый компонент.

...
<script>
  // нам к нему нужно будет обращаться, поэтому назначим в константу
  const PlainHelloWorld = React.createElement('h1', null, 'Hello World');
</script>
...

В функции createElement три параметра: компонент, пропы и чилдрен.

Компонент

Вторым важным плюсом Реакта после ВиртуалДОМ является компонентный подход: вы можете объединять своё приложение в компоненты и использовать их. Что такое компоненты? Компоненты это функции или классы (об этом позже), которые возвращают реакт-дерево. Давайте попробуем написать свой первый компонент?

const HelloWorld = function() {
  return React.createElement("h1", null, "Hello World");
};

Здесь ничего сложного нет — вместо ссылки на наш h1 мы сделали компонент HelloWorld, с которым будем работать

Пропы

Пропы — это объект со всеми атрибутами, который приходит в компонент при его вызове. Например, атрибут src в <img /> будет доступен под props.img в функции function Img(props) { ... }.

Чилдрен

Но как вкладывать компоненты друг в друга, мы же работаем с деревом? Для этого есть специальный проп props.children — именно он и передаётся третьим параметром в createElement.

Окей, звучит всё непонятно, память вроде бы запомнила, давайте теперь это всё отрендерим — в этом нам поможет ReactDOM.render(component, element).

<script>
  // нам к нему нужно будет обращаться, поэтому назначим в константу
  const PlainHelloWorld = React.createElement('h1', null, 'Hello World');

  // сделаем свой компонент
  const HelloWorld = function() {
    return React.createElement('h1', null, 'Hello World');
  }

  // отрендерим
  ReactDOM.render(PlainHelloWorld, document.getElementById("app"));
  // если бы мы хотели отрендерить свой компонент, то его нужно было бы сначала вызвать через createElement
  // ReactDOM.render(React.createElement(HelloWorld, null, null), document.getElementById("app"))
</script>

iframe: https://jsfiddle.net/hehL6x6t/2/embedded/result,html,js/

Это всё. Сегодняшний урок не очень практический и очень теоретический, но мне важно было показать вам на примерах, что Реакт — это чистый Джаваскрипт и вся его работа сводится к двум самым обычным функциям: React.createElement() и ReactDOM.render(). В будущем вам это понимание понадобится.

Задание? Попробуйте это всё собрать у себя локально!