Статьи

Начало работы с React и JSX

Август 27, 2018

Эта статья была обновлена ​​14 апреля 2016 года. В частности: инструкции по установке, примеры кода, синтаксис ES5 / ES6, прекомпиляция JSX.

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

Начало работы с React

Вероятно, самый простой способ начать работу с React — это включить необходимые библиотеки из CDN (мы сделаем это в наших примерах). Кроме того, вы можете использовать npm или скачать стартовый набор React с официального сайта.

Для начала давайте создадим каталог для нашего проекта, который содержит файл с именем index.html : 

 mkdir react-test && cd react-test touch index.html

Откройте index.html в вашем любимом редакторе и добавьте следующее: 

 <!DOCTYPE html> <html lang="en"> <head> <title>My First React Example</title> </head> <body> <div id="greeting-div"></div> <script src="https://fb.me/react-15.0.0.js"></script> <script src="https://fb.me/react-dom-15.0.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> <script type="text/babel"> var Greeting = React.createClass({ render: function() { return ( <p>Hello, Universe</p> ) } }); ReactDOM.render( <Greeting/>, document.getElementById('greeting-div') ); </script> </body> </html>

Давайте посмотрим, что происходит.

  1. Реакция следует за компонентно-ориентированной разработкой. Общая идея состоит в том, чтобы разбить весь пользовательский интерфейс на набор компонентов. В нашем случае у нас есть только один компонент с именем Greeting . В React вы создаете компонент, вызывая React.createClass() . Каждый компонент имеет метод render() который возвращает разметку для визуализации. В приведенном выше фрагменте мы просто вернули <p>Hello, Universe</p> , которая затем отображается в представлении.
  2. Компонент ничего не делает, пока не будет отображен. Чтобы отобразить компонент, вы вызываете ReactDOM.render() с компонентом для отображения в качестве первого аргумента. Второй аргумент — это элемент HTML, в котором вы хотели бы визуализировать свой компонент. В нашем случае мы визуализируем наш компонент Greeting в <div> с идентификатором greeting-div .
  3. Вам может быть интересно, что на самом деле является <greeting> ? Этот синтаксис известен как JSX (JavaScript XML), который позволяет создавать DOM-узлы с HTML-подобным синтаксисом. JSX не является обязательным, и вам не нужно использовать его для использования React, но у него много приятных функций, и нет никаких причин не использовать его.
  4. Поскольку браузер не понимает JSX изначально, нам нужно сначала преобразовать его в JavaScript. Это достигается путем включения в браузер встроенного в браузер ES6 и JSX преобразователя Babel 5 под названием browser.js . Babel распознает код JSX в тегах <script type="text/babel"></script> и на лету преобразует его в JavaScript. Преобразование JSX в браузере работает довольно хорошо во время разработки. Однако вам нужно будет предварительно скомпилировать код JSX в JS перед развертыванием в производство, чтобы ваше приложение рендерилось быстрее. Мы увидим, как это сделать позже.

Теперь вы можете открыть index.html в вашем браузере и увидеть сообщение «Привет, Вселенная» (интересно, правда?).

Покажите мне, как будет выглядеть приведенный выше фрагмент без JSX .

ES5 

 var Greeting = React.createClass({ render: function() { return React.createElement("p", null, "Hello, Universe"); }, }); ReactDOM.render( React.createElement(Greeting), document.getElementById('greeting-div') );

ES6 

 class Greeting extends React.Component { render() { return React.createElement("p", null, "Hello, Universe"); } } ReactDOM.render( React.createElement(Greeting), document.getElementById('greeting-div') );

Представляя свойства

React опирается на однонаправленный поток данных. Это означает, что поток данных происходит только в одном направлении, то есть от родителя к потомку через свойства. Эти свойства передаются дочерним компонентам через атрибуты в JSX. Внутри компонента вы можете получить доступ к переданным свойствам через свойство props компонента. Когда свойства изменяются, React выполняет повторную визуализацию вашего компонента, чтобы ваш пользовательский интерфейс соответствовал модели данных. Давайте изменим предыдущий фрагмент, чтобы каждые 2 секунды показывать случайное сообщение. 

 var Greeting = React.createClass({ render: function() { return ( <p>{this.props.message}</p> ); } }); setInterval(function() { var messages = ['Hello, World', 'Hello, Planet', 'Hello, Universe']; var randomMessage = messages[Math.floor((Math.random() * 3))]; ReactDOM.render( <Greeting message={randomMessage}/>, document.getElementById('greeting-div') ); }, 2000);

Приведенный выше код выбирает случайное сообщение из массива и перерисовывает наш компонент каждые две секунды. Выбранное сообщение передается как свойство с именем message . Вам также необходимо использовать пару фигурных скобок {} для передачи переменной. Теперь внутри компонента Greeting мы получаем доступ к переданному значению через this.props.message .

Если вы запустите приведенный выше фрагмент, он будет отображать случайное сообщение каждые две секунды (при условии, что каждый раз выбирается другое сообщение).

Просто отметьте, что пропущенные props являются неизменными. Вы просто передаете различные свойства компоненту через props . Внутри компонента вы никогда не пишете в this.props . Это сохраняет поток данных однонаправленным, и легче понять, как изменение данных влияет на все приложение.

Представляя государство и события

В React каждый компонент инкапсулирован и поддерживает свое собственное состояние (если оно с состоянием). Компонент с состоянием может хранить значение в своем состоянии и передавать его дочерним компонентам через props . Это гарантирует, что всякий раз, когда изменяется состояние компонента, props также меняются. В результате дочерние компоненты, которые зависят от этих props автоматически перерисовываются.

Чтобы укрепить эту концепцию, давайте изменим наш предыдущий фрагмент, чтобы при нажатии кнопки отображалось случайное сообщение. Для этого у нас будет два компонента:

  1. RandomMessage : это родительский компонент, который поддерживает случайно выбранное сообщение в своем состоянии.
  2. MessageView : это дочерний компонент, который имеет дело с отображением случайно выбранного сообщения.

Давайте рассмотрим каждый компонент подробно.

RandomMessage 

 var RandomMessage = React.createClass({ getInitialState: function() { return { message: 'Hello, Universe' }; }, onClick: function() { var messages = ['Hello, World', 'Hello, Planet', 'Hello, Universe']; var randomMessage = messages[Math.floor((Math.random() * 3))]; this.setState({ message: randomMessage }); }, render: function() { return ( <div> <MessageView message={ this.state.message }/> <p><input type="button" onClick={ this.onClick } value="Change Message"/></p> </div> ); } });

Наш компонент RandomMessage поддерживает свойство message в своем состоянии. Каждый компонент React имеет функцию getInitialState которая устанавливает начальное состояние компонента. В нашем случае мы инициализируем свойство message значением Hello, Universe .

Далее нам нужно отобразить кнопку, которая при нажатии обновляет свойство message новым значением. Ниже приведена разметка, возвращаемая нашим компонентом: 

 <div> <MessageView message={ this.state.message }/> <p><input type="button" onClick={ this._onClick } value="Change Message"/></p> </div>

Как видите, этот компонент отображает второй компонент, MessageView и кнопку ввода. Обратите внимание, что свойство message о состоянии компонента передается дочернему компоненту как атрибут в синтаксисе JSX. Наш компонент также обрабатывает событие нажатия кнопки, this.onClick прослушиватель событий this.onClick . Обратите внимание на верблюжью шкуру здесь. В HTML имена событий пишутся в нижнем регистре, т.е. onclick . Но в JSX вам нужно использовать верблюжий регистр для имен событий.

Наш обработчик события click выбирает случайное сообщение и обновляет состояние компонента, вызывая: 

 this.setState({ message:randomMessage });

Функция setState — это способ информировать React об изменении данных. Этот метод обновляет текущее состояние компонента и повторно отображает его. В результате переданные props также пересчитываются, и дочерние компоненты, которые зависят от этих реквизитов, также заново визуализируются.

MessageView 

 var MessageView = React.createClass({ render: function() { return ( <p>{ this.props.message }</p> ); } });

Этот компонент просто выводит переданное свойство message в пользовательский интерфейс. Следует отметить, что это компонент без сохранения состояния, который RandomMessage компонентом RandomMessage с RandomMessage состояния.

Теперь, когда мы создали необходимые компоненты, пришло время визуализировать компонент верхнего уровня RandomMessage . Это делается следующим образом: 

 ReactDOM.render( <RandomMessage />, document.getElementById('greeting-div') );

Это оно! Каждый раз, когда вы нажимаете на кнопку, вы увидите новое сообщение (если выбран новый номер).

Держать JSX отдельно

До сих пор мы писали JSX внутри тегов script в нашем HTML. Чтобы структура вашего приложения была структурированной, вы должны хранить каждый компонент в своем собственном файле .jsx . Это означает, что мы можем поместить приведенный выше фрагмент в файл с именем random-message.jsx и включить его в HTML, как показано ниже: 

 <script type="text/babel" src="src/random-message.jsx"></script>

Итак, новая разметка HTML: 

 <!DOCTYPE html> <html lang="en"> <head> <title>My First React Example</title> </head> <body> <div id="greeting-div"></div> <script src="https://fb.me/react-15.0.0.js"></script> <script src="https://fb.me/react-dom-15.0.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> <script type="text/babel" src="src/random-message.jsx"></script> </body> </html>

Важная заметка

Некоторые браузеры (например, Chrome) не смогут загрузить файл, если он не передается по протоколу HTTP, а это значит, что теперь вам нужен сервер для просмотра вашей страницы. Хорошим примером является http-сервер, который можно установить из npm с помощью следующей команды: 

 npm install -g http-server

И запустил frpm корневого каталога вашего проекта так: 

 http-server

Теперь ваша страница будет доступна для просмотра по адресу http://127.0.0.1:8080/ .

Прекомпиляция JSX

Как я упоминал ранее, рекомендуется предварительно скомпилировать JSX для производственного использования. Для этого вы можете использовать babel-cli, который вы также можете установить через npm. Поскольку текущая версия Babel (версия 6) по умолчанию не содержит никаких преобразований, необходимо установить дополнительные пакеты. Они объединяют ряд преобразований, называемых пресетами: 

 npm init -y npm install --save-dev babel-cli npm install --save-dev babel-preset-es2015 babel-preset-react

После этого создайте каталог dist : 

 mkdir dist

И запустить: 

 babel --presets es2015,react --watch src/ --out-dir dist

Ваш JSX-файл будет скомпилирован, а скомпилированный JavaScript записан в файл с тем же именем в каталоге dist . Скомпилированный JavaScript может быть включен непосредственно на вашу страницу, что означает, что вам больше не нужно включать browser.js . Кроме того, указание параметра --watch заставит Babel просматривать каталог src для дальнейших изменений и перекомпилировать что-либо, если таковые обнаружены.

Примечание. На самом деле мы не используем преимущества синтаксиса ES2015 в нашем простом примере, но я включил предустановку es2015 для тех, которые есть.

Слово о виртуальном DOM

Реагировать очень быстро из-за техники, называемой виртуальным DOM. Он поддерживает быстрое представление DOM в памяти и никогда напрямую не взаимодействует с реальным DOM. Функция render компонента сообщает React, как DOM должен выглядеть в любой момент времени. Вы видели, как я возвращал компоненты React и HTML-элементы из функции render компонентов, но это не дает реального DOM! Скорее это просто описание DOM. React вычисляет разницу между этим описанием и представлением DOM в памяти, чтобы вычислить самый быстрый способ обновления браузера.

Дальнейшее чтение

В этой статье представлен обзор React и JSX. Помимо богатой технологии просмотра, React имеет много других преимуществ. О многих из них вы можете прочитать здесь: Забудьте об Angular & Ember, React уже выиграл войну на стороне клиента .

Если вам нужна дополнительная информация о React в целом, посмотрите наши архивы — у нас есть много отличных статей. Если вы заинтересованы в использовании React без JSX, вам может понравиться: Изучите Raw React — без JSX, без Flux, без ES6, без Webpack … или если вы хотите пойти дальше и изучить что-то продвинутое, вы можете прочитать мой предыдущий учебник Создание Приложение для заметок с React и Flux .

Спасибо за прочтение. Если у вас есть какие-либо вопросы, дайте мне знать в комментариях.

Если вы ищете свою игру React, подпишитесь на членство в SitePoint и зарегистрируйтесь в нашем мини-курсе « Практическая реакция для быстрого начала работы» . Этот мини-курс представляет собой нежное введение в наиболее фундаментальные и практические части React. Вы получите отличный практический опыт создания компонентов React с нуля. Чтобы получить представление о том, что в магазине, ознакомьтесь с бесплатным уроком ниже.

37
Share: