React - одна из самых популярных на сегодняшний день интерфейсных «библиотек». Действительно, это творение Facebook сосредоточено на создании пользовательских интерфейсов, а не на других блоках приложения, таких как маршрутизация на стороне клиента, хранение данных и т. Д. Эти задачи оставлены на усмотрение других дополнительных решений экосистемы (например: React-Router для навигации, Redux для управления состоянием приложения и т. д.).

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

Это набирающая популярность библиотека с более чем 96 000 звезд на GitHub. С момента выпуска он набирал в среднем 58 звезд в день. Кроме того, его используют в производстве такие огромные компании, как Instagram, Netflix, WhatsApp, Airbnb и, конечно же, Facebook.

В официальной документации React описывается следующим образом:

  • Декларативный: позволяет безболезненно создавать интерактивные интерфейсы. Создавайте простые представления для каждого состояния в вашем приложении, и React будет эффективно обновлять и отображать только нужные компоненты при изменении ваших данных. Декларативные представления делают ваш код более предсказуемым и легким для отладки.
  • На основе компонентов: создавайте инкапсулированные компоненты, которые управляют своим собственным состоянием, а затем компонуйте их для создания сложных пользовательских интерфейсов. Поскольку логика компонентов написана на JavaScript, а не на шаблонах, вы можете легко передавать расширенные данные через свое приложение и сохранять состояние вне DOM.
  • Учиться один раз, писать где угодно: вы можете разрабатывать новые функции в React, не переписывая существующий код. React также может отображать на сервере с помощью Node и мобильных приложений Power с помощью React Native. *

Примечание. Вам будет полезно установить некоторые инструменты React в свой браузер (если вы используете Google Chrome или Mozilla Firefox). первым инструментом является React-Detector, который выделяет значок расширения каждый раз, когда вы переходите на веб-сайт, использующий React. Второй инструмент - это расширение React Developer Tools, оно описывает каждый элемент React, составляющий страницу.

Возможности React:

  • Виртуальный DOM

DOM (объектная модель документа) - это структура HTML-элементов, составляющих веб-страницу. DOM API определяет способ доступа к этим элементам страницы и их изменения. React ускоряет обновление DOM за счет использования различий DOM, который заключается в сравнении текущего отображаемого контента с новыми изменениями пользовательского интерфейса. В этом сила потрясающей производительности рендеринга React. Вместо того, чтобы напрямую манипулировать DOM (что может быть подвержено ошибкам), React хранит две копии Virtual DOM, оригинальную и обновленную версию, которая отражает изменения, введенные из представления. Две версии запускаются через функцию React, которая выделяет различия и выводит поток операций DOM, которые изменяют только те части представления, которые фактически изменились. В результате экономятся время и ресурсы, поскольку изменения в представлении влияют только на те части, которые фактически изменяются.

Давайте возьмем пример, чтобы все это объяснить. Вот "Hello World!" От React :

import React from "react";
import ReactDOM from "react-dom";
const Hello = React.createClass({
render() {
return React.createElement('div', null, "hello")
}
);
ReactDOM.render(React.createElement(Hello), document.getElementById("app"));

Вызов ReactDOM.render выполняет функцию рендеринга и извлекает виртуальное дерево DOM, сравнивает его с деревом DOM, содержащимся в приложении, идентифицирует элемент и добавляет текст «hello world». React.createElement принимает в качестве параметра элемент HTML, объект атрибута и дочерние элементы (все параметры после второго будут дочерними). На данный момент ничего экстраординарного, но давайте добавим немного интерактивности (и забудем об их импорте для простоты).

  • JSX

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

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

Файлы JSX - это современное решение React для разделения кода HTML и JavaScript. JSX обеспечивает реальную гибкость в написании, чтении и понимании. Babel предлагает предустановку для JSX, которая позволяет преобразовывать JSX в классический код JavaScript и исполняемый навигатором.

Без JSX:

class Hello extends React.Component {
render() {
return React.createElement('div',null,
React.createElement('h1',null,'Title'),
React.createElement('p',null,'Description'));
}
}

С JSX:

class Hello extends React.Component {
render() {
return <div>
          <h1>Title</h1>
          <p>Description</p>
        </div>
}
}
  • Компоненты React

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

1. Реквизит:

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

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

2. Состояние:

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

В чем разница между состоянием и реквизитом?

«реквизиты» передаются компоненту (аналогично параметрам функции), тогда как состояние управляется внутри компонента (аналогично переменным, объявленным внутри функции). (из официальной документации)

Теперь, когда мы знаем основы компонентов, давайте рассмотрим основную классификацию компонентов!

В React есть два типа компонентов:

  • Функциональный компонент: функция, принимающая в качестве параметра объект с именем props и отрисовывающая JSX. Это самый простой способ создать компонент React. это компонент дампа без внутренней логики и внутреннего состояния. Он получает функции и данные из компонента контейнера и отображает их. Вот почему его также называют компонентом презентации.
function ItemCard(props) {
return <h1>the item price :{props.price}</h1>;
}

Эта функция является допустимым компонентом React, поскольку она принимает один аргумент объекта «props» (что означает свойства) с данными и возвращает элемент React. Мы называем такие компоненты «функциональными», потому что они буквально являются функциями JavaScript.

  • Компонент класса: компонент класса предлагает больше возможностей. Он должен иметь метод рендеринга, возвращающий JSX, получающий реквизиты и имеющий состояние, представляющее внутреннее состояние компонента, его можно обновить, вызвав функцию setState ().

примечание: есть два способа создать компонент класса. Традиционный и старый способ - использовать React.createClass (). Когда React был впервые создан, это был единственный способ объявить компонент класса.

Давайте посмотрим на пример:

var ItemsListContainer = React.createClass({
render() {
return <div>
         <h1>Hello World!</h1>
         <p>This is a React Component.</p>
       </div>
}
})

Переменная MyComponent теперь содержит компонент React, который можно использовать где угодно на веб-сайте. Чтобы связать этот сценарий с HTML-страницей, сначала у вас должен быть элемент div с уникальным идентификатором на странице.

<div id=”Items-List”></div>

Затем в скрипте после объявления переменной компонента React используйте функцию ReactDOM.render (), которая принимает 2 аргумента. Первый - это компонент React, а второй - целевой HTML-элемент.

ReactDOM.render(<MyComponent />, document.getElementById('Items-List'))

- Второй способ создать компонент класса React - написать класс, расширяющий React.Component (ES6 syntax).

class ItemsList extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
        <p>This is a React Component.</p>
      </div>
    );
  }
}

После того, как вы создали компонент, вы можете использовать его где угодно, снова используя ReactDOM.render () таким же образом, чтобы настроить таргетинг на HTML-элемент по идентификатору или импортировать его и использовать следующим образом (ES6):

import ItemList from '../ItemList/ItemList'
function Welcome {
  return (
    <ItemsList/>
  );
}

Установка :

Есть много способов запустить React Project (клонировать стартовый проект, использовать create-react-app и т. Д.). Однако create-react-app по-прежнему остается лучшим способом создать новое одностраничное приложение React с нуля. Он настраивает вашу среду разработки так, чтобы вы могли использовать новейшие функции JavaScript, предоставляя удобные возможности разработчика и оптимизируя ваше приложение для производства. На вашем компьютере должен быть Node ›= 6.

Создание приложения React - отличный способ начать работу с приложением Webpack-React, используя стандартные соглашения. Итак, мы можем установить его глобально из командной строки, используя флаг «-g». Вы можете запустить эту команду в любом месте вашей системы:

npm install -g create-react-app

Следовательно, вы можете создать новое приложение с помощью этой команды:

create-react-app my-app

Внутри каталога вашего проекта вы можете выполнить несколько команд (вы также можете использовать пряжу):

  • npm start: запускает сервер разработки и автоматически перезагружает страницу каждый раз, когда вы вносите изменения.
  • npm run build: объединяет приложение в статические файлы для производства.
  • npm teststarts: средство запуска тестов, позволяющее тестировать приложение с помощью Jest во время его сборки.
  • npm run eject: выводит ваше приложение из настройки create-response-app, что позволяет настроить конфигурацию проекта.

Итак, мы можем запустить сгенерированное приложение:

cd my-app
npm start

Запуск сервера (npm start) автоматически запускает приложение в браузере на localhost: 3000. Кроме того, в выводе консоли отображается адрес LAN, так что вы можете получить доступ к приложению с мобильного устройства в той же сети.

Приложение должно выглядеть так:

  • Ресурсы:

https://reactjs.org/

https://github.com/facebook/react

https://www.apprendre-react.fr/



Начать изучение React
React - это« библиотека javascript для создания пользовательских интерфейсов от замечательных людей из Facebook и Instagram. Это строго… egghead.io »



https://jelvix.com/blog/is-react-js-fast