Уроки 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 react-select@1.0.0-beta13 –s
Обязательно следите за версиями Ваших компонентов, NPM’a и.т.д. т.к. с этим возникает довольно много проблем.
Для начала давайте создадим директорию components и переместим
туда наши компоненты.
В файле app.js изменим путь на следующий:
1 | import ArticleList from './components/ArticleList' |
ArticleList.js:
1 | import oneOpen from '../decorators/oneOpen |
ArticleListOld.js:
1 | import oneOpen from '../mixins/oneOpen' |
ArticleOld.js:
1 | import toggleOpen from '../mixins/toggleOpen' |
Давайте сверху над нашими компонентами установим этот ‘Select’ в котором мы будем показывать title наших статей. Зайдем в ArticleList.js и сделаем import:
1 | import Select from 'react-select' |
Теперь нужно передать сюда какие-то параметры. Зачастую если у Вас хорошо документированный компонент. Вы сможете найти в документации к нему. Обратите внимания что на Github в библиотеке файлов для модулей в папке src, к примеру можно найти наш ‘Select’ и в коде найти propTypes где описаны функции этой библиотеки/модуля.
Для того чтобы отображать список наших title пишем:
1 2 3 4 | const options = articles.map((article) => ({ label: article.title, value: article.id })) |
options это массив объектов. Каждую статью превратим в объект типа: label: article.title, так будет отображаться в нашем ‘Select’. Value это уже будет уникальная вещь в нашей бизнес-логике для нее выберем конечно же id. Сейчас это выглядит довольно плохо, т.к. не содержит стилей и.т.п. Но чем хороши сторонние модули , так это тем, что это готовые решения где все это есть. Если у них есть хорошая документация то там все прописано, как в нашем случае:
1 | import 'react-select/dist/react-select.css'; |
Но если их нет, есть другой способ. Ранее мы говорили о WebPack, он может работать не только со скриптами а с картинками, стилями и.т.п. Давайте посмотрим как это делается с помощью WebPack. Для этого нам нужно установить css-loader, style-loader:
npm install css-loader style-loader –SD
и подключить это к WebPack в файле webpack.config.js добавим:
1 | loader: 'style-loader!css-loader' |
Теперь для того, чтобы сделать импорт нашего css пойдем в ArticleList и напишем:
1 | import 'react-select/dist/react-select.css' |
Теперь все выглядит отлично. Следующим шагом будет сделать так чтобы наш компонент хранил состояния. Это очень распространенный паттерн в React когда мы храним состояние в каком то родительском компоненте и передаем его как props в дочерний. Все храниться не в ‘Select’ а в AtricleList. Так будет выглядеть наш обновленный ArticleList, после будут даны комментарии:
1 2 3 4 5 6 7 | 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 }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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}
1 2 3 4 5 6 7 | /> <ul> {listItems} </ul> </div> ) } |
handleSelectChange = (selectedArticles) => { console.log(selectedArticles) this.setState({ selectedArticles
1 2 3 4 5 | }) } } export default oneOpen(ArticleList) |
Опишем состояние (state) нашего ‘Select’ – null. Добавим value, Onchange. Т.е. при выборе item в ‘Select’ , будет передаваться объект, видно здесь:
1 | console.log(selectedArticles) |
Нужно будет изменить ‘Select’ родительского компонента чтобы он уже перестроился уже с новым state selected и передавал уже новый value.
1 2 | this.setState({ selectedArticles |
Добавим опцию multi, включиться multi-select.
Главный совет заключается в том чтобы пользоваться готовым кодом, используя проверенные решения, так как такие задачи по функционалу довольно тривиальны (multi-select), но занимают очень много времени при реализации собственными силами. Теперь Вы научились подключать готовые решения в React. Нас предстоит еще много чего интересного сделать, до скорой встречи, Stay Tuned!
Код уроков можно найти в нашем репозитории.
We are looking forward to meeting you on our website soshace.com
No comments yet