Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться

Справочник ReactJS

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

JSFiddle

Простейший способ попробовать React — использовать JSFiddle с примерами:

Использование React из npm

Мы рекомендуем использовать React с модульной системой CommonJS, например, browserify или webpack. Используйте пакеты react и react-dom.


// main.js
var React = require('react');
var ReactDOM = require('react-dom');

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

Чтобы установить React DOM и собрать бандл c помощью browserify, выполните команды:


$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

Чтобы установить React DOM и собрать бандл c помощью webpack, выполните команды:


$ npm install --save react react-dom babel-preset-react
$ webpack

Обратите внимание:
Если вы используете ES2015, вам понадобится пакет babel-preset-es2015.

Быстрый старт без npm

Если вы еще не готовы исползовать npm, вы можете скачать Starter Kit, включающий в себя React и React DOM.

В корневой директории создайте файл helloworld.html со следующим cодержимым:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

XML разметка внутри JavaScript кода называется JSX; подробнее о синтаксисе JSX вы можете почитать здесь. Для перевода его на JavaScript используйте обертку <script type=”text/babel”> и подключите Babel для трансляции непосредственно в браузере.

Отдельный файл

JSX код может находиться в отдельном файле. Создайте файл src/helloworld.js.


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

И затем добавьте ссылку на него в helloworld.html:


<script type="text/babel" src="src/helloworld.js"></script>

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

Offline преобразование

Установите Babel через npm:


npm install --global babel-cli
npm install babel-preset-react

Затем, транслируйте src/helloworld.js в JavaScript:


babel --presets react src --watch --out-dir build

Обратите внимание:
Если вы используете ES2015, вам понадобится пакет babel-preset-es2015.

Файл build/helloworld.js будет перегенерироваться каждый раз, когда вы будете вносить изменения в исходный файл. Подробнее можно почитать в документации к Babel.


ReactDOM.render(
  React.createElement('h1', null, 'Hello, world!'),
  document.getElementById('example')
);

Обновите html-файл следующим образом:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <!-- No need for Babel! -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html>

Следующие шаги

Посмотрите урок и другие примеры в директории examples в starter kit, чтобы изучить больше.

Также вы можете ознакомиться с wiki, поддерживаемым сообществом.

Удачи и добро пожаловать!