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

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

Установка

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(
  
Hello, world!
,
  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:

Hello World

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

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

ReactDOM.render(
  
Hello, world!
,
  document.getElementById('root')
);

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

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

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

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

Комментарии (4)

• ilyaplot

  17 ноября 2016 в 11:19 (комментарий был изменён)

  0

  ↑

  ↓

  Залейте картинку на habrastorage. Да и вообще я представил, что не знаю о существовании react. Из поста не ясно, для чего этот инструмент, когда его использование оправдано, а когда наоборот.

  • html_manpro

    17 ноября 2016 в 12:09

    0

    ↑

    ↓

    Я Вас понимаю, но в цикле постов которые еще выйдут продолжением к этому посту, будет описан перевод официальной документации, как она есть на сайте React.js в разделе документация.

• TITnet

  17 ноября 2016 в 12:32

  0

  ↑

  ↓

  ReactDOM.render(
    
  Hello, world!
  ,
    document.getElementById('root')
  );
  

  
  Скажите, почему мы можем первым аргументом метода render () вставлять не строку (не в кавычках) и не имя переменной?

  • html_manpro

    17 ноября 2016 в 12:39

    0

    ↑

    ↓

    Не очень могу понять суть Вашего вопроса.
    Вместо Hello, world! можно сунуть готовое приложение типа
    или объект, который
    

    var MyApp = React.createClass({
        render: function () {
            
        }
    });
    

    будет

     MyApp,
      document.getElementById('root')
    );