Главная » JavaScript » React JS часть 1
ReactJS

30.07.2015 by Devjournal

React JS часть 1

В современной веб-разработке активно используется технология SPA или одностраничные веб-приложения. Одним из наиболее удобных инструментов для реализации этого функционала служит JS- фреймворк React JS. Вот решил опубликовать руководство для начала работы с ним.

Мы разработаем маленькое, но реалистичное приложение комментариев, которое вы можете интегрировать в ваш блог.

Будет реализовано:

  • Отображение всех комментариев
  • Форма добавления комментария
  • Зацепки, чтобы вы могли подключить свой бэк энд

Так же будут реализованы некоторые характеристики:

  • Оптимистичные комментарий: комментарии появляются до того, как они будут сохранены на сервере.
  • Живые обновления: комментарии других пользователей будут обновляться в реальном времени
  • Разметка Markdown: пользователи смогу использовать Markdown для форматирования их текста

Запуск сервера

Пока это не так важно для начала этого руководства, позже при добавлении функционала будет необходимо добавить возможность POST запросов средствами запуска сервера. Если вы хорошо с этим знакомы, то сделайте это. Для того, чтобы сфокусироваться на изучении React JS и не беспокоиться о серверной части, написаны простенькие серверные части на некоторых языках — JavaScript (using Node.js), Python, Ruby, Go, и PHP. Все они доступны на GitHub https://github.com/reactjs/react-tutorial/.

Для начала использования просто запустите public/index.html.

Начинаем

Для этого руководства мы составили JavaScript файл на CDN. Открываем public/index.html в текстовом редакторе и заполняем следующим кодом:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
      // Your code here
    </script>
  </body>
</html>

Для остальной части руководства мы будем писать наш JavaScript код в теге script. Запускайте ваш index.hmtl, чтобы увидеть результат ваших изменений.

Заметка:

Мы включили jQuery, потому что мы хотим упростить наш код для будущего ajax, но это не обязательное условие для работы React JS.

Твой первый компонент

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

- CommentBox
  - CommentList
    - Comment
  - CommentForm

Давайте напишем CommentBox компонент, который будет простым

:
// tutorial1.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>

    );
  }
});
React.render(
  <CommentBox />,
  document.getElementById('content')
);

Запомните, что родной HTML элемент начинается с маленькой буквы, в то время как в React имя класса начинается с заглавной.

JSX Syntax

Первая вещь это XML подобный синтаксис в нашем JavaScript. У нас есть простой прекомпилятор, который добавляет синтаксический сахар к JavaScript:

// tutorial1-raw.js
var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement('div', {className: "commentBox"},
        "Hello, world! I am a CommentBox."
      )
    );
  }
});
React.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
);

Это используется опционально, но мы находим JSX синтаксис более легким, чем обычный JavaScript.

Что происходит

Мы посмотрели несколько методов на JavaScript и воспользуемся React.createClass() для создания нового компонента. Самым важным из этих методов называется render, он возвращает дерево React компонентов, рендерящих HTML.

Тег

 больше не актуальный DOM узел; они становятся экземплярами React компонента компонентов. Вы можете думать о них как маркерах или частях данных, с которыми React JS хорошо работает. React безопасен. Мы не генерируем HTML, поэтому XSS защита применяется по умолчанию.

Вам больше не нужно возвращаться к базовому HTML. Вы можете вернуть дерево компонентов, которые построили. Это то, что делает React компонуемым: ключ к сопровождаемому фронт энду.

React.render() экземпляр это корневой компонент, запускает фреймворк и внедряет  оценку в поле DOM элемента, в качестве второго аргумента.

Составление компонентов

Давайте создадим скелет CommentList и CommentForm, которые будут простыми

. Добавьте эти два компонента в ваш файл, сохраняя объявление CommentBox и вызов React.render:
// tutorial2.js
var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        Hello, world! I am a CommentList.
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

Далее обновим компонент CommentBox для использования этих двух новых компонентов:

// tutorial3.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

Обратите внимание как мы смешали HTML теги и компоненты. HTML компоненты обычны для React компонентов, есть только одно отличие. JSX компилятор будет автоматически переписывать HTML теги в React.createElement(tagName) выражения и оставлять остальное в одиночку. Это сделано для предотвращения загрязнения глобального пространства имен.

Использование реквизитов

Создадим компонент Comment, который будет зависеть от данных передаваемых в форме. Данные передаваемые от родительского компонента доступны как свойство на наследуемом компоненте. Эти свойства доступны через this.props. Используя реквизиты, мы сможем получать передаваемые данные в Comment через форум CommentList и отобразить разметку.

// tutorial4.js
var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
          {this.props.children}
      </div>
    );
  }
});

Обернув выражения Javascript в скобки внутри JSX, вы можете поместить текст или React компонент внутри этого древа. Нам доступны именованные атрибуты, передаваемые компоненту как ключ в this.props и любой наследованный элемент как this.props.children.

Свойства компонентов

Теперь когда мы определили компонент Comment, мы хотим передать в него имя автора и текст комментария. Это позволяет нам снова использовать похожий код для каждого уникального компонента. Добавим несколько компонентов внутри нашего CommentList:

// tutorial5.js
var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
      </div>
    );
  }
});

Обратите внимание, что мы передали некоторые данные из родительского компонента CommentList в производный компонент Comment. Для примера, мы передаем Pete Hunt(с помощью атрибута) и This is one comment(с помощью XML подобного производного узла) в первый Comment. Выше упоминалось, что компонент Comment получает доступ к этим «свойствам» через this.props.author и this.props.children.

Внедрение разметки

Разметка это просто способ для форматирования текста. Например, заключенный текст в звездочки будет отображаться подчеркнутым.

Для начала необходимо установить стороннюю библиотеку в ваше приложение. Это JavaScript библиотека, которая берет размеченный текст и превращает его в HTML. Это потребует скриптового тега и вашем:

<!-- index.html -->
<head>
  <meta charset="UTF-8" />
  <title>Hello React</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>

Далее конвертируем текст комментария в Markdown и выведем его:

// tutorial6.js
var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {marked(this.props.children.toString())}
      </div>

    );
  }
});

Все, что мы тут делаем это вызываем библиотеку разметки. Нам нужно конвертировать this.props.children из обернутого React текста в строку, которая размечена и будет понятна для этого мы явно вызываем toString().
Но тут проблема! Наш отрендеренный комментарий выглядит в браузере так: »

This isanother comment

«. Мы хотим, что эти теги обрабатывались как HTML.
Это защита Ract JS от XSS атак. Вот способ, которые поможет обойти это:

// tutorial7.js
var Comment = React.createClass({
  render: function() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

Это специальный API, который намеренно затрудняет внедрение HTML, то для для markdown мы используем этот способ.

На это окончена первая часть руководства React JS.

#javascript#React JS#Обучение

Comments

  1. Сергей
    05.10.2015 - 00:28

    Спасибо за статью. Если есть возможность напишите статью о react-rails и работе с этим гемом

  2. Дмитрий
    08.10.2015 - 01:35

    Опечатка в начале SPA а не SAP

  3. Дмитрий
    08.10.2015 - 01:36

    а еще, плейсхолдеры в форме для комментариев лишними не будут 🙂

Добавить комментарий

Your email address will not be published / Required fields are marked *