Подключаем react
ОБНОВЛЕНИЕ 2018: в учебнике хорошая теория, но ему уже два года. Проверяйте версии пакетов. За выходом нового учебника можно следить в telegram канале или twitter
На канале так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы, присоединяйтесь!
Подключаем react
Как уже было сказано, реакт - просто библиотека, которая так же просто подключается. Мы уже скачали react и react-dom, давайте добавим их на страницу.
Так же, сразу подключим наш app.js, в котором будем писать код.
index.html
<!DOCTYPE html>
<html>
<head>
<title>React [RU] Tutorial</title>
</head>
<body>
<div id="root">Привет, я #root</div>
<script src="js/react/react.js"></script>
<script src="js/react/react-dom.js"></script>
<script src="js/app.js"></script>
</body>
</html>js/app.js
Посмотрим в браузер: 
Отлично. Предлагаю вывести что-нибудь с помощью react.
Изменим app.js:
js/app.js
Вау! Мы только что добавили заголовок (<h1></h1>) с помощью react.
Мы использовали функцию ReactDOM.render, которая принимает первым аргументом - реакт-компонент, а вторым - элемент DOM дерева, куда мы хотим добавить react.
Вообще, зачем мы добавили react на нашу страницу? Наверное, потому что где-то слышали, что он быстрый. Почему же?
React при изменениях DOM-дерева, старается использовать минимально-возможные воздействия. React использует "виртуальный DOM" (удаляет/изменяет/добавляет элементы и т.д.) для того, чтобы в реальный DOM за "один присест" добавить все изменения. Как известно, операции с DOM-деревом самые дорогостоящие. Поэтому "интеллектуальный" подход реакта к ним - та самая "киллер-фича".
Данное объяснение считаю очень "общим", но, чтобы не потеряться в теории, этого сейчас вполне достаточно.
Вернемся к нашему коду в файле app.js
С таким синтаксисом, я про React.createElement('h1', null, 'Привет, Мир!'),, реакт явно не завоевал бы мир, поэтому команда разработчиков решила писать разметку в javascript-коде и назвала такой синтаксис JSX.
У такой техники есть ярые противники, но, мне кажется, пользы от использования реакта гораздо больше, чем от "правильного" разделения на разметку и скрипты.
Исправим наш код. js/app.js
Поскольку React - javascript библиотека, а мы пишем JSX синтаксис внутри обычного .js файла, нам необходимо как-то научить браузер превращать
<h1>Hello, world!</h1>
в
React.createElement('h1', null, 'Привет, Мир!').
С этим отлично справляется babel. Так как у нас нет никакого "сборщика" кода, нам необходимо добавить еще один скрипт на страницу. Скачайте его, либо подключите через CDN. Я скачаю и положу его в папку js/react.
Так же, для нашего скрипта нужно указать атрибут type='text/babel'
index.html
Итого: мы можем писать привычную нам HTML разметку внутри "реакт-кода".
Важно понимать - никакой магии нет. Babel превращает HTML* разметку в Javascript код.
*Правильнее это называть JSX разметкой, вы скоро увидите небольшие отличия.
Исходный код на данный момент.
Last updated