Уроки React. Урок 5.

Для того чтобы проверить нашу структуру следует пользоваться React dev tools. Скачать их можно здесь. Позволяет нам наблюдать всю структуру Вашего Virual DOM, Ваших компонентов и сторонние компоненты. Также здесь есть доступ к данным, можно посмотреть их Props,State и.т.п. Ставиться оно как расширение для вашего браузера и будет доступна при вызове инструментов разработчика. Для начала работы с React либо с новым проектом это очень полезно. Здесь видны названия ваших компонентов, например OneOpen, ArticleList, CommentList и др.
Допустим если не называть class OneOpen то в DevTools будет непонятно какой код отвечает за работу компонента к примеру, а вот называя его вы облегчаете себе дальнейший Debug.

На этом моменте мы закончили разбираться с базовым API React, с тем как у нас происходит построение простых компонентов, логикой их работы, принципами передачи данных (сверху-вниз), с тем как мы можем изменять состояние наших компонентов и тем как это влияет на Virtual DOM, и с тем как он перестраивается. Однако в реальной жизни когда говорят о React имеют ввиду не просто библиотеку для view, предполагают целую инфраструктуру. И к примеру на собеседовании на позицию React разработчика будут задавать вопросы по инфраструктуре вокруг React и опыте работы с ней. С какими сторонними компонентами Вы работаете, какие декораторы Вы переиспользуете (в NPM множество доступных для установки decorators к примеру).  Возьмем к примеру ReactRouter , систему построения бизнес-логики, Flux, Redux, Relay и.т.п.

React очень располагает чтобы переиспользовать компоненты, вообще вся идея в том чтобы собирать приложения из компонентов находящихся в OpenSource. К примеру хорошим для этого  ресурсом является react.rocks. Сегодня разберем как подключать сторонние компоненты на примере react-select . React-select это combobox он имеет достаточно широкий функционал для повседневных задач.

Для того чтобы его поставить вводим в нашей console:

npm i [email protected] –s

Обязательно следите за версиями Ваших компонентов, NPM’a и.т.д. т.к. с этим возникает довольно много проблем.

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

В файле app.js изменим путь на следующий:

import ArticleList from './components/ArticleList'

ArticleList.js:

import oneOpen from '../decorators/oneOpen

ArticleListOld.js:

import oneOpen from '../mixins/oneOpen'

ArticleOld.js:

import toggleOpen from '../mixins/toggleOpen'

Давайте сверху над нашими компонентами установим этот ‘Select’ в котором мы будем показывать title наших статей. Зайдем в ArticleList.js и сделаем import:

import Select from 'react-select'

Теперь нужно передать сюда какие-то параметры. Зачастую если у Вас хорошо документированный компонент. Вы сможете найти в документации к нему. Обратите внимания что на Github в библиотеке файлов для модулей в папке src, к примеру можно найти наш ‘Select’ и в коде найти propTypes где описаны функции этой библиотеки/модуля.

Для того чтобы отображать список наших title пишем:

const options = articles.map((article) => ({
            label: article.title,
            value: article.id
        }))

options это массив объектов. Каждую статью превратим в объект типа: label: article.title, так будет отображаться в нашем ‘Select’. Value это уже будет уникальная вещь в нашей бизнес-логике для нее выберем конечно же id. Сейчас это выглядит довольно плохо, т.к. не содержит стилей и.т.п. Но чем хороши сторонние модули , так это тем, что это готовые решения где все это есть. Если у них есть хорошая документация то там все прописано, как в нашем случае:

import 'react-select/dist/react-select.css';

Но если их нет, есть другой способ. Ранее мы говорили о WebPack, он может работать не только со скриптами а с картинками, стилями и.т.п. Давайте посмотрим как это делается с помощью WebPack. Для этого нам нужно установить css-loader, style-loader:

npm install css-loader style-loader –SD

и подключить это к WebPack в файле webpack.config.js добавим:

loader: 'style-loader!css-loader'

Теперь для того, чтобы сделать импорт нашего css пойдем в ArticleList и напишем:

import 'react-select/dist/react-select.css'

Теперь все выглядит отлично. Следующим шагом будет сделать так чтобы наш компонент хранил состояния. Это очень распространенный паттерн в React когда мы храним состояние в каком то родительском компоненте и передаем его как props в дочерний. Все храниться не в ‘Select’ а в AtricleList. Так будет выглядеть наш обновленный ArticleList, после будут даны комментарии:

import React, { Component }  from 'react'
import Article from './Article/index'
import oneOpen from '../decorators/oneOpen'
import Select from 'react-select'
import 'react-select/dist/react-select.css'

class ArticleList extends Component {

state = { selectedArticles: null }

    render() {
        const { articles, isItemOpen, toggleOpenItem } = this.props

        const listItems = articles.map((article) => <li key={article.id}>
            <Article article = {article}
                isOpen = {isItemOpen(article.id)}
                openArticle = {toggleOpenItem(article.id)}
            />
        </li>)

        const options = articles.map((article) => ({
            label: article.title,
            value: article.id
        }))
        return (
            <div>
                <h1>Article list</h1>
                <Select
                    options = {options}

multi = {true} value = {this.state.selectedArticles} onChange = {this.handleSelectChange}

                />
                <ul>
                    {listItems}
                </ul>
            </div>
        )
    }

handleSelectChange = (selectedArticles) => { console.log(selectedArticles) this.setState({ selectedArticles

        })
    }
}

export default oneOpen(ArticleList)

Опишем состояние (state) нашего ‘Select’ – null. Добавим value, Onchange. Т.е. при выборе item в ‘Select’ , будет передаваться объект, видно здесь:

console.log(selectedArticles)

Нужно будет изменить ‘Select’ родительского компонента чтобы он уже перестроился уже с новым state selected и передавал уже новый value.

 this.setState({
            selectedArticles

Добавим опцию multi, включиться multi-select.

Главный совет заключается в том чтобы пользоваться готовым кодом, используя проверенные решения, так как такие задачи по функционалу довольно тривиальны (multi-select), но занимают очень много времени при реализации собственными силами. Теперь Вы научились подключать готовые решения в React. Нас предстоит еще много чего интересного сделать, до скорой встречи, Stay Tuned!

Код уроков можно найти в нашем репозитории.

We are looking forward to meeting you on our website soshace.com