Дикий Григорий

Full-stack веб-разработчик

Введение в React

В последнее время стали очень популярны Single Page Application (SPA). Раньше создание сайтов было довольно простым, ты отправлял запрос к серверу, получал ответ и была перезагрузка страницы, но позже появился AJAX и данные от сервера можно было получить без перезагрузки и в большинстве случаев в формате JSON. Со временем появились библиотеки, которые позволяют загрузить приложение один раз а потом обновлять его компоненты через AJAX. Такие приложения очень популярны и удобны. Для упрощения созданий таких приложений было создано множество фреймворков и одним из самых известных фреймворков является React.js.

ReactJs отвечает только за представление данных и если вы знакомы с паттерном MVC то React отвечает за V. Его идея заключается в том, чтобы минимизоровать количество перерисовок DOM дерева. Стоит отметить, что React не работает с настоящим DOM деревом, а вместо этого использует Virtual DOM, что представляет собой облегченную копию реально DOM, после чего происходит сравнение Virtual DOM с реальным и запускается процесс перерисовки части страницы.

Подключаем ReactJS

Теперь перейдем от слов к делу. Сначала нам нужно создать простую html страницу:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ReactJS Example One</title>
  </head>
  <body>
  </body>
</html>

Теперь перейдем на официальную страницу ReactJS https://facebook.github.io/react/downloads.html и подключим Reactjs, в итоге вы должны получить код:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ReactJS Example One</title>
    <script src="https://fb.me/react-15.2.1.min.js"></script> 
    <script src="https://fb.me/react-dom-15.2.1.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
    </script>
  </body>
</html>

Теперь давайте создадим наш первый компонент на ReactJS следующим образом:

var App = React.createClass({
    displayName: 'Hello',
    render: function() {
      return React.createElement("div", null, "Hello ", this.props.name);
    }
  });
  ReactDOM.render(
    React.createElement(App, {name: "World"}),
    document.body
  );

Давайте разберем код подробнее. React.createClass - функция которая создает новый компонент, она принимаем в качестве аргумента объект, который должен обязательно хранить в себе функцию render, чтобы отрисоваться. Функция render должна возвращать элемент DOM дерева. React.createElement занимается созданием нашего DOM элемента. Для отображение нашего компонента, мы используем функцию ReactDOM.render, которая создает отображает наш компонент внутри тега body. В итоге вы должны увидеть примерно следующее:

JSX

JSX - это XML подобный синтаксис, который позволяет писать html конструкции прямо в коде JavaScript приложения. Это удобно когда у вам большие компоненты.

Подготовка рабочего окружения

Для разработки я буду использовать менеджер задач gulp, давайте установим его глобально:

$ sudo npm install -g gulp

Далее нужно инициализировать package.json командной:

$ sudo npm init

Теперь давайте установим основные пакеты:

$ sudo npm install --save-dev gulp browserify vinyl-source-stream gulp-util babelify babel-preset-es2015 babel-preset-reac

Ну и конечно пакеты для работы с ReactJS:

$ sudo npm install --save react react-dom

Теперь создадим и настроим gulpfile.js следующим содержимым:

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('build', function () {
    return browserify({entries: './app/jsx/app.jsx', extensions: ['.jsx'], debug: true})
        .transform('babelify', {presets: ['es2015', 'react']})
        .bundle()
        .pipe(source('app.js'))
        .pipe(gulp.dest('public/js'));
});

gulp.task('watch', ['build'], function () {
    gulp.watch('./app/jsx/*.jsx', ['build']);
});

gulp.task('default', ['watch']);

Структура файлов будет примерно такова:

app/
    jsx/
        components/
        app.jsx
public/
    js/
        app.js
    index.html

Запускать наше приложение мы будем из директории public командой:

$ python -m SimpleHTTPServer 3000

Создадим файл app.jsx в директории components со следующим содержимым:

import React from 'react';

var App = React.createClass({
    render: function() {
        return (
            <h1>Привет от {this.props.phrase}!</h1>
        );
    }
});

export default App;

А в директории выше в файле app.jsx импортируем этот модуль и отрендерим его на нашей странице:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';

ReactDOM.render(
    <App phrase="dikiigrigorii.ru"/>,
    document.getElementById('app')
);

Теперь создадим файл index.html в папке public с содержимым:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="js/app.js"></script>
  </body>
</html>

Запустим наше приложение:

$ gulp watch
$ cd public
$ python -m SimpleHTTPServer 3000 

Перейдя по адресу http://localhost:3000/ вы должны увидеть следующее: