React библиотеки
Занятие 6
25 Mar 2017
Профессия
Node.js & React.js developer
продвинутый курс
1
Библиотеки
1
Icons
images
sprites
icon fonts
svg
+ react
1
react-icons
для чего они нужны?
1. Библиотека с иконками
2. Инструменты сборки иконок
3. В Prod грузятся только используемые иконки
1
react-icons
какие вообще есть иконки
- Material Design Icons by Google https://www.google.com/design/icons/
- Font Awesome by Dave Gandy - http://fontawesome.io
- Typicons by Stephen Hutchings - http://typicons.com
- Github Octicons icons by Github https://octicons.github.com/
- Ionicons by Ionic Framework - http://ionicons.com
- Material Design Icons (1000+) - https://materialdesignicons.com/
1
UI Frameworks
для чего они нужны?
1
Bootstrap
1
Bootstrap
1
React UI Frameworks
1
Ant Design
- China vendor
- 11800 stars, 2300 forks
- Продуманный API
- TypeScript
- IE9, SSR, Eelctron
- ant-design-mobile: React Native
- babel-plugin-import
1
Ant Design
1
Reactstrap
- 1200 stars, 123 forks
- Хороший HOC API
- Bootstrap 4
- Испытывает баги с подключенным BS3
1
react-bootstrap
- 9200 stars, 1550 forks
- Хорошая внутренняя структура компонентов
- Bootstrap 3 (108k/50k)
- Стабильный*
1
react-bootstrap
как пользоваться
Вставляем код, не забываем сделать import
1
react-bootstrap
лайфхак для Cards
Bootstrap 4 card component, back-ported for Bootstrap 3, SASS
github.com/martinbean/bootstrap-3-card
npmjs.com/package/bootstrap-3-card
Reactstrap Card components
import { wrap } from 'react-bootstrap-card';
wrap(require('react-bootstrap'));
////
import {
Grid,
Row,
Col,
Button,
Card,
CardBlock,
CardFooter,
} from 'react-bootstrap';1
Clipboard
react-copy-to-clipboard
1
Media Queries
react-responsive
<!-- >= IE6 * -->
<MediaQuery query='(min-device-width: 1224px)'>
<div>You are a desktop or laptop</div>
<MediaQuery query='(min-device-width: 1824px)'>
<div>You also have a huge screen</div>
</MediaQuery>
<MediaQuery query='(max-width: 1224px)'>
<div>You are sized like a tablet or mobile phone though</div>
</MediaQuery>
</MediaQuery> 1
Google Maps
react-google-maps
// Under development for v6.0.0
<GoogleMap
ref={props.onMapLoad}
defaultZoom={3}
defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
onClick={props.onMapClick}
>
{props.markers.map((marker, index) => (
<Marker
{...marker}
onRightClick={() => props.onMarkerRightClick(index)}
/>
))}
</GoogleMap>
1
react-bootstrap-table
1
react-select
1
react-slick
var settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<Slider {...settings}>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</Slider>
);1
react-stars
<ReactStars
count={5},
onChange={ratingChanged},
size={24},
color2={'#ffd700'} />1
react-textarea-autosize
1
react-images
<Lightbox
images={[{ src: 'http://example.com/img1.jpg' }, { src: 'http://example.com/img2.jpg' }]}
isOpen={this.state.lightboxIsOpen}
onClickPrev={this.gotoPrevious}
onClickNext={this.gotoNext}
onClose={this.closeLightbox}
/>1
visibility
<VisibilitySensor onChange={onChange} />
<TrackVisibility>
<ComponentToTrack />
</TrackVisibility>1
Image fallback
<Img
src="my-image.png"
fallbackImage="my-backup.png"
initialImage="loader.gif"
alt="cool image should be here"
className="my-image" />1
Cookies
react-cookie
GET /spec.html HTTP/1.1
Host: www.example.org
Cookie: theme=light; sessionToken=abc123
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: theme=light
Set-Cookie: sessionToken=abc123; Expires=Wed, 09 Jun 2021 10:18:14 GMT
export default class MyApp {
onLogin(userId) {
cookie.save('userId', userId, { path: '/' });
}
onLogout() {
cookie.remove('userId', { path: '/' });
}
}1
react-codemirror
1
react-toaster
1
А также
2
Своя библиотека
2
Публикация
- npm init
- writing code
- create account in npmjs.com
- npm login
- npm publish
2
Semantic versioning
semver
2
Semantic versioning
semver
2
Semantic versioning
semver
2
Semantic versioning
semver
2
Структура библиотеки
2
Package.json
2
Package.json
2
Package.json
#npm run build
rm -rf dist &&
mkdir dist &&
cp {package.json,yarn.lock,README.md} dist/ &&
babel src --out-dir dist --source-maps inline --copy-files
2
NPM LINK
cd lsk-example2
yarn install
yarn run dev
yarn link lsk-general
# hot reload
yarn add lsk-general@1.2.3
cd lsk-general
yarn link
yarn run dev
# fix bug + save
# hot reload
# package.json version++ (1.2.3)
yarn run release2
Babel-starter-kit
for libs
3
Про практику
3
- Список всех задач в Trello
- Выполняйте задачи к дедлайнам
- Я буду проверять задачи после дедлайна
- На ваших примерах буду делать CodeReview
- Возможно даже раньше - чем раньше, тем выше шанс
- Если возникают вопросы по задаче
- Напишите в телеграм чат
- Напишите в трелло
- Напишите мне
- Если не можете решить задачу и не можете сформулировать вопрос - пишите "Непонятно" в Трелло
- Индивидуальные задачи будут пополняться
Про практику
3
- Делимся на 4+ команды
- Выбираем лидеров (1,2,3)
- Выбираем время еженедельного созвона
- Решаем Задачу 0.
- Ожидаем командные задачи **
- Внутри команды
- Понять сильные и слабые стороны
- Я - волшебная сила (не вмешиваюсь, но напрвляю)
- Сигнализировать мне о проблемах и успехах
Про практику
Игорь Суворов
Thanks!
any questions?
программист-предприниматель