SIGN IN

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

React-Lessons.-Lesson-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 изменим путь на следующий:

ArticleList.js:

ArticleListOld.js:

ArticleOld.js:

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

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

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

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

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

npm install css-loader style-loader –SD

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

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

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

state = { selectedArticles: null }

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

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

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

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

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

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

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

StayTuned_Type

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

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter correct name
Please enter correct email
Looks good!

Related articles

Уроки Express.js . Логгер, Конфигурация, Шаблонизация с EJS. Часть 2.

Favicon – это все connect Middleware, он смотрит, если url имеет вид favicon.ico, то он читает favicon и>>>

Programming

3. Уроки Express.js. Шаблонизация с EJS: Layout, Block, Partials

В реальной жизни у нас обычно больше, чем один шаблон. Более того, если уж так>>>

Programming
24.11.2016

Уроки Express.js. Основы и Middleware. Часть 2.

Всем привет! Давайте продолжим наш урок об основах Express и Middleware. Итог (добавим в>>>

Programming

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy