How to ReactJS / Хабр

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

• Изначально, React был нацелен на экспертов и ранних последователей
• Facebook открывает исходный код только тех продуктов, которые использует сам, т. е. не нацеленные на проекты-меньше-чем-Facebook
• Огромное количество гайдов по React совершенно разной сложности

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

Существует множество противоречивых советов по React. Зачем слушать меня?

Я работал в команде Facebook, которая разработала и опубликовала React. Теперь я работаю не в Facebook, а в небольшом стартапе, поэтому могу говорить с точки зрения своей текущей позиции, а не Facebook.

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

Вы должны учиться в этом порядке, ничего не пропуская и не изучая две вещи параллельно:

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

Также, в React-сообществе есть несколько тем, которые являются «супер-современными практиками» («bleeding edge»). Эти темы интересны, но разбираться в них сложно, они менее популярны, чем темы выше, и не нужны для разработки большей части приложений:

Существует заблуждение, что чтобы начать работу с React, нужен огромный инструментарий. Но это не так. В официальной документации вы найдете copy-paste HTML шаблон, который достаточно сохранить в .html файле и сразу же начать работать. Для этого шага не нужен никакой инструментарий, и не стоит приниматься за него, пока вы не будете чувствовать себя комфортно с основами React.

Я также считаю, что самый простой способ выучить React, это официальный туториал.

npm это менеджер пакетов Node.js и самый популярный способ для front-end разработчиков и дизайнеров делиться JavaScript кодом. Он включает модульную систему CommonJS и позволяет устанавливать инструменты командной строки, написанные JavaScript. Прочитайте эту статью, чтобы понять, почему и как используется CommonJS, или CommonJS Spec Wiki для большей информации о CommonJS API.

Большая часть компонентов, библиотек и инструментария в экосистеме React доступны как CommonJS модули и устанавливаются с помощью npm.

По определенному количеству технических причин, использование CommonJS модулей (то есть всего в npm) невозможно нативно в браузере. Вам понадобится JavaScript “bundler” для сборки этих модулей в .js файлы, которые затем можно будет включить в страницу тегом <script>.

Примерами JavaScript сборщиков являются webpack и browserify. Они оба являются хорошим выбором, но я предпочитаю webpack, так как он имеет определенный набор фич, упрощающих разработку крупных приложений. Так как документация может показаться запутанной, у меня есть шаблон для быстрого старта, и я написал how-to гайд по webpack для более сложных кейсов.

Стоит запомнить: CommonJS использует функцию require() для импорта модулей, из-за чего некоторые пользователи начинают думать, что это нечто связанное с библиотекой require.js. По определенному количеству технических причин, я советую избегать require.js. Этот выбор не популярен в среде React.

Кроме JSX (который вы изучили в туториале React), вы могли заметить несколько забавных синтаксических конструкций в примерах. Это называется ES6, самая последняя версия JavaScript, с которой вы еще можете быть не знакомы. Из-за новизны, ES6 еще не полностью доступен в браузерах, но ваш сборщик может транслировать его в поддерживаемый JavaScript после определенной настройки.

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

Вы также могли слышать разговоры о том, что ES6-классы являются предпочитаемым способом создания компонентов React. Это не так. Большинство людей (включая Facebook) используют React.createClass().

“Одностраничные приложения” (Single-page applications или SPA) — современная мода. Это веб-странички которые загружаются один раз, и, когда пользователь кликает по ссылке или кнопке, JavaScript, работающий на странице, обновляет адресную строку и контент, не перезагружая страницу целиком. Управление адресной строкой осуществляется router (роутером).

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

Не используйте роутер, если вы не создаете single-page application. Большинство проектов все равно начинают с маленьких компонентов внутри имеющегося большого приложения.

Скорее всего, вы слышали о Flux. Про него имеется *тонна* дезинформации в сети.

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

Компоненты React’а собраны в иерархию. В большинстве случаев, ваша модель данных также будет следовать этой иерархии. В этих ситуациях Flux не приносит особого выигрыша. Иногда, тем не менее, ваша модель данных не иерархична. Если ваши React компоненты получают props, которые кажутся «внешними», или у вас есть некоторое количество компонентов, которые начинают становиться сильно сложными, возможно вам стоит присмотреться к Flux.

Вы поймете, когда вам понадобится Flux. Если вы не уверены, что он вам нужен, то он вам не нужен.

Если вы решили использовать Flux, самой популярной и документированной Flux-библиотекой является Redux. Также есть *множество* альтернатив, возможно вы соблазнитесь попробовать их, но мой совет — использовать самую популярную.

Пре-React, большинство людей использовали CSS-препроцессоры типа SASS для переиспользования стилей. React делает написание переиспользуемых компонентов простым, также упрощая и написание стилей. Многие из сообщества (включая меня) экспериментируют над тем, чтобы совсем избавиться от CSS.

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

Как только вы почувствуете то, как React работает, обратите внимание на альтернативные техники. Одна из популярных, это BEM. Я бы порекомендовал избавляться от CSS-препроцессора, так как React предоставляет более гибкий путь переиспользования стилей (через переиспользование компонентов) и ваш JavaScript-сборщик может генерировать гораздо более эффективные таблицы стилей для вас (доклад на эту тему на OSCON). Вместе с тем, React, как и любая другая JavaScript библиотека, сможет работать также хорошо с любым CSS-препроцессором.

Серверный рендеринг часто называется «универсальным» или «изоморфным» JS. Это означает что вы можете взять ваши React-компоненты и отрендерить их в статический HTML на сервере. Это ускоряет первоначальную загрузку страницы, так как пользователю не нужно ждать, пока скачается весь JS, чтобы увидеть UI, а React, в свою очередь, может переиспользовать HTML, сгенерированный на сервере, не рендеря ничего на клиенте повторно.

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

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

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

Эти технологию помогают уменьшить количество AJAX-запросов. Они все еще являются относительно экспериментальными, так что если у вас нет проблем со слишком большим количеством AJAX запросов, вам не нужны Relay или Falcor.

UPD. Немного почищен перевод первых абзацев, спасибо vtambourine за правки
UPD2. Много мелких грамматических исправлений, спасибо wiygn

Стилизованные компоненты в React.js: краткое руководство / Хабр

Доброго времени суток, друзья!

Представляю вашему вниманию перевод небольшой заметки про использование стилизованных компонентов (далее — СК) в React.

Без лишних слов.

Что такое СК?

СК — это библиотека для React и React Native для создания и управления CSS.

Данное решение относится к концепции «CSS-in-JS», когда вы определяете CSS прямо в JavaScript-файле (т.е. в компоненте в случае с React).

О популярности этого решения в среде React-разработчиков свидетельствует около 8 млн скачиваний в месяц из npm и 30 тыс звезд на GitHub.

Разумеется, для знакомства со СК необходимо хотя бы в общих чертах знать React.

Преимуществами СК является следующее:

• Это обычный CSS. Да, вы пишете CSS в JS-файле, но синтакис от этого не меняется
• При использовании СК автоматически добавляются вендорные префиксы, обеспечивающие кроссбраузерность
• Неиспользуемые стили также автоматически удаляются
• Более того, автоматически генерируются названия классов компонентов, что избавляет от необходимости использования методогии типа БЭМ

Установка СК

Для использования СК нужно их сначала установить:

npm i styled-components

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

import styled from 'styled-components'

После этого можно с ними работать.

Создание СК

Откройте проект, над которым вы работаете, или быстро создайте его с помощью npx create-react-app app-name и откройте любой компонент, например, App.js.

Давайте добавим в него наш первый СК:

// App.js
import React from 'react'
import styled from 'styled-components'

// СК
const Button = styled.a`
    background-color: teal;
    color: white;
    padding: 1rem 2rem;
`

const App = () => {
    return (
        <Button>Кнопка</Button>
    )
}

export default App

Разберем данный код:

• Объявляем название компонента посредством const Button
• styled предоставляет нам функционал СК
• Обратите внимание на «a» после styled. Это HTML-тег «a». В СК можно использовать любые HTML-теги (section, h2, div и т.д.)

, возвращаемый в App, это обычный React-компонент.

В предыдущем примере мы создали СК внутри существующего компонента.

Однако это можно (и даже нужно) сделать в отдельном файле (например, в Button.js):

// Button.js
import styled from 'styled-components'

const Button = styled.a`
    background-color: teal;
    color: white;
    padding: 1rem 2rem;
`

export default Button

После этого мы можем импортировать Button как любой другой компонент:

// App.js
import React from 'react'
import styled from 'styled-components'
// импортируем кнопку
import Button from './Button'

const App = () => {
    return (
        <Container>
            <Button>Кнопка</Button>
        </Container>
    )
}

export default App

Готово.

Поздравляю, вы только что создали свой первый СК.

Использование пропсов для редактирования СК

Представьте, что у вас есть компонент Button, и вам нужно применять к нему разные стили в зависимости от назначения кнопки (primary — главная или основная, secondary — второстепенная или дополнительная, danger — опасность, предупреждение и т.д.)

Для этого можно использовать пропсы.

Рассмотрим пример.

Здесь мы рендерим две кнопки, стиль одной из который зависит от пропса:

// App.js
import React from 'react'
import styled from 'styled-components'
import Button from './Button'

const App = () => {
    return (
        <>
            <Button>Кнопка</Button>
            <Button primary>Главная кнопка</Button>
        </>
    )
}

export default App

Обратите внимание на использование сокращенного синтаксиса фрагмента (>).

После этого добавляем динамические стили в компонент Button:

// Button.js
import styled from 'styled-components'

const Button = styled.a`
    display: imline-block;
    border-radius: 3px;
    padding: 0.5rem 0;
    margin: 0.5rem 1rem;
    width: 11rem;
    border: 2px solid white;
    background: ${props => props.primary ? 'white' : 'palevioletred'};
    color: ${props => props.primary ? 'palevioletred' : 'white'};
`

export default Button

Здесь мы возвращаем то или иное значение CSS-свойства в зависимости от пропса.

Выражение background: ${props => props.primary? ‘white’: ‘palevioletred’} означает, что если пропс будет иметь значение true, то цвет фона будет белым, а цвет текста — palevioletred.

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

Поэтому имеет смысл импортировать { css } из styled-components:

// Button.js
import styled, { css } from 'styled-components'

const Button = styled.a`
display: inline-block;
    border-radius: 3px;
    padding: 0.5rem 0;
    margin: 0.5rem 1rem;
    width: 11rem;
    background: transparent;
    color: white;
    border: 2px solid white;

    ${props => props.primary && css`
        background: white;
        color: palevioletred;
    `}
`

export default Button

Это позволяет использовать динамические стили для разных пропсов.

Например, добавим стили для danger:

// Button.js
import styled, { css } from 'styled-components'

const Button = styled.a`
display: inline-block;
    border-radius: 3px;
    padding: 0.5rem 0;
    margin: 0.5rem 1rem;
    width: 11rem;
    background: transparent;
    color: white;
    border: 2px solid white;

    ${props => props.primary && css`
        background: white;
        color: palevioletred;
    `}

    ${props => props.danger && css`
        backround: red;
        color: white;
    `}
`

export default Button

Отлично.

Как сделать кнопку более отзывчивой или адаптированной?

Использование медиа-запросов

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

// Button.js
const Button = styled.a`
    display: inline-block;
    border-radius: 3px;
    padding: 0.5rem 0;
    margin: 0.5rem 1rem;
    width: 9rem;
    background: transparent;
    color: white;
    border: 2px solid white;

    @media (min-width: 768px) {
        padding: 1rem 2rem;
        width: 11rem;
    }

    @media (min-width: 1024px) {
        padding: 1.5rem 2.5rem;
        width: 13rem;
    }
`

export default Button

Обработка псевдоселекторов

Это делается по аналогии с медиа-запросами.

Например, добавим обработку наведения курсора на кнопку (псевдоселектор hover):

// Button.js
import styled from 'styled-components'

const Button = styled.a`
    display: inline-block;
    border-radius: 3px;
    padding: 0.5rem 0;
    margin: 0.5rem 1rem;
    width: 9rem;
    background: transparent;
    color: white;
    border: 2px solid white;

    :hover {
        border-color: green;
    }
`

export default Button

Создание глобальных стилей

Основная ментальная модель React — все есть компонент.

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

Такой подход имеет ряд преимуществ, но существует одна проблема: как использовать одинаковые стили для нескольких компонентов? Т.е. как применить глобальные стили?

Мы можем, например, захотеть следующее:

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

В СК для этого используется функция createClodabStyle.

Сначала откройте основной компонент приложения.

Таким компонентом, обычно, является App.js.

Затем импортируйте в него createClodabStyle и определите некоторые стили в компоненте GlobalStyle (вы можете назвать его как угодно):

// App.js
import React from 'react'
import styled, { createGlobalStyle } from 'styled-components'
import { Container, Nav, Content } from '../components'

const GlobalStyle = createGlobalStyle`
    body {
        margin: 0;
        padding: 0;
        background: teal;
        font-family: Open-Sans, Helvetica, Sans-Serif;
    }
`

const App = () => {
    return (
        <Container>
            <Nav />
            <Content />
        </Container>
    )
}

export default App

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

// App.js
import React from 'react'
import styled, { createClodabStyle } from 'styled-components'
import { Container, Nav, Content } from '../components'

const GlobalStyle = createGlobalStyle`
    body {
        margin: 0;
        padding: 0;
        background: teal;
        font-family: Open-Sans, Helvetica, Sans-Serif;
    }
`

const App = () => {
    return (
        <>
            <GlobalStyle />
            <Container>
                <Nav />
                <Content />
            </Container>
        </>
    )
}

export default App

Добавление GlobalStyle в качестве узла в начало виртуального DOM является обязательным требованием для использования глобальных стилей.

Надеюсь, статья была вам полезной. Благодарю за внимание.

Введение в React Hooks / Хабр

Если вы читаете Twitter, вы, вероятнее всего, знаете что Hooks  -  это новая фича React, но вы можете спросить, как мы на практике можем их использовать? В этой статье мы покажем вам несколько примеров использования Hooks.

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

Хотя компоненто-ориентированная архитектура позволяет нам повторно использовать view в нашем приложении, одна из самых больших проблем, с которыми сталкивается разработчик, заключается в том, как повторно использовать логику, находящуюся в state, между компонентами. Когда у нас есть компоненты, которые имеют сходную логику состояния, нет хороших решений для переиспользования компонентов, и это иногда может привести к дублированию логики в конструкторе и методах жизненного цикла.
Чтобы решить эту проблему, обычно используют:

• компоненты высшего порядка (High Order Components)
• render props

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

Hooks нацелены на решение всех этих проблем, позволяя вам писать функциональные компоненты, которые имеют доступ к state, context, методам жизненного цикла, ref и т. д., без написания классов.

Прежде чем мы погрузимся, важно упомянуть, что разработка Hooks API еще не завершена.

Кроме того, официальная документация очень хороша, и мы рекомендуем ее прочитать еще и потому, что в ней расширенно описана мотивация, стоящая за введением Hooks.
UPD Оригинальная статья, перевод которой вы читаете была написана еще в то время, когда это API было в alpha тестировании, на данный момент React Hooks официально готовы к использованию. Необратимые изменения, привнесенные в релиз (по сравнению с альфой) можно посмотреть внизу статьи или в релизных заметках.

Как Hooks соотносятся с классами

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

Напомним, что при написании классов компонентов нам часто необходимо:

• Управлять state
• Использовать методы жизненного цикла, такие как componentDidMount() и componentDidUpdate()
• Доступ к context (static contextType)

С помощью React Hooks мы можем воспроизвести аналогичное поведение в функциональных компонентах:

• Для доступа к состоянию компонента использовать useState() hook
• Вместо использования методов жизненного цикла таких как componentDidMount() и componentDidUpdate(), использовать useEffect() hook.
• Вместо static свойства contextType использовать useContext() hook.

Для использования Hooks необходима последняя версия React

Вы можете начать работу с Hooks прямо сейчас, сменив значение react и react-dom в вашем package.json на «next».

State является неотъемлемой частью React. Он позволяет нам объявлять переменные, которые содержат данные, которые, в свою очередь, будут использоваться в нашем приложении. С помощью классов state обычно определяется следующим образом:

До Hooks, state обычно использовался только в компоненте - классе, но, как упоминалось выше, Hooks позволяет нам добавлять состояние и к функциональному компоненту.

Давайте посмотрим пример ниже. Здесь мы построим переключатель с подсветкой, который изменит цвет в зависимости от значения state. Для этого мы будем использовать hook useState().

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

Наш компонент - это функция

В вышеприведенном блоке кода, мы начинаем с импорта useState из React. UseState  —  это новый способ использования возможностей, которые раньше могло предложить this.state.
Затем обратите внимание, что этот компонент является функцией, а не классом. Интересно!

Чтение и запись state

Внутри этой функции мы вызываем useState для создания переменной в state:

useState используется для объявления переменной state и может быть инициализирован любым типом значения (в отличие от state в классах, который должен быть объектом).

Как видно выше, мы используем деструктуризацию по возвращаемому значению useState.

• Первое значение, light в этом случае, является текущим state (как this.state)
• Второе значение - это функция, используемая для обновления значения state(первого значения) (как this.setState).

Затем мы создаем две функции, каждая из которых устанавливает state в разные значения, 0 или 1.

Затем мы применяем их как обработчики событий на кнопках во view:

React отслеживает state

Когда нажимается кнопка «On», Вызывается функция setOn, вызывающая setLight(1). Вызов setLight(1) обновляет значение light для следующего рендера. Это может показаться немного волшебным, но React отслеживает значение этой переменной и будет передавать новое значение, когда происходит ре-рендер этого компонента.
Затем мы используем текущее состояние (light), чтобы определить, должна ли лампа быть включена или нет. То есть, мы устанавливаем цвет заливки SVG в зависимости от значения light. Если light равен 0 (выкл.), То для fillColor установлено значение # 000000 (а если равен 1 (включено), fillColor устанавливается на # ffbb73).

Multiple States

Хотя мы не делаем этого в приведенном выше примере, вы можете создать несколько state, вызвав useState более одного раза. Например:

ПРИМЕЧАНИЕ. 

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

Пример useEffect() Hook

UseEffect Hook позволяет выполнять side эффекты в функциональных компонентах. Побочными эффектами могут быть обращения к API, обновление DOM, подписка на обработчики событий - все, что хотите, лишь бы произошло «императивное» действие.

Используя useEffect() Hook, React знает, что вы хотите выполнить определенное действие после рендеринга.

Давайте посмотрим на пример ниже. Мы будем использовать useEffect() для вызова API и получения ответа.

В этом примере кода используются как useState, так и useEffect, и это потому, что мы хотим записать результат вызова API в state.

Получение данных и обновления state

Чтобы «использовать эффект», нам нужно поместить наш action в функцию useEffect, то есть мы передаем «action» эффект как анонимную функцию, как первый аргумент useEffect.
В примере выше мы обращаемся к API, которое возвращает список имен. Когда возвращается response, мы конвертируем его в JSON, а затем используем setNames(data) для установки state.

Проблемы с производительностью при использовании Effects

Однако стоит сказать еще кое-что об использовании useEffect.

Первое, о чем нужно подумать, это то, что по умолчанию наш useEffect будет вызываться на каждом рендере! Хорошей новостью является то, что нам не нужно беспокоиться об устаревших данных, но плохая новость заключается в том, что мы, вероятно, не хотим делать HTTP-запрос для каждого рендеринга (как в этом случае).

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

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

Чтобы узнать больше о производительности effect, ознакомьтесь с этим разделом в официальных документах.

Кроме того, как и функция useState, useEffect позволяет использовать несколько экземпляров, что означает, что вы можете иметь несколько функций useEffect.

Пример useContext() Hook

Точка контекста

Контекст в React- это способ для дочернего компонента получить доступ к значению в родительском компоненте.

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

Передача props вниз по дереву «несвязанных» компонентов ласково называется props drilling.

React Context решает проблему props drilling, позволяя вам делиться значениями через дерево компонентов, с любым компонентом, который запрашивает эти значения.

useContext() упрощает использование context

С useContext Hook использование context стает проще, чем когда-либо.

Функция useContext() принимает объект сontext, который изначально возвращается из React.createContext(), а затем возвращает текущее значение контекста. Давайте посмотрим на пример ниже.

В приведенном выше коде context JediContext создается с использованием React.createContext().

Мы используем JediContext.Provider в нашем App компоненте и устанавливаем там значение «Luke». Это означает, что любой компонент, которому нужно получить доступ к context теперь сможет считать это значение.

Чтобы прочитать это значение в функции Display(), мы вызываем useContext, передавая аргумент JediContext.

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

Получение ссылки на context в более крупном приложении

Выше мы создали JediContext в рамках обоих компонентов, но в более крупном приложении Display и App будут находиться в разных файлах. Поэтому, если у вас похожая ситуация, вам может быть интересно: «Как мы получаем ссылку на JediContext между файлами?»

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

Например, у вас может быть файл context.js, который содержит что-то вроде этого:

и потом в App.js (и Display.js) вы должны написать:

Спасибо, Дейв)

Пример useRef() Hook

Refs предоставляет способ доступа к React элементам , созданным в методе render().
Если вы новичок в React refs, вы можете прочитать это введение в React refs.
Функция useRef() возвращает объект ref.

useRef() и формы с input

Давайте посмотрим пример использования useRef() hook.

В приведенном выше примере мы используем useRef() в сочетании с useState(), чтобы отрендерить значение input в тег p.

Ref создается в переменной nameRef. Затем переменную nameRef можно использовать в input, задав как ref. По существу, это означает, что теперь содержимое поля ввода будет доступно через ref.

Кнопка отправки в коде имеет обработчик события onClick, называемый submitButton. Функция submitButton вызывает setName (созданный через useState).

Как мы уже делали с использованием hookState, setName будет использоваться для установки state name. Чтобы извлечь имя из тега input, мы читаем значение nameRef.current.value.

Еще одно замечание относительно useRef заключается в том, что его можно использовать больше, чем атрибут ref.

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

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

В приведенном ниже примере мы создадим пользовательский setCounter() Hook, который позволяет нам отслеживать состояние и предоставлять настраиваемые функции обновления state!

См. Также, этот useCounter Hook от react-use и useCounter от Кента

В приведенном выше блоке кода мы создаем функцию useCounter, которая хранит логику нашего hook.

Обратите внимание, что useCounter может использовать другие Hooks! Начнем с создания нового состояния Hook через useState.

Затем мы определяем две вспомогательные функции: increment и decrement, которые вызывают setCount и соответственно корректируют текущий count.

Наконец, мы возвращаем ссылки, необходимые для взаимодействия с нашим Hook.

В: Что происходит, возврат массива с объектом?

О: Ну, как и большинство вещей в Hooks, соглашения API еще не завершены. Но то, что мы делаем здесь, возвращает массив, где:

• Первый элемент - текущее значение Hook
• Второй элемент - это объект, содержащий функции, используемые для взаимодействия с Hook.

Это соглашение позволяет вам легко «переименовать» текущее значение Hook - как мы делаем выше с помощью myCount.

Тем не менее, вы можете вернуть все, что захотите, из своего кастомного Hook.

В приведенном выше примере мы используем increment и decrement как обработчики onClick, в нашем view. Когда пользователь нажимает кнопки, счетчик обновляется и повторно отображается (как myCount) во view.

Написание тестов для React Hooks

Чтобы написать тесты для hooks, мы будем использовать библиотеку для тестирования react-testing-library.

react-testing-library - очень легковесное решение для тестирования компонентов React. Она является раширением react-dom and react-dom/test-utils. Использование библиотеки react-testing-library гарантирует, что ваши тесты будут работать непосредственно с DOM узлами.

С тестированием hooks еще не все понятно. В настоящее время вы не можете протестировать hook изолированно. Вместо этого вам нужно прикрепить свой hook к компоненту и протестировать этот компонент.

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

Тестирование useState() Hook

Давайте посмотрим пример написания тестов для useState Hook. В приведенном выше уроке мы тестируем больше вариаций используемого выше примера useState. Мы будем писать тесты, чтобы убедиться, что нажатие кнопки «Off» Устанавливает состояние в 0 и нажатие кнопки «On» Устанавливает состояние в 1.

В вышеприведенном блоке кода мы начинаем с импорта некоторых хелперов из react-testing-library и тестируемого компонента.

• render, это поможет отобразить наш компонент. Он рендерится в контейнер, который добавляется к document.body
• getByTestId получает DOM элемент по data-testid
• fireEvent, это используется для «запуска» событий DOM. Она прикрепляет обработчик события к document и обрабатывает некоторые события DOM через делегирование событий, например. нажав кнопку.

Далее, в функции утверждения теста, мы задаем значения переменных для элементов с data-testid и их значения, которые мы хотели бы использовать в тесте. Со ссылками на элементы на DOM мы можем затем использовать метод fireEvent для имитации щелчка по кнопке.

Тест проверяет, что, если нажимается onButton, значение state устанавливается в 1, а при нажатии на offButton state равен 1.

Тестирование useEffect() Hook 

В этом примере мы будем писать тесты, чтобы добавить товар в корзину, используя useEffect Hook. Количество элементов также сохраняется в localStorage. Файл index.js в CodeSandbox ниже содержит фактическую логику, используемую для добавления элементов в корзину.

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

В функции, подтверждающей прохождение теста мы сначала устанавливаем cartItem в localStorage равным 0, что означает, что количество элементов корзины равно 0. Затем мы получаем как container так и rerender из компонента App через деструктурирование. Rerender позволяет нам имитировать перезагрузку страницы.

Затем мы получаем ссылки на кнопки и тег p, который отображает текущее значение корзины и устанавливает их в переменные.

Как только это будет сделано, тест затем имитирует щелчок на addButton и проверяет, является ли текущий счетчик корзины равным 1 и перезагружает страницу, после чего, если он проверяет, установлено ли значение localStorage, cartItem, равным 1. Затем он моделирует нажатие на resetButton и проверяет, установлено ли текущее количество элементов корзины равным 0.

Тестирование useRef () Hook

В этом примере мы будем тестировать useRef Hook, и мы будем использовать исходный пример useRef, приведенный выше в качестве основы для теста. UseRef используется для получения значения из поля ввода, а затем устанавливает значение state. Файл index.js в CodeSandbox ниже содержит логику ввода значения и его отправки.

В функции, утверждающей прохождение теста мы устанавливаем переменные в поле input, тег p, который отображает текущее значение ref, и кнопку отправки. Мы также устанавливаем значение, которое мы хотели бы ввести в поле ввода, для переменной newName. Это будет использоваться для проверки в тесте.

Метод fireEvent.change используется для ввода значения в поле input, и в этом случае используется name, сохраненное в константе newName, после чего нажимается кнопка отправки.

Затем тест проверяет, соответствует ли значение ref после нажатия кнопки значение newName.

Наконец, вы должны увидеть «Нет падений тестов, поздравляем!» сообщение в консоли.

Реакция сообщества на Hooks

С того момента как представили React Hooks, сообщество было в восторге от этой фичи, и мы видели множество примеров и примеров использования React Hooks. Вот некоторые из основных:

• На этом сайте собрана коллекция React Hooks.
• react-use, библиотека, которая поставляется с кучей React Hooks.
• В этом примере на CodeSandbox показано, как использовать useEffect Hook для создания анимаций с помощью react-spring
• Пример использования useMutableReducer, который позволяет вам просто мутировать состояние, чтобы обновить его в редьюсере.
• Этот пример на CodeSandbox, который показывает сложное комплексное использования связи родитель-ребенок и использование редьсеров.
• Компонент переключения, построенный с помощью React Hooks
• Другая коллекция React Hooks, в которой есть hooks для входных значений, ориентации устройств и видимости документа.

Различные типы hooks

Существуют различные типы hooks, которые вы можете начать использовать в своем React приложении. Они перечислены ниже:

• useState  —  позволяет нам писать чистые функции с доступом к state в них.
• useEffect  —  позволяет нам выполнять side эффекты. Side эффектами могут быть вызовы API, обновление DOM, подписка на обработчики событий.
• useContext  -  позволяет писать в них чистые функции с контекстом.
• useReducer  —  дает нам ссылку на Redux-подобный редьюсер
• useRef  —  позволяет писать чистые функции, которые возвращают изменяемый объект ref.
• useMemo  -  используется для возврата сохраненного значения.
• useCallback —  Hook используется для возврата мемоизованного каллбека.
• useImperativeMethods  -  кастомизирует значение экземпляра, которое передается родительским компонентам при использовании ref.
• useMutationEffects  —  аналогичен useEffect Hook в том смысле, что он позволяет выполнять DOM-мутации.
• useLayoutEffect  -  используется для чтения макета из DOM и синхронного ре-рендеринга.
• Пользовательские hooks  -  позволяют писать компонентную логику в функции многократного использования.

Будущее hooks

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

Тем не менее, Hooks все еще являются экспериментальной функцией, и команда React неоднократно предупреждала, что API может быть изменен. Считайте что вы предупреждены.

Что означает для классов появление Hooks? Как сообщает команда React, классы все еще остаются, они являются огромной частью кодовой базы React и, скорее всего, будут еще какое-то время.

У нас нет планов осуждать классы. В Facebook у нас есть десятки тысяч компонентов, написанных классами, и, как и вы понимаете, мы не собираемся переписывать их. Но если сообщество React одобрит Hooks, нет смысла иметь два разных рекомендуемых способа записи компонентов —  Дэн Абрамов

Хотя конкретный API-интерфейс Hooks является экспериментальным сегодня, сообщество одобряет идею Hooks, поэтому я думаю, что они останутся с нами надолго.

Дополнительные ресурсы

• Команда React сделала замечательную работу по документированию React Hooks, подробнее можете ознакомиться здесь
• API из официальной документации здесь.
• Есть также постоянный RFC, поэтому вы можете отправиться туда, чтобы задавать вопросы или оставлять комментарии

UPD

Примечание преводчика:

Сегодня как вызнаете зарелизили версию React 16.8 официально поддерживающую Hooks API. В чейнджлоге указаны следующие несовместимые изменения с альфа-версией:

— удалены useMutationEffect.

— переименованы useImperativeMethods в useImperativeHandle.

— удалось избежать перерендера при передаче обязательных значений в useState и useReducer Hooks.

— не нужно проводить сравнение первого аргумента, переданного в useEffect/useMemo/useCallback Hooks.

— используйте Object.is алгоритм для сравнения значений useState и useReducer.

— компоненты рендерятся дважды в Strict Mode (DEV-only).

— улучшено lazy initialization API для useReducer Hook.

Подробнее можно почитать здесь.

React | Основы JSX

Основы JSX

Последнее обновление: 21.10.2017

JSX представляет способ описания визуального кода посредством комбинации кода на JavaScript и разметки XML. JSX является рекомендуемым способом создания интерфейса.

Так, в прошлой теме мы рассмотрели создание первого самого примитивного приложения, где использовался код JSX:

ReactDOM.render(
	<h2>Hello React</h2>,  // элемент, который мы хотим создать
	document.getElementById("app")    // где мы этот элемент хотим создать
)

В данном случае с помощью JSX определялся элемент h2, то есть заголовок.

Однако кроме того, JSX позволяет вводить в эти элементы код JavaScript. Например, определим следующую страницу:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello React</title>
</head>
<body>
    <div> </div>
     
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
    
   <script type="text/babel">
    ReactDOM.render(
        <h3>2 + 2 = {2 + 2}</h3>,
        document.getElementById("app")
    )
   </script>
</body>
</html>

С помощью фигурных скобок в код html можно вводить код на JavaScript, который затем выполняется, а на веб-станице мы увидим его результат:

В выражениях можно использовать и более сложные объекты:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello React</title>
</head>
<body>
    <div> </div>
     
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
    
   <script type="text/babel">
    const user = {
        id : 5,
        age: 33,
        firstName: 'Tom',
        lastName: 'Smit',
        getFullName: function(){ 
            return `${this.firstName} ${this.lastName}`;
        }
    };
    ReactDOM.render(
        <div id={user.id}>
            <p>Полное имя: {user.getFullName()}</p>
            <p>Возраст: {user.age}</p>
            <p>Время генерации данных: {new Date().toLocaleTimeString()}</p>
        </div>,
        document.getElementById("app")
    )
   </script>
</body>
</html>

Здесь в элемент вводятся значения из объекта user, либо также мы можем использовать встроенные объекты типа Date.

При работе с JSX следует учитывать ряд моментов, в частности, в JSX для установки класса применяется атрибут className, а не class.
Второй момент: атрибут style в качестве значения принимает объект javascript.
И третий момент: в JSX используется camel-case, то есть если мы хотим определить стилевое свойство для шрифта, например, свойство font-family,
то соответствующее свойство в объекте стиля будет называться fontFamily, то есть дефис отбрасывается, а следующая часть слова начинается с
заглавной буквы. Например:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello React</title>
    <style>
        .user-info{
            padding: 8px;
            border: 1px #ccc solid;
        }
    </style>
</head>
<body>
    <div> </div>
     
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
    
   <script type="text/babel">
    const user = {
        id : 5,
        age: 33,
        firstName: 'Tom',
        lastName: 'Smit',
        getFullName: function(){ 
            return `${this.firstName} ${this.lastName}`;
        }
    };
    const userClassName = "user-info";
    const styleObj = {
        color:'red', 
        fontFamily:'Verdana'
    };
    ReactDOM.render(
        <div className={userClassName}  style={styleObj}>
                <p>Полное имя: {user.getFullName()}</p>
                <p>Возраст: {user.age}</p>
        </div>,
        document.getElementById("app")
    )
   </script>
</body>
</html>

А если б мы определяли стиль inline, то это выглядело бы так:

<div className={userClassName}  style={{color:'red', fontFamily:'Verdana'}}>

Что такое React JS? Почему стартапы и предприятия любят React JS для фронтенд-разработки?

Реагировать, реагировать, реагировать! Сейчас это стало модным словом в сообществе разработчиков интерфейса. React JS стал синонимом фронтенд-разработки. Будь то стартап или предприятие; все стремятся к React для фронтенд-разработки.

Согласно опросу, проведенному Stack Overflow, React был самой любимой интерфейсной средой разработчиками во всем мире.

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

Что такое React JS?

React JS — это библиотека JavaScript, поддерживаемая Facebook и сообществом миллионов разработчиков. В основном он используется для разработки пользовательских интерфейсов веб-приложений и мобильных приложений. Он работает в аспекте Model View Controller или MVC.

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

Почему стартапы и предприятия любят React JS (10 основных причин)?

# 1 Virtual DOM

Virtual DOM — это современное чудо для бизнеса.Это помогает вам создать кэш-память структуры данных в блоке памяти, что позволяет более эффективно обновлять DOM браузера.

# 2 Скорость разработки

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

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

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

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

# 3 Стабильность

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

Благодаря поддержке миллионов разработчиков и предприятий, таких как Facebook и Instagram, шансы на то, что он устареет, ничтожны.React JS остается стабильной технологией даже перед лицом растущей конкуренции, такой как Vue JS и Angular JS.

# 4 Интерактивный интерфейс

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

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

# 5 Advance Performance

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

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

# 6 Простота использования

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

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

Хотя React JS прост в использовании, он обладает всеми функциями и возможностями продвинутого уровня, которые могут помочь профессиональным разработчикам создавать потрясающие веб-страницы.

# 7 Альтернативы

Будучи библиотекой с открытым исходным кодом, React JS действует как камень, который может убить двух зайцев одновременно.

Разработчики могут использовать React JS как базовую библиотеку, а также как альтернативу другим библиотекам, таким как Angular, Backbone, jQuery и другим.Расширения React JS включают в себя все функции, доступные в этих библиотеках.

Более того, эти расширения дополнены широким спектром других функций, упрощений, дополнений и полезных изменений, которые были реализованы в React.

# 8 Гибкая разработка

Компании восприняли появление React JS как должное. Они думали, что это просто еще одна библиотека, которая внесет свой вклад в упрощение веб-разработки.

Но правда в том, что React не просто упрощает веб-разработку.Это помогло многим разработчикам снизить некоторые ограничения, мешавшие процессу веб-разработки.

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

# 9 SEO-Friendly

За исключением предприятий и стартапов в монопольном бизнесе, каждая компания требует проводить SEO на своих сайтах. Они должны занимать более высокие позиции в поисковых системах. Используя Node JS, React может легко отображать на серверах.

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

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

React JS был опробован и протестирован несколькими организациями по всему миру для создания высококачественного и надежного интерфейса и оптимизации сайта для SEO.

# 10 Доступ к разработчикам

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

Следовательно, вам будет проще найти разработчика React JS. Более того, с React JS проще обучить разработчика, который имеет базовые знания JavaScript и интерфейсной разработки.

Заключительные мысли

Совершенно очевидно, что React JS — это ваш путь для фронтенд-разработки. Начиная с поиска подходящего разработчика и заканчивая обслуживанием и развертыванием приложения, React JS обеспечивает безупречный опыт для бизнеса.

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

Часто задаваемые вопросы о том, что такое React JS

В: 1 — React JS — это интерфейс или серверная среда?

Ans : React JS — это интерфейсный фреймворк, созданный Facebook. Как и любой другой интерфейсный фреймворк, он может работать с большинством бэкендов, включая Rails, PHP, Node.js и т. Д., И может обслуживаться через любой веб-сервер, такой как NGINX, Apache и т. Д.

Q: 2 — Почему React лучше?

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

Q: 3 — Каковы преимущества использования React JS?

Ans : Есть много преимуществ использования React JS, и мы перечислили ключевые преимущества ниже:

• Гарантирует стабильный код
• SEO-оптимизирован
• Обеспечивает более быстрый рендеринг
• Повышает продуктивность разработчиков
• Полезный разработчик toolset
• И так далее…

Q: 4 — Кто использует React JS?

Ans : React JS создается и поддерживается Facebook, и сегодня его используют 8183 компании по всему миру, среди которых много известных компаний, таких как Uber, Airbnb, Netflix, Twitter и т. Д.

.

Learn LifeCycle, Components, JSX с примером

• Home

• Testing

  • • Back
    • Agile Testing
    • BugZilla
    • Cucumber
    • 000 9000 JS 9000 Testing 9000 9000 9000 JS 9000 9000 Testing 9000
      • Назад
      • JUnit
      • LoadRunner
      • Ручное тестирование
      • Мобильное тестирование
      • Mantis
      • Почтальон
      • QTP
      • Назад
      • 00050005000500050005

      000 RPM

      SoapUI

      • Управление тестированием
      • TestLink

  • SAP

    • • Назад
      • ABAP
      • APO
      • Начинающий
      • Basis
      • BODS
      • BI
      • BPC
      • CO
      • Назад
      • CRM
      • Crystal Reports
      • MM5000
      • Crystal Reports
      • Заработная плата
      • Назад
      • PI / PO
      • PP
      • SD
      • SAPUI5
      • Безопасность
      • Менеджер решений
      • Successfactors
      • SAP Tutorials
    • 8 SAP Tutorials
  • 8
  • Apache
  • AngularJS
  • ASP.Net
  • C
  • C #
  • C ++
  • CodeIgniter
  • СУБД
  • JavaScript
  • Назад
  • Java
  • JSP
  • Kotlin
  • Linux
  • Linux
  • Kotlin
  • Linux

  js

  • Perl
  • Назад
  • PHP
  • PL / SQL
  • PostgreSQL
  • Python
  • ReactJS
  • Ruby & Rails
  • Scala
  • SQL

  000

  0004 SQL

  • UML
  • VB.Net
  • VBScript
  • Веб-службы
  • WPF