Блог экспериментатора инженера-разработчика: Infanty.
Я пишу how-to статьи на редкие темы или статьи обзоры - для себя и тех кто со мной работает.
Блог существует при поддержке: "Оккупационных сил Марса".

Пример простого приложения на React.js

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

Создадим папку проекта и перейдём в неё. После чего - создадим файл package.json для хранения зависимостей создаваемого приложения, установим Webpack (версии 3) и установим локально React (версии 16) набрав в консоли:

npm init --yes
npm install --save-dev webpack
npm install --save react react-dom 

Повторим все действия из раздела: "Использование модулей для Webpack" статьи: "React.js от основ до изоморфного приложения: окружение - Node.js, Webpack, Babel". Это необходимо для использования при написании создаваемого приложения расширенного синтаксиса JavaScript: ES6 (содержит полноценную поддержку классов в JavaScript) и JSX (позволяет использовать в синтаксисе JavaScript - XML элементы).

Создадим папку для размещения кода React приложения (в папке проекта) и перейдём в неё, набрав в консоли:

mkdir src
cd ./src

Создадим файл app.js (в папке: src) и поместим в него код компонента:

import React from 'react';
import ReactDOM from 'react-dom';

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

Вернёмся в папку проекта и создадим в ней файл index.html с кодом HTML страницы приложения, следующего содержания:

<!DOCTYPE html>
<htm>
  <head>
    <meta charset="UTF-8">
    <title>Hello World with ES6 and JSX</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./bin/app.bundle.js" charset="utf-8"></script>
  </body>
</html> 

Соберём приложение с помощью Webpack-а с использованием файла конфигурации, набрав в консоли:

./node_modules/.bin/webpack --config webpack.config.js

После сборки приложения можно проверять его работу в браузере. Файл app.bundle.js получился большого размера так как сборка произведена в режиме разработки. Для минимизации и оптимизации готового приложения его можно собрать с помощью Webpack-а из консоли с указанием дополнительного флага.

./node_modules/.bin/webpack -p src/app.js bin/app.bundle.js 

В завершении примера - итоговый листинг файла package.json:

{
  "name": "React-demo",
  "version": "1.0.0",
  "description": "React.js demo app.",
  "license": "UNLICENSED",
  "private": true,
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.8.1"
  },
  "dependencies": {
    "react": "^16.1.1",
    "react-dom": "^16.1.1"
  }
} 

Пример сложного приложения на React.js

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

В React существует несколько видов компонентов:

  • Элемент является самым мелким компонентом приложения:
    const element = <h1>Hello, world</h1>;
  • Более сложным чем элемент, является функциональный компонент:
    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }
  • Вместо функционального компонента, можно использовать класс ES6:
    class Welcome extends React.Component {
      render() {
        return <h1>Hello, {this.props.name}</h1>;
      }
    }
  • Возможно объединение описанных выше вариантов - элементы могут представлять собой компоненты, определяемые пользователем. Когда React распознает элемент, представляющий собой пользовательский компонент, он передает JSX атрибуты этому компоненту как единому объекту.
    // Функциональный компонент.
    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }
    
    // Элемент, который представляет собой функциональный компонент. 
    const element = <Welcome name="Sara" />;
    
    // Отображение компонента - элемент, описанного выше, на узле DOM с Id: root.
    ReactDOM.render(
      element,
      document.getElementById('root')
    );
  • Компоненты могут ссылаться на другие компоненты в результате их выполнения. Т.е. внутри функционального или классового компонента могут "содержаться" "вызовы" других функциональных или классовых компонентов.

Важно не забывать, что все компоненты React должны действовать как чистые функции, сохраняя свои свойства. Они должны зависеть только от своих параметров. И возвращать только свой результат, не изменяя глобальные переменные.

Усовершенствуем пример простого приложения на React.js, приведённый выше, используя компоненты. Изменим файл app.js в папке src следующим образом:

import React from 'react';
import ReactDOM from 'react-dom';

// Загрузка компонента вынесенного в отдельный файл.
import News from './news.js';

// Компонент Comments.
class Comments extends React.Component {
  render() {
    return <div className="comments">К сожалению, комментариев нет.</div>;
  }
}

// Компонент App, содержащий "вызовы" компонентов News и Comments.
class App extends React.Component {
  render() {
    return <div className="app">
        Новости:
        <News />
        Комментарии:
        <Comments />
      </div>;
  }
}

// Отображение компонента - App, описанного выше, на узле DOM с Id: root.
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Создадим в папке src файл news.js следующего содержания:

import React from 'react';

// Компонент News.
class News extends React.Component {
  render() {
    return <div className="news">К сожалению, новостей нет.</div>;
  }
}

export default News;

Остальные файлы, так же как и процесс сборки или проверки приложения - аналогичны, как и в примере 1.

Подробней о состояниях (state), событиях, свойствах (props) и ссылках (refs) можно прочитать как в официальной документации: React: Quick Start. Так и в статье, разбирающей эти понятия на основе примера из одного приложения: Основы React: всё, что нужно знать для начала работы.