Подключаем 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

console.log(React);
console.log(ReactDOM);

Отлично. Предлагаю вывести что-нибудь с помощью react.

Изменим app.js:

js/app.js

ReactDOM.render(
  React.createElement('h1', null, 'Привет, Мир!'),
  document.getElementById('root')
);

Вау! Мы только что добавили заголовок (<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

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Поскольку React - javascript библиотека, а мы пишем JSX синтаксис внутри обычного .js файла, нам необходимо как-то научить браузер превращать

<h1>Hello, world!</h1>

в

React.createElement('h1', null, 'Привет, Мир!').

С этим отлично справляется babel. Так как у нас нет никакого "сборщика" кода, нам необходимо добавить еще один скрипт на страницу. Скачайте его, либо подключите через CDN. Я скачаю и положу его в папку js/react.

Так же, для нашего скрипта нужно указать атрибут type='text/babel'

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>React [RU] Tutorial</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="js/react/react.js"></script>
    <script src="js/react/react-dom.js"></script>
    <script src="js/react/browser.min.js"></script>
    <script type="text/babel" src="js/app.js"></script>
  </body>
</html>

Итого: мы можем писать привычную нам HTML разметку внутри "реакт-кода".

Важно понимать - никакой магии нет. Babel превращает HTML* разметку в Javascript код.

*Правильнее это называть JSX разметкой, вы скоро увидите небольшие отличия.

Исходный код на данный момент.

PreviousПодготовкаNextСоздание компонента

Last updated