Abr@X@bra.ru
Курс по React JS #1. Пилотный выпуск. Привет React!
Курс по React JS #1. Пилотный выпуск. Привет React!

Курс по React JS #1. Пилотный выпуск. Привет React!

26.03.2017
1256

В этом посте расскажу как написать первое простое приложение на React js.

Подготовка к работе

Для начало я подготовил несколько файлов, который находятся в папке react, папка открыта у меня в редакторе.


Первый файл на который мы посмотрим, это index.html.


Как видите это простой html документ, ничего особенного в нем нет. В элементе body содержится div с id root, чуть позже я скажу зачем он. Далее идут два элемента script.

В первом элементе загружается библиотека React, во втором элементе подгружается дополнение к React для работы с DOM, который называется react-dom.

Как я сказал ранее помимо web-приложений с помощью React можно создавать и мобильные приложения, то есть ядро React для DOM и мобильных приложений одно, мы его загружаем первым. Соответственно в файле react-dom.min.js находится логика для работы с DOM. И последним подгружается файл app.js, этот файл в котором мы будем писать код, сейчас он пустой.

Давайте посмотрим на то как страница выглядит в браузере.  


Как видите пока ничего интересного не происходит. Перейдем в файл app.js и начнем писать код.

Пишем код на React JS

И так, на страницу я хочу вывести сообщение “Привет React!”. Для начало необходимо создать так называемый React element. Для создание React элементов используется метод createElement у объектов React.

Давайте напишем:

React.createElement()

Этот метод принимает три аргумента.

Первый, это название DOM элемента, который мы хотим создать. В нашем случае мы хотим создать заголовок поэтому укажем h1.

React.createElement('h1')

Вторым аргументом отправляется свойство. Свойство очень похоже на атрибуты в HTML, например: class, id и т.д. Чуть позже я подробно расскажу про свойство, а пока просто отправим null.

React.createElement('h1', null)

И в качестве третьего аргумента, отправляется содержимое создаваемого элемента. В нашем случае содержимым h1 будет текст, поэтому в качестве аргумента отправим строку с содержимым “Привет React!”.

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

От метода createElement обратно мы получим элемент, которую сохраняем в переменную. Переменную назову element.

var element = React.createElement('h1', null, 'Привет React!');

Теперь полученный элемент можно вывести на страницу, для этого используется метод render у объекта react-dom, этот объект доступен глобально. Продолжим писать код ниже.

var element = React.createElement('h1', null, 'Привет React!');


ReactDOM.render();

В качестве первого элемента принимается react элемент мы его только ,что создали, поэтому укажем переменную element.

var element = React.createElement('h1', null, 'Привет React!');


ReactDOM.render(element);

В качестве второго элемента, принимается doom-element в который мы хотим поместить react-element.

Напомню, что на странице index.html у нас имеется dom-element помеченный как id - root. Именно в этот элемент вместо слово “загрузка” я хочу поместить react-element.

Получить доступ к dom-element можно несколькими способами. Самым популярным является метод getElementById у объекта document и в качестве значения отправим название id - root.

var element = React.createElement('h1', null, 'Привет React!');


ReactDOM.render(element, document.getElementById('root'));

Сохраним файл и посмотрим на страницу в браузере, перед этим обновим ее.



И увидим сообщение “Привет React!”. Добавим на страницу еще несколько элементов.  

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

Над переменной element создадим еще одну переменную, я назову ее image, в качестве значения укажем React.createElement, в качестве названия тега я укажу img.

var image = React.createElement('img')

var element = React.createElement('h1', null, 'Привет React!');


ReactDOM.render(element, document.getElementById('root'));

Напомню в качестве второго элемента указывается свойство. Как я уже сказал свойство очень похожи на атрибуты в HTML.

Например, у элемента img в html есть атрибут src который указывает на путь к файлу. Соответственно, элементу который мы создаем необходимо указать свойство или атрибут.

Для того, чтобы указать свойство в качестве второго аргумента отправляется литерал объекта {...}. Название практически всех свойств, соответствует названию атрибутов в HTML, за некоторым исключениям с ними мы познакомимся по мере необходимости.

Итак изображению нам необходимо указать свойство src в качестве значения я укажу ссылку на сайт React.

var image = React.createElement('img', {src: 'https://facebook.github.io/react/img/logo.svg'});

var element = React.createElement('h1', null, 'Привет React!');


ReactDOM.render(element, document.getElementById('root'));

В HTML изображения являются пустыми элементами, то есть внутри них ничего нет, поэтому отправлять третий элемент нам не нужно.

Далее переменную element я переименую в title, так как это будет заголовок и в качестве текста я укажу “React”.  

var image = React.createElement

('img', {src:'https://facebook.github.io/react/img/logo.svg'});

var title = React.createElement('h1', null, 'React');


ReactDOM.render(element, document.getElementById('root'));

Далее создаем еще одну переменную, назовем ее subtile, это будет подзаголовок. Я хочу отправить параграф, поэтому первым элементом будет p, свойство не какие указывать не буду, отправлю null. И в качестве текста для параграфа, я укажу “Библиотека для создание пользовательских интерфесов”.

var image = React.createElement('img', {src: 'https://facebook.github.io/react/img/logo.svg'});

var title = React.createElement('h1', null, 'React');

var subtitle = React.createElement('p', null, 'Библиотека для создание пользовательских интерфесов');


ReactDOM.render(element, document.getElementById('root'));

Теперь у нас появилась небольшая проблема. В качестве первого аргумента отправить сразу три элемента мы не можем. Необходимо обернуть эти элементы еще в один элемент и вот его отправить на страницу.

Переменную назову container, в качестве элемента укажу div.  

var image = React.createElement('img', {src: 'https://facebook.github.io/react/img/logo.svg'});

var title = React.createElement('h1', null, 'React');

var subtitle = React.createElement('p', null, 'Библиотека для создание пользовательских интерфесов');

var container = React.createElement('div')


ReactDOM.render(element, document.getElementById('root'));

Далее диву я хочу присвоить класс container, поэтому отправим объект {...}. И вот здесь есть как раз исключения про которые я говорил. Отправить слово class мы не можем, так как мы пишем код на JS, слово class в JS является зарезервированным. Для решения этой проблемы, для того, чтобы элементу указать class используется слово className, Name пишем с большой буквы и далее название класса container.

var image = React.createElement('img', {src: 'https://facebook.github.io/react/img/logo.svg'});

var title = React.createElement('h1', null, 'React');

var subtitle = React.createElement('p', null, 'Библиотека для создание пользовательских интерфесов');

var container = React.createElement('div', {className: 'container'});


ReactDOM.render(element, document.getElementById('root'));

И в качестве третьего аргумента указываем то, что должно находиться внутри этого элемента. В нашем случае должно находиться изображение - image, заголовок - title, подзаголовок - subtitle.

var image = React.createElement('img', {src: 'https://facebook.github.io/react/img/logo.svg'});

var title = React.createElement('h1', null, 'React');

var subtitle = React.createElement('p', null, 'Библиотека для создание пользовательских интерфесов');

var container = React.createElement('div', {className: 'container'}, title, image, subtitle);


ReactDOM.render(element, document.getElementById('root'));

Заметьте, элементы я просто указываю через запятую, это не массив. Теперь в метод render мы отправляем не элемент, а container.     

var image = React.createElement('img', {src: 'https://facebook.github.io/react/img/logo.svg'});

var title = React.createElement('h1', null, 'React');

var subtitle = React.createElement('p', null, 'Библиотека для создание пользовательских интерфесов');

var container = React.createElement('div', {className: 'container'}, title, image, subtitle);


ReactDOM.render(container, document.getElementById('root'));

Сохраним изменения и посмотрим на результат в браузере.


Отлично, мы видим изображение, название и подзаголовок.

Давайте откроем консоль в браузере и посмотрим как там дела.


Тут мы видим сообщение. В этом сообщение нам предлагается скачать React DevTools и использовать HTTP сервер.

О том что нам предлагают установить и для чего нам нужен HTTP сервер, я расскажу в следующих постах.

Чтобы не пропустить следующих выпусков по урокам React js и быть в курсе всех последних новостей, подписывайся на мои аккаунты в соцсетях, все ссылки на них ты сможешь найти у меня на сайте.

React JS
Читайте также:
PhpStorm, правильная настройка для web-разработки

PhpStorm, правильная настройка для web-разработки

В этом посте хочу поделится своим опытом, как правильно работать с IDE PhpStorm и удаленным web сервером. ...

Читать
10 вредных советов для начинающих разработчиков

10 вредных советов для начинающих разработчиков

Другие программисты могут не согласиться с данными советами, но это именно то, что делает их такими редкими и ценными.
Читать
React.js на русском языке. Часть первая

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

Опубликовал свой первый пост, на habrahabr.ru по React.js
Мне очень нравиться концепция и подход React.js, что...
Читать
Источник: codedojo