ReactJS — Обзор

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

React — это библиотека для создания компонуемых пользовательских интерфейсов. Он поощряет создание повторно используемых компонентов пользовательского интерфейса, которые представляют данные, которые со временем меняются. Многие люди используют React как V в MVC. React абстрагирует DOM от вас, предлагая более простую модель программирования и лучшую производительность. React также может выполнять рендеринг на сервере с помощью Node, а также может запускать собственные приложения с помощью React Native. React реализует односторонний реактивный поток данных, который сокращает шаблон и его легче рассуждать, чем традиционное связывание данных.

Реагировать Особенности

• JSX — JSX — это расширение синтаксиса JavaScript. Нет необходимости использовать JSX в разработке React, но это рекомендуется.

• Компоненты — React — это все о компонентах. Вы должны думать обо всем как о компоненте. Это поможет вам поддерживать код при работе над крупномасштабными проектами.

• Однонаправленный поток данных и Flux — React реализует односторонний поток данных, который упрощает анализ вашего приложения. Flux — это шаблон, который помогает сохранять ваши данные однонаправленными.

• Лицензия — React лицензируется в соответствии с Facebook Inc. Документация лицензируется в соответствии с CC BY 4.0.

JSX — JSX — это расширение синтаксиса JavaScript. Нет необходимости использовать JSX в разработке React, но это рекомендуется.

Компоненты — React — это все о компонентах. Вы должны думать обо всем как о компоненте. Это поможет вам поддерживать код при работе над крупномасштабными проектами.

Однонаправленный поток данных и Flux — React реализует односторонний поток данных, который упрощает анализ вашего приложения. Flux — это шаблон, который помогает сохранять ваши данные однонаправленными.

Лицензия — React лицензируется в соответствии с Facebook Inc. Документация лицензируется в соответствии с CC BY 4.0.

Реагировать преимущества

• Использует виртуальный DOM, который является объектом JavaScript. Это повысит производительность приложений, поскольку виртуальный DOM JavaScript работает быстрее, чем обычный DOM.

• Может использоваться на стороне клиента и сервера, а также с другими платформами.

• Шаблоны компонентов и данных улучшают читабельность, что помогает поддерживать большие приложения.

Использует виртуальный DOM, который является объектом JavaScript. Это повысит производительность приложений, поскольку виртуальный DOM JavaScript работает быстрее, чем обычный DOM.

Может использоваться на стороне клиента и сервера, а также с другими платформами.

Шаблоны компонентов и данных улучшают читабельность, что помогает поддерживать большие приложения.

Ограничения реагирования

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

• Использует встроенные шаблоны и JSX, что может показаться неудобным для некоторых разработчиков.

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

Использует встроенные шаблоны и JSX, что может показаться неудобным для некоторых разработчиков.

ReactJS — Настройка среды

В этой главе мы покажем вам, как настроить среду для успешной разработки React. Обратите внимание, что здесь нужно выполнить много шагов, но это поможет ускорить процесс разработки позже. Нам понадобится NodeJS , поэтому, если он у вас не установлен, проверьте ссылку из следующей таблицы.

Sr.No.	Программное обеспечение и описание
1	NodeJS и NPM NodeJS — это платформа, необходимая для разработки ReactJS. Проверьте наши настройки среды NodeJS .

NodeJS и NPM

NodeJS — это платформа, необходимая для разработки ReactJS. Проверьте наши настройки среды NodeJS .

После успешной установки NodeJS мы можем начать установку React на него, используя npm. Вы можете установить NodeJS двумя способами

• Использование webpack и babel.

• С помощью команды create-реагировать-приложение .

Использование webpack и babel.

С помощью команды create-реагировать-приложение .

Установка ReactJS с помощью веб-пакета и babel

Webpack — это модуль модулей (управляет и загружает независимые модули). Он берет зависимые модули и компилирует их в один (файл) пакет. Вы можете использовать этот пакет при разработке приложений с использованием командной строки или путем настройки его с помощью файла webpack.config.

Babel — это JavaScript-компилятор и транспортер. Он используется для преобразования одного исходного кода в другой. Используя это, вы сможете использовать новые функции ES6 в своем коде, где babel преобразует его в простой старый ES5, который можно запускать во всех браузерах.

Шаг 1 — Создайте корневую папку

Создайте на рабочем столе папку с именемactApp для установки всех необходимых файлов с помощью команды mkdir.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

Для создания любого модуля требуется сгенерировать файл package.json . Поэтому после создания папки нам нужно создать файл package.json . Для этого вам нужно запустить команду npm init из командной строки.

C:\Users\username\Desktop\reactApp>npm init

Эта команда запрашивает информацию о модуле, такую ​​как имя пакета, описание, автор и т. Д., Вы можете пропустить их, используя опцию –y.

C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

Шаг 2 — установите React и прореагируйте dom

Поскольку наша основная задача — установить ReactJS, установить его и его dom-пакеты, используя команды installact иact -dom команды npm соответственно. Вы можете добавить устанавливаемые нами пакеты в файл package.json, используя опцию —save .

C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save

Или вы можете установить их все в одной команде как —

C:\Users\username\Desktop\reactApp>npm install react react-dom --save

Шаг 3 — Установите веб-пакет

Поскольку мы используем webpack для генерации пакета, установите webpack, webpack-dev-server и webpack-cli.

C:\Users\username\Desktop\reactApp>npm install webpack –save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save

Или вы можете установить их все в одной команде как —

C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save

Шаг 4 — Установите Babel

Установите babel и его плагины babel-core, babel-loader, babel-preset-env, babel-preset-response и, html-webpack-plugin

C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev

Или вы можете установить их все в одной команде как —

C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env 
   babel-preset-react html-webpack-plugin --save-dev

Шаг 5 — Создайте файлы

Для завершения установки нам нужно создать определенные файлы, а именно: index.html, App.js, main.js, webpack.config.js и,. babelrc . Вы можете создать эти файлы вручную или, используя командную строку .

C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

Шаг 6 — Установите компилятор, сервер и загрузчики

Откройте файл webpack-config.js и добавьте следующий код. Мы устанавливаем точку входа в webpack как main.js. Выходной путь — это место, где будет обслуживаться связанное приложение. Мы также устанавливаем сервер разработки на порт 8001 . Вы можете выбрать любой порт, который вы хотите.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

Откройте package.json и удалите «test» «echo \» Ошибка: тест не указан \ «&& exit 1» внутри объекта «scripts» . Мы удаляем эту строку, так как мы не будем проводить никакого тестирования в этом руководстве. Давайте добавим команды start и build вместо этого.

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

Шаг 7 — index.html

Это просто обычный HTML. Мы устанавливаем div id = «app» в качестве корневого элемента для нашего приложения и добавляем скрипт index_bundle.js , который является нашим приложенным файлом приложения.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

Шаг 8 — App.jsx и main.js

Это первый компонент React. Мы подробно расскажем о компонентах React в следующей главе. Этот компонент будет отображать Hello World .

App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

Нам нужно импортировать этот компонент и отобразить его в нашем корневом элементе приложения , чтобы мы могли видеть его в браузере.

main.js

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

ReactDOM.render(<App />, document.getElementById('app'));

Примечание. Всякий раз, когда вы хотите что-то использовать, вам сначала нужно его импортировать . Если вы хотите сделать компонент пригодным для использования в других частях приложения, вам необходимо экспортировать его после создания и импортировать в файл, в котором вы хотите его использовать.

Создайте файл с именем .babelrc и скопируйте в него следующее содержимое.

{
   "presets":["env", "react"]
}

Шаг 9 — Запуск сервера

Установка завершена, и мы можем запустить сервер, выполнив следующую команду.

C:\Users\username\Desktop\reactApp>npm start

Он покажет порт, который нам нужно открыть в браузере. В нашем случае это http: // localhost: 8001 / . После того, как мы откроем его, мы увидим следующий вывод.

Шаг 10 — Генерация пакета

Наконец, для генерации пакета вам нужно запустить команду сборки в командной строке как —

C:\Users\Tutorialspoint\Desktop\reactApp>npm run build

Это создаст пакет в текущей папке, как показано ниже.

Использование команды create-реагировать-приложение

Вместо использования webpack и babel вы можете установить ReactJS проще, установив приложение create-реагировать .

Шаг 1 — установить приложение create-реагировать

Просмотрите рабочий стол и установите приложение Create React, используя командную строку, как показано ниже —

C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app

Это создаст папку с именем my-app на рабочем столе и установит в нее все необходимые файлы.

Шаг 2 — Удалить все исходные файлы

Просмотрите папку src в сгенерированной папке my-app и удалите все файлы в ней, как показано ниже —

C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y

Шаг 3 — Добавить файлы

Добавьте файлы с именами index.css и index.js в папку src как —

C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.js

В файле index.js добавьте следующий код

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Шаг 4 — Запустите проект

Наконец, запустите проект с помощью команды запуска.

npm start

ReactJS — JSX

React использует JSX для шаблонов вместо обычного JavaScript. Нет необходимости использовать его, однако, ниже приведены некоторые плюсы, которые идут с ним.

• Это быстрее, потому что он выполняет оптимизацию при компиляции кода в JavaScript.

• Это также типобезопасно, и большинство ошибок могут быть обнаружены во время компиляции.

• Это облегчает и ускоряет написание шаблонов, если вы знакомы с HTML.

Это быстрее, потому что он выполняет оптимизацию при компиляции кода в JavaScript.

Это также типобезопасно, и большинство ошибок могут быть обнаружены во время компиляции.

Это облегчает и ускоряет написание шаблонов, если вы знакомы с HTML.

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

JSX в большинстве случаев выглядит как обычный HTML. Мы уже использовали его в главе «Настройка среды». Посмотрите на код из App.jsx, куда мы возвращаем div .

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

Несмотря на то, что он похож на HTML, при работе с JSX необходимо учитывать несколько моментов.

Вложенные элементы

Если мы хотим вернуть больше элементов, нам нужно обернуть его одним контейнерным элементом. Обратите внимание, как мы используем div в качестве оболочки для элементов h1 , h2 и p .

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}
export default App;

Атрибуты

Мы можем использовать наши собственные пользовательские атрибуты в дополнение к обычным свойствам и атрибутам HTML. Когда мы хотим добавить пользовательский атрибут, нам нужно использовать префикс данных . В следующем примере мы добавили data-myattribute в качестве атрибута элемента p .

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
         </div>
      );
   }
}
export default App;

Выражения JavaScript

Выражения JavaScript могут использоваться внутри JSX. Нам просто нужно обернуть его фигурными скобками {} . Следующий пример отобразит 2 .

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}
export default App;

Мы не можем использовать операторы if внутри JSX, вместо этого мы можем использовать условные (троичные) выражения. В следующем примере переменная i равна 1, поэтому браузер будет отображать значение true. Если мы изменим его на какое-то другое значение, оно будет отображать значение false .

import React from 'react';

class App extends React.Component {
   render() {
      var i = 1;
      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

стайлинг

React рекомендует использовать встроенные стили. Когда мы хотим установить встроенные стили, нам нужно использовать синтаксис camelCase . React также автоматически добавит px после числового значения для определенных элементов. В следующем примере показано, как добавить встроенную строку myStyle к элементу h1 .

import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;

Комментарии

При написании комментариев нам нужно поставить фигурные скобки {}, когда мы хотим написать комментарий в дочернем разделе тега. Рекомендуется всегда использовать {} при написании комментариев, так как мы хотим быть последовательными при написании приложения.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;

Соглашение об именовании

HTML-теги всегда используют имена тегов в нижнем регистре , а компоненты React начинаются с Uppercase .

Примечание. Вы должны использовать className и htmlFor в качестве имен атрибутов XML вместо class и for .

Это объясняется на официальной странице React как —

Поскольку JSX — это JavaScript, такие идентификаторы, как class и for, не рекомендуется использовать в качестве имен атрибутов XML. Вместо этого компоненты React DOM ожидают имена свойств DOM, таких как className и htmlFor , соответственно.

ReactJS — Компоненты

В этой главе мы узнаем, как комбинировать компоненты, чтобы упростить обслуживание приложения. Такой подход позволяет обновлять и изменять ваши компоненты, не затрагивая остальную часть страницы.

Пример без сохранения состояния

Наш первый компонент в следующем примере это приложение . Этот компонент является владельцем заголовка и содержимого . Мы создаем заголовок и контент отдельно и просто добавляем их в дерево JSX в нашем компоненте приложения . Только компонент приложения должен быть экспортирован.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}
export default App;

Чтобы иметь возможность отобразить это на странице, нам нужно импортировать это в файл main.js и вызвать responseDOM.render () . Мы уже сделали это при настройке среды.

main.js

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

ReactDOM.render(<App />, document.getElementById('app'));

Приведенный выше код сгенерирует следующий результат.

Пример с состоянием

В этом примере мы установим состояние для компонента-владельца ( App ). Компонент Header просто добавляется, как в предыдущем примере, так как ему не нужно никакого состояния. Вместо тега содержимого мы создаем элементы table и tbody , в которые мы будем динамически вставлять TableRow для каждого объекта из массива данных .

Видно, что мы используем синтаксис стрелки EcmaScript 2015 (=>), который выглядит намного чище, чем старый синтаксис JavaScript. Это поможет нам создавать наши элементы с меньшим количеством строк кода. Это особенно полезно, когда нам нужно создать список с большим количеством элементов.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key = {i} 
                     data = {person} />)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
export default App;

main.js

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

ReactDOM.render(<App/>, document.getElementById('app'));

Примечание. Обратите внимание, что мы используем key = {i} внутри функции map () . Это поможет React обновить только необходимые элементы вместо повторного рендеринга всего списка, когда что-то изменится. Это огромный прирост производительности для большего количества динамически создаваемых элементов.

ReactJS — Государство

Государство — это место, откуда поступают данные. Мы всегда должны стараться сделать наше состояние максимально простым и минимизировать количество компонентов с состоянием. Если у нас есть, например, десять компонентов, которым нужны данные из состояния, мы должны создать один контейнерный компонент, который будет сохранять состояние для всех них.

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

В следующем примере кода показано, как создать компонент с сохранением состояния с использованием синтаксиса EcmaScript2016.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         header: "Header from state...",
         content: "Content from state..."
      }
   }
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
         </div>
      );
   }
}
export default App;

main.js

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

ReactDOM.render(<App />, document.getElementById('app'));

Это даст следующий результат.

ReactJS — Реквизит Обзор

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

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

Когда нам нужны неизменяемые данные в нашем компоненте, мы можем просто добавить реквизиты для функции responseDOM.render () в main.js и использовать их внутри нашего компонента.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

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

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

Это даст следующий результат.

Реквизит по умолчанию

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

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}
export default App;

main.js

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

ReactDOM.render(<App/>, document.getElementById('app'));

Выход такой же, как и раньше.

Состояние и реквизит

В следующем примере показано, как объединить состояние и реквизиты в вашем приложении. Мы устанавливаем состояние в нашем родительском компоненте и передаем его по дереву компонентов с помощью реквизита . Внутри функции рендеринга мы устанавливаем headerProp и contentProp, используемые в дочерних компонентах.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         header: "Header from props...",
         content: "Content from props..."
      }
   }
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

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

ReactDOM.render(<App/>, document.getElementById('app'));

Результат снова будет таким же, как и в предыдущих двух примерах, единственное, что отличается, это источник наших данных, который теперь изначально исходит от государства . Когда мы хотим обновить его, нам просто нужно обновить состояние, и все дочерние компоненты будут обновлены. Подробнее об этом в главе «События».

ReactJS — Проверка реквизита

Проверка свойств — это полезный способ принудительного использования компонентов. Это поможет в процессе разработки избежать будущих ошибок и проблем, когда приложение станет больше. Это также делает код более читабельным, так как мы видим, как должен использоваться каждый компонент.

Валидация реквизита

В этом примере мы создаем компонент приложения со всеми реквизитами, которые нам нужны. App.propTypes используется для проверки реквизита. Если некоторые реквизиты не используют правильный тип, который мы назначили, мы получим предупреждение консоли. После того, как мы укажем шаблоны проверки, мы установим App.defaultProps .

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h3>Array: {this.props.propArray}</h3>
            <h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
            <h3>Func: {this.props.propFunc(3)}</h3>
            <h3>Number: {this.props.propNumber}</h3>
            <h3>String: {this.props.propString}</h3>
            <h3>Object: {this.props.propObject.objectName1}</h3>
            <h3>Object: {this.props.propObject.objectName2}</h3>
            <h3>Object: {this.props.propObject.objectName3}</h3>
         </div>
      );
   }
}

App.propTypes = {
   propArray: React.PropTypes.array.isRequired,
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.PropTypes.object
}

App.defaultProps = {
   propArray: [1,2,3,4,5],
   propBool: true,
   propFunc: function(e){return e},
   propNumber: 1,
   propString: "String value...",
   
   propObject: {
      objectName1:"objectValue1",
      objectName2: "objectValue2",
      objectName3: "objectValue3"
   }
}
export default App;

main.js

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

ReactDOM.render(<App/>, document.getElementById('app'));

ReactJS — API компонента

В этой главе мы расскажем об API-компоненте React. Мы обсудим три метода: setState (), forceUpdate и ReactDOM.findDOMNode () . В новых классах ES6 мы должны вручную связать это. Мы будем использовать this.method.bind (this) в примерах.

Установить состояние

Метод setState () используется для обновления состояния компонента. Этот метод не заменит состояние, а только добавит изменения в исходное состояние.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data: []
      }
	
      this.setStateHandler = this.setStateHandler.bind(this);
   };
   setStateHandler() {
      var item = "setState..."
      var myArray = this.state.data.slice();
	  myArray.push(item);
      this.setState({data: myArray})
   };
   render() {
      return (
         <div>
            <button onClick = {this.setStateHandler}>SET STATE</button>
            <h4>State Array: {this.state.data}</h4>
         </div>
      );
   }
}
export default App;

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

Force Update

Иногда мы можем захотеть обновить компонент вручную. Это может быть достигнуто с помощью метода forceUpdate () .

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };
   forceUpdateHandler() {
      this.forceUpdate();
   };
   render() {
      return (
         <div>
            <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
            <h4>Random number: {Math.random()}</h4>
         </div>
      );
   }
}
export default App;

Мы устанавливаем случайное число, которое будет обновляться при каждом нажатии кнопки.

Найти Дом Нод

Для манипулирования DOM мы можем использовать метод ReactDOM.findDOMNode () . Сначала нам нужно импортировать реаги-дом .

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

class App extends React.Component {
   constructor() {
      super();
      this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
   };
   findDomNodeHandler() {
      var myDiv = document.getElementById('myDiv');
      ReactDOM.findDOMNode(myDiv).style.color = 'green';
   }
   render() {
      return (
         <div>
            <button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
            <div id = "myDiv">NODE</div>
         </div>
      );
   }
}
export default App;

Цвет элемента myDiv меняется на зеленый после нажатия кнопки.

Примечание. Начиная с версии 0.14, большинство более старых методов API-компонентов устарели или удалены для соответствия ES6.

ReactJS — жизненный цикл компонентов

В этой главе мы обсудим методы жизненного цикла компонентов.

Методы жизненного цикла

• componentWillMount выполняется перед рендерингом как на стороне сервера, так и на стороне клиента.

• componentDidMount выполняется после первого рендеринга только на стороне клиента. Именно здесь должны происходить запросы AJAX и обновления DOM или состояния. Этот метод также используется для интеграции с другими платформами JavaScript и любыми функциями с отложенным выполнением, такими как setTimeout или setInterval . Мы используем его для обновления состояния, чтобы мы могли запускать другие методы жизненного цикла.

• componentWillReceiveProps вызывается, как только реквизиты обновляются перед вызовом другого рендера. Мы вызвали его из setNewNumber, когда обновили состояние.

• shouldComponentUpdate должен возвращать значение true или false . Это определит, будет ли компонент обновляться или нет. По умолчанию установлено значение true . Если вы уверены, что компонент не должен отображаться после обновления состояния или реквизита , вы можете вернуть ложное значение.

• componentWillUpdate вызывается непосредственно перед рендерингом.

• componentDidUpdate вызывается сразу после рендеринга.

• componentWillUnmount вызывается после размонтирования компонента из dom. Мы размонтируем наш компонент в main.js.

componentWillMount выполняется перед рендерингом как на стороне сервера, так и на стороне клиента.

componentDidMount выполняется после первого рендеринга только на стороне клиента. Именно здесь должны происходить запросы AJAX и обновления DOM или состояния. Этот метод также используется для интеграции с другими платформами JavaScript и любыми функциями с отложенным выполнением, такими как setTimeout или setInterval . Мы используем его для обновления состояния, чтобы мы могли запускать другие методы жизненного цикла.

componentWillReceiveProps вызывается, как только реквизиты обновляются перед вызовом другого рендера. Мы вызвали его из setNewNumber, когда обновили состояние.

shouldComponentUpdate должен возвращать значение true или false . Это определит, будет ли компонент обновляться или нет. По умолчанию установлено значение true . Если вы уверены, что компонент не должен отображаться после обновления состояния или реквизита , вы можете вернуть ложное значение.

componentWillUpdate вызывается непосредственно перед рендерингом.

componentDidUpdate вызывается сразу после рендеринга.

componentWillUnmount вызывается после размонтирования компонента из dom. Мы размонтируем наш компонент в main.js.

В следующем примере мы установим начальное состояние в функции конструктора. SetNewnumber используется для обновления состояния . Все методы жизненного цикла находятся внутри компонента Content.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

main.js

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

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

После первоначального рендера мы получим следующий экран.

ReactJS — Формы

В этой главе мы узнаем, как использовать формы в React.

Простой пример

В следующем примере мы установим форму ввода со значением = {this.state.data} . Это позволяет обновлять состояние при каждом изменении входного значения. Мы используем событие onChange, которое будет следить за изменениями ввода и соответственно обновлять состояние.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <input type = "text" value = {this.state.data} 
               onChange = {this.updateState} />
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

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

ReactDOM.render(<App/>, document.getElementById('app'));

Когда значение введенного текста изменится, состояние будет обновлено.

Сложный пример

В следующем примере мы увидим, как использовать формы из дочернего компонента. Метод onChange инициирует обновление состояния, которое передается дочернему входному значению и отображается на экране. Аналогичный пример используется в главе «События». Всякий раз, когда нам нужно обновить состояние от дочернего компонента, нам нужно передать функцию, которая будет обрабатывать обновление ( updateState ), в качестве пропеллера ( updateStateProp ).

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <input type = "text" value = {this.props.myDataProp} 
               onChange = {this.props.updateStateProp} />
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

main.js

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

ReactDOM.render(<App/>, document.getElementById('app'));

Это даст следующий результат.

ReactJS — События

В этой главе мы узнаем, как использовать события.

Простой пример

Это простой пример, где мы будем использовать только один компонент. Мы просто добавляем событие onClick , которое вызовет функцию updateState после нажатия кнопки.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState() {
      this.setState({data: 'Data updated...'})
   }
   render() {
      return (
         <div>
            <button onClick = {this.updateState}>CLICK</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

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

ReactDOM.render(<App/>, document.getElementById('app'));

Это даст следующий результат.

Детские события

Когда нам нужно обновить состояние родительского компонента от его дочернего элемента, мы можем создать обработчик события ( updateState ) в родительском компоненте и передать его как prop ( updateStateProp ) дочернему компоненту, где мы можем просто вызвать его.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState() {
      this.setState({data: 'Data updated from the child component...'})
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <button onClick = {this.props.updateStateProp}>CLICK</button>
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

main.js

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

ReactDOM.render(<App/>, document.getElementById('app'));

Это даст следующий результат.

ReactJS — ссылки

Ссылка используется для возврата ссылки на элемент. В большинстве случаев следует избегать ссылок, однако они могут быть полезны, когда нам нужны измерения DOM или для добавления методов к компонентам.

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

В следующем примере показано, как использовать refs для очистки поля ввода. Функция ClearInput ищет элемент со значением ref = «myInput» , сбрасывает состояние и добавляет к нему фокус после нажатия кнопки.

App.jsx

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

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         data: ''
      }
      this.updateState = this.updateState.bind(this);
      this.clearInput = this.clearInput.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   clearInput() {
      this.setState({data: ''});
      ReactDOM.findDOMNode(this.refs.myInput).focus();
   }
   render() {
      return (
         <div>
            <input value = {this.state.data} onChange = {this.updateState} 
               ref = "myInput"></input>
            <button onClick = {this.clearInput}>CLEAR</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

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

ReactDOM.render(<App/>, document.getElementById('app'));

Как только кнопка нажата, ввод будет очищен и сфокусирован.

ReactJS — Ключи

Реактивные ключи полезны при работе с динамически создаваемыми компонентами или когда пользователи изменяют ваши списки. Установка значения ключа сохранит ваши компоненты однозначно идентифицированными после изменения.

Использование ключей

Давайте динамически создавать элементы контента с уникальным индексом (i). Функция map создаст три элемента из нашего массива данных . Поскольку значение ключа должно быть уникальным для каждого элемента, мы назначим i в качестве ключа для каждого созданного элемента.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data:[
            {
               component: 'First...',
               id: 1
            },
            {
               component: 'Second...',
               id: 2
            },
            {
               component: 'Third...',
               id: 3
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <div>
               {this.state.data.map((dynamicComponent, i) => <Content 
                  key = {i} componentData = {dynamicComponent}/>)}
            </div>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <div>{this.props.componentData.component}</div>
            <div>{this.props.componentData.id}</div>
         </div>
      );
   }
}
export default App;

main.js

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

ReactDOM.render(<App/>, document.getElementById('app'));

Мы получим следующий результат для значений Key каждого элемента.

Если мы добавим или удалим некоторые элементы в будущем или изменим порядок динамически создаваемых элементов, React будет использовать значения ключей для отслеживания каждого элемента.

ReactJS — Маршрутизатор

В этой главе мы узнаем, как настроить маршрутизацию для приложения.

Шаг 1 — Установите React Router

Простой способ установить реактив-маршрутизатор — запустить следующий фрагмент кода в окне командной строки .

C:\Users\username\Desktop\reactApp>npm install react-router

Шаг 2 — Создание компонентов

На этом шаге мы создадим четыре компонента. Компонент приложения будет использоваться в качестве вкладки меню. Три других компонента (Главная), (О) и (Контакт) отображаются после изменения маршрута.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            </ul>
            {this.props.children}
         </div>
      )
   }
}
export default App;

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}
export default Home;

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}
export default About;

class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}
export default Contact;

Шаг 3 — Добавить маршрутизатор

Теперь мы добавим маршруты в приложение. Вместо рендеринга элемента App, как в предыдущем примере, на этот раз будет отображаться Router . Мы также установим компоненты для каждого маршрута.

main.js

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>
), document.getElementById('app'))

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

ReactJS — Flux Concept

Flux — это концепция программирования, где данные являются однонаправленными . Эти данные поступают в приложение и проходят через него в одном направлении, пока не будут отображены на экране.

Флюс элементы

Ниже приводится простое объяснение концепции потока . В следующей главе мы узнаем, как внедрить это в приложение.

• Действия — Действия отправляются диспетчеру для запуска потока данных.

• Диспетчер — это центральный центр приложения. Все данные отправляются и отправляются в магазины.

• Store — Store — это место, где хранятся состояние приложения и логика. Каждый магазин поддерживает определенное состояние, и он будет обновляться при необходимости.

• Представление — представление будет получать данные из магазина и повторно отображать приложение.

Действия — Действия отправляются диспетчеру для запуска потока данных.

Диспетчер — это центральный центр приложения. Все данные отправляются и отправляются в магазины.

Store — Store — это место, где хранятся состояние приложения и логика. Каждый магазин поддерживает определенное состояние, и он будет обновляться при необходимости.

Представление — представление будет получать данные из магазина и повторно отображать приложение.

Поток данных изображен на следующем рисунке.

Flux Pros

• Единый направленный поток данных легко понять.
• Приложение проще в обслуживании.
• Части приложения отделены.

ReactJS — Использование Flux

В этой главе мы узнаем, как реализовать шаблон потоков в приложениях React. Мы будем использовать фреймворк Redux . Цель этой главы — представить простейший пример каждой части, необходимой для соединения Redux и React .

Шаг 1 — Установите Redux

Мы установим Redux через окно командной строки .

C:\Users\username\Desktop\reactApp>npm install --save react-redux

Шаг 2 — Создание файлов и папок

На этом этапе мы создадим папки и файлы для наших действий , редукторов и компонентов . После того, как мы закончили с этим, вот так будет выглядеть структура папок.

C:\Users\Tutorialspoint\Desktop\reactApp>mkdir actions
C:\Users\Tutorialspoint\Desktop\reactApp>mkdir components
C:\Users\Tutorialspoint\Desktop\reactApp>mkdir reducers
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > actions/actions.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > reducers/reducers.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/AddTodo.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/Todo.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/TodoList.js

Шаг 3 — Действия

Действия — это объекты JavaScript, которые используют свойство type для информирования о данных, которые должны быть отправлены в хранилище. Мы определяем действие ADD_TODO, которое будет использоваться для добавления нового элемента в наш список. Функция addTodo является создателем действия, который возвращает наше действие и устанавливает идентификатор для каждого созданного элемента.

действия / actions.js

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0;

export function addTodo(text) {
   return {
      type: ADD_TODO,
      id: nextTodoId++,
      text
   };
}

Шаг 4 — Редукторы

В то время как действия только вызывают изменения в приложении, редукторы определяют эти изменения. Мы используем оператор switch для поиска действия ADD_TODO . Редуктор — это функция, которая принимает два параметра ( состояние и действие ) для вычисления и возврата обновленного состояния.

Первая функция будет использоваться для создания нового элемента, а вторая будет помещать этот элемент в список. В конце мы используем вспомогательную функцию CombineReducers, где мы можем добавлять любые новые редукторы, которые мы могли бы использовать в будущем.

редукторы / reducers.js

import { combineReducers } from 'redux'
import { ADD_TODO } from '../actions/actions'

function todo(state, action) {
   switch (action.type) {
      case ADD_TODO:
         return {
            id: action.id,
            text: action.text,
         }
      default:
         return state
   }
}
function todos(state = [], action) {
   switch (action.type) {
      case ADD_TODO:
         return [
            ...state,
            todo(undefined, action)
         ]
      default:
         return state
   }
}
const todoApp = combineReducers({
   todos
})
export default todoApp

Шаг 5 — Магазин

Магазин — это место, где хранится информация о состоянии приложения. Создать магазин очень просто, если у вас есть редукторы. Мы передаем свойство store в элемент provider , который оборачивает наш компонент маршрута.

main.js

import React from 'react'

import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'

import App from './App.jsx'
import todoApp from './reducers/reducers'

let store = createStore(todoApp)
let rootElement = document.getElementById('app')

render(
   <Provider store = {store}>
      <App />
   </Provider>,
	
   rootElement
)

Шаг 6 — корневой компонент

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

Эта функция принимает функцию выбора в качестве аргумента. Функция выбора берет состояние из хранилища и возвращает реквизиты ( visibleTodos ), которые мы можем использовать в наших компонентах.

App.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from './actions/actions'

import AddTodo from './components/AddTodo.js'
import TodoList from './components/TodoList.js'

class App extends Component {
   render() {
      const { dispatch, visibleTodos } = this.props
      
      return (
         <div>
            <AddTodo onAddClick = {text =>dispatch(addTodo(text))} />
            <TodoList todos = {visibleTodos}/>
         </div>
      )
   }
}
function select(state) {
   return {
      visibleTodos: state.todos
   }
}
export default connect(select)(App);

Шаг 7 — Другие компоненты

Эти компоненты не должны знать о избыточности.

компоненты / AddTodo.js

import React, { Component, PropTypes } from 'react'

export default class AddTodo extends Component {
   render() {
      return (
         <div>
            <input type = 'text' ref = 'input' />
				
            <button onClick = {(e) => this.handleClick(e)}>
               Add
            </button>
         </div>
      )
   }
   handleClick(e) {
      const node = this.refs.input
      const text = node.value.trim()
      this.props.onAddClick(text)
      node.value = ''
   }
}

компоненты / Todo.js

import React, { Component, PropTypes } from 'react'

export default class Todo extends Component {
   render() {
      return (
         <li>
            {this.props.text}
         </li>
      )
   }
}

компоненты / TodoList.js

import React, { Component, PropTypes } from 'react'
import Todo from './Todo.js'

export default class TodoList extends Component {
   render() {
      return (
         <ul>
            {this.props.todos.map(todo =>
               <Todo
                  key = {todo.id}
                  {...todo}
               />
            )}
         </ul>
      )
   }
}

Когда мы запустим приложение, мы сможем добавить элементы в наш список.

ReactJS — Анимации

В этой главе мы научимся анимировать элементы с помощью React.

Шаг 1 — Установите React CSS Transitions Group

Это дополнение React, используемое для создания основных CSS-переходов и анимации. Мы установим его из окна командной строки —

C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-group

Шаг 2 — Добавить файл CSS

Давайте создадим новый файл style.css.

C:\Users\Tutorialspoint\Desktop\reactApp>type nul > css/style.css

Чтобы иметь возможность использовать его в приложении, нам нужно связать его с элементом head в index.html.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <link rel = "stylesheet" type = "text/css" href = "./style.css">
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

Шаг 3 — Появление анимации

Мы создадим базовый компонент React. Элемент ReactCSSTransitionGroup будет использоваться в качестве оболочки для компонента, который мы хотим анимировать. Он будет использовать transitionAppear и transitionAppearTimeout , тогда как transitionEnter и transitionLeave имеют значение false.

App.jsx

import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

class App extends React.Component {
   render() {
      return (
         <div>
            <ReactCSSTransitionGroup transitionName = "example"
               transitionAppear = {true} transitionAppearTimeout = {500}
               transitionEnter = {false} transitionLeave = {false}>
					
               <h1>My Element...</h1>
            </ReactCSSTransitionGroup>
         </div>      
      );
   }
}
export default App;

main.js

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

ReactDOM.render(<App />, document.getElementById('app'));

CSS анимация очень проста.

CSS / style.css

.example-appear {
   opacity: 0.04;
}
.example-appear.example-appear-active {
   opacity: 2;
   transition: opacity 50s ease-in;
}

Как только мы запустим приложение, элемент исчезнет.

Шаг 4 — Вход и выход из анимации

Вводить и оставлять анимацию можно использовать, когда мы хотим добавить или удалить элементы из списка.

App.jsx

import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         items: ['Item 1...', 'Item 2...', 'Item 3...', 'Item 4...']
      }
      this.handleAdd = this.handleAdd.bind(this);
   };
   handleAdd() {
      var newItems = this.state.items.concat([prompt('Create New Item')]);
      this.setState({items: newItems});
   }
   handleRemove(i) {
      var newItems = this.state.items.slice();
      newItems.splice(i, 1);
      this.setState({items: newItems});
   }
   render() {
      var items = this.state.items.map(function(item, i) {
         return (
            <div key = {item} onClick = {this.handleRemove.bind(this, i)}>
               {item}
            </div>
         );
      }.bind(this));
      
      return (
         <div>      
            <button onClick = {this.handleAdd}>Add Item</button>
				
            <ReactCSSTransitionGroup transitionName = "example" 
               transitionEnterTimeout = {500} transitionLeaveTimeout = {500}>
               {items}
            </ReactCSSTransitionGroup>
         </div>
      );
   }
}
export default App;

main.js

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

ReactDOM.render(<App />, document.getElementById('app'));

CSS / style.css

.example-enter {
   opacity: 0.04;
}
.example-enter.example-enter-active {
   opacity: 5;
   transition: opacity 50s ease-in;
}
.example-leave {
   opacity: 1;
}
.example-leave.example-leave-active {
   opacity: 0.04;
   transition: opacity 50s ease-in;
}

Когда мы запустим приложение и нажмем кнопку « Добавить элемент» , появится приглашение.

Как только мы введем имя и нажмем ОК, новый элемент исчезнет.

Теперь мы можем удалить некоторые элементы ( элемент 3 … ), щелкнув по нему. Этот элемент исчезнет из списка.

ReactJS — Компоненты высшего порядка

Компоненты высшего порядка — это функции JavaScript, используемые для добавления дополнительных функций к существующему компоненту. Эти функции являются чистыми , что означает, что они получают данные и возвращают значения в соответствии с этими данными. Если данные изменяются, функции более высокого порядка перезапускаются с другим вводом данных. Если мы хотим обновить наш возвращаемый компонент, нам не нужно менять HOC. Все, что нам нужно сделать, это изменить данные, которые использует наша функция.

Компонент высшего порядка (HOC) оборачивается вокруг «нормального» компонента и обеспечивает дополнительный ввод данных. На самом деле это функция, которая принимает один компонент и возвращает другой компонент, который оборачивает исходный.

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

import React from 'react';

var newData = {
   data: 'Data from HOC...',
}

var MyHOC = ComposedComponent => class extends React.Component {
   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }
   render() {
      return <ComposedComponent {...this.props} {...this.state} />;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default MyHOC(MyComponent);

Если мы запустим приложение, мы увидим, что данные передаются в MyComponent .

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

ReactJS — лучшие практики

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

Государство — Государство следует избегать в максимально возможной степени. Хорошей практикой является централизация состояния и передача его по дереву компонентов в качестве реквизита. Всякий раз, когда у нас есть группа компонентов, которым нужны одни и те же данные, мы должны установить вокруг них элемент контейнера, который будет содержать состояние. Шаблон Flux — хороший способ обработки состояния в приложениях React.

PropTypes — PropTypes всегда должен быть определен. Это поможет отслеживать все реквизиты в приложении, а также будет полезно для любого разработчика, работающего над тем же проектом.

Render — большая часть логики приложения должна быть перемещена внутри метода render. Мы должны попытаться минимизировать логику в методах жизненного цикла компонентов и переместить эту логику в метод рендеринга. Чем меньше состояния и реквизита мы используем, тем чище будет код. Мы всегда должны сделать государство максимально простым. Если нам нужно вычислить что-то из состояния или реквизита, мы можем сделать это внутри метода рендеринга.

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

Компоненты высшего порядка (HOC) — в предыдущих версиях React предлагались миксины для работы с функциями многократного использования. Поскольку в настоящее время миксины устарели, одним из решений является использование HOC.