React.js на русском языке. Часть первая



Мне очень нравится концепция и подход React.js, что решил сделать перевод официальной документации React.js на русский язык. В одном посте все конечно не поместится, так что это будет цикл постов.

Для чего я это сделал? Хочется внести свой вклад в данную библиотеку и скорее всего данный перевод будет полезен, кто сильно хочет учить и развиваться в данном направлении, но имеет проблемы с английским языком.

Оглавление:


1 — Часть первая — Установка
2 — Часть вторая — Внедрение JSX
3 — Часть третья — Отрисовка элементов
4 — Часть четвертая — Компоненты и свойства
5 — Часть пятая — Состояние и жизненный цикл
6 — Часть шестая — Обработка событий
7 — Часть седьмая — Условный рендеринг
8 — Часть восьмая — Списки и ключи
9 — Вся документация

Установка


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

Знакомство с React


Если вы хотите просто ознакомиться с библиотекой, вы можете использовать онлайн-инструмент CodePen. Попробуйте начать с легкого примера кода «Hello World». При этом, не нужно ничего устанавливать, вы можете просто модифицировать код и наблюдать, как работает программа.

Создание одностраничного приложения


Create React App – это лучший инструмент для создания нового одностраничного приложения.

Он снабжает вас необходимой средой для разработки приложений, это означает, что вы будете иметь доступ к новейшим функциям JavaScript, получите хороший опыт разработчика и сможете оптимизировать свои приложения.

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Create React App не привязан к программной логике или хранилищам информации, он просто создает фронтенд, с которым вы можете работать с любого сервера. В процессе сборки он использует такие расширения, как Webpack, Babel и ESLint, однако, вы можете конфигурировать их.

Как добавить React к приложению


Используя npm. Мы рекомендуем использовать React с пакетным менеджером npm c таким упаковщиком, как Browserify или webpack. Если вы используете npm для управления клиентскими пакетами, вы можете установить React следующим образом:

npm install --save react react-dom

И импортируем его в наш проект:

import React from 'react';
import ReactDOM from 'react-dom';

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

Этот код преображается в HTML элемент с ID root, поэтому, в HTML файле нужно установить . Когда вы используете React таким образом, вы должны преобразовать код JavaScript, используя Babel, указать es2015 и react, и предварительные установки.

Чтобы использовать React в режиме разработчика, измените следующие значение NODE_ENV на «production».

Внедрение ES6 и JSX


Мы рекомендуем использовать React с Babel чтобы иметь возможность иcпользовать ES6 в вашем JavaScript коде. ES6 это набор современных инструментов JavaScript который упрощает процесс разработки, а JSX это расширение языка JavaScript, который отлично работает с React.

Инструкции по установке Babel показывают, как конфигурировать Babel во множество различных сред разработки. Убедитесь, что вы установили babel-preset-react и babel-preset-es2015 и подключили их в вашем .babelrc, и тогда продолжайте работать.

Использование CDN (Сеть доставки контента)


Если вы не хотите управлять клиентским пакетом через npm, react и react-dom пакеты также позволяют использовать UMD распределения в dist папках, которые размещены в CDN:

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

Hello World


Чтобы начать работу с React, просто используйте этот пример кода «Hello World» на CodePen. Вам не нужно ничего устанавливать, вы можете просто открыть его в другой вкладке и выполнять действия, следуя нашим примерам. Если вы предпочитаете использовать локальную среду разработки, обратитесь к странице установка.

Небольшой пример React кода выглядит так:

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

Он отображает заголовок «Hello World» на странице. Следующие несколько разделов будут постепенно знакомить вас с использованием React. Мы изучим блоки разработки приложений React: их элементы и компоненты. После того, как вы овладеете инструментом React, вы сможете создавать сложные приложения из небольших повторно применяемых частей.

Примечание на JavaScript


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

Также, в некоторых примерах мы используем обозначения ES6. Мы стараемся употреблять их нечасто, поскольку они являются относительно новыми, но мы также хотим, чтобы вы немного познакомились с такими формулировками, как стрелочная функция (arrow functions), классы (classes), шаблонные строки (template literals), и переменные let и const. Вы можете использовать Babel REPL чтобы убедиться, что ES6 код компилируется.
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 21
  • 0
    Залейте картинку на habrastorage. Да и вообще я представил, что не знаю о существовании react. Из поста не ясно, для чего этот инструмент, когда его использование оправдано, а когда наоборот.
    • +1
      Я Вас понимаю, но в цикле постов которые еще выйдут продолжением к этому посту, будет описан перевод официальной документации, как она есть на сайте React.js в разделе документация.
      • 0
        Собираетесь полностью перевести документацию?
        • +2
          Она уже переведена. На днях выложу вторую часть, продолжение к этому посту.
  • 0
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    );
    

    Скажите, почему мы можем первым аргументом метода render() вставлять не строку (не в кавычках) и не имя переменной?
    • 0
      Не очень могу понять суть Вашего вопроса.
      Вместо Hello, world! можно сунуть готовое приложение типа <MyApp />
      или объект, который
      var MyApp = React.createClass({
          render: function () {
              
          }
      });
      


      будет

       MyApp,
        document.getElementById('root')
      );
      
      • 0
        Он имел ввиду почему там HTML разметка идёт без кавычек, а «как есть»
    • 0
      Потому, что JSX…
    • 0

      Добрый день. Спасибо Вам за труд. Хорошее начало.
      Думаете делать pull request с переводом в оффрепо ?

      • 0
        Спасибо!
        Да, в ближайшее время за пушу.
      • 0
        Интересуюсь React.js для написания мобильных приложений, в данный момент пишу нативно под андроид. Какие технологии и языки (кроме JavaScript) нужно знать (полезно знать) или ознакомиться с ними перед тем, как приступать к изучению React.js?
        • 0
          react.js native
          Вот тут про него написано — https://habrahabr.ru/post/249393/
          • 0
            а перевод доков ReactNative будет?)
          • +1
            Начало неплохое, но все равно, чувствуется некий машинный перевод. Построение фраз как-то шаблонно, что ли, не могу передать, но это есть.
            • 0
              Чтобы использовать React в режиме разработчика, измените следующие значение NODE_ENV на «production».

              Как раз таки «production» значение environment-переменной выведет сборку из «режима разработчика» (как вы его назвали) и обеспечит сборку под «продакшен»
              Т.е. смысл истинного текста и вашего перевода — прямо противоположены по смыслу. Как-то вы не облегчили участь «не знающих буржуйского» а только вводите им еще большую путаницу.
              Ваше начинание очень хорошее, русскоязычной информации действительно маловато. Но убедитесь что Ваш «перевод» отражает истинную суть оригинальных текстов.
              PS: Не вооруженным глазом видна работа «гугл-переводчика». Текст в некоторых местах вообще лишен явно выраженного смысла:
              Этот код преображается в HTML элемент с ID root, поэтому, в HTML файле нужно установить. Когда вы используете React таким образом, вы должны преобразовать код JavaScript, используя Babel, указать es2015 и react, и предварительные установки.

              Установить что? где субъект предложения?
              Этот код не «преображается», результат рендеринга компонента React.JS замещает собой явно указанный блок в HTML, по смыслу заведомо существующий, по этому необходимо позаботиться о том чтобы в разметке целевой страницы это блок был размечен.
              Ну и так далее, через строчку, текст требует переформулирования и уточнения своего содержания.

              • 0

                Некорректно работает ссылка на Babel REPL, теряется часть кода.

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.