react - podsumowanie z placu boju
TRANSCRIPT
![Page 1: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/1.jpg)
ReactPodsumowanie z placu boju
![Page 2: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/2.jpg)
TOC1.React - TL;DR2.Część właściwa3.Krótko o
narzędziach
![Page 3: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/3.jpg)
ReactTL;DR
![Page 4: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/4.jpg)
<MeetJS when="03.10.2016"/>
![Page 5: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/5.jpg)
<div> <h1>Meet.js</h1> <time>03.10.2016</time></div>
![Page 6: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/6.jpg)
const MeetJS = props => ( <div> <h1>Meet.js</h1> <time>{props.when}</time> </div>);
![Page 7: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/7.jpg)
class MeetJS extends React.Component { render() { return ( <div> <h1>Meet.js</h1> <time>{this.props.when}</time> </div> ); }}
![Page 8: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/8.jpg)
const MeetJS = props => ( <div> <h1>Meet.js</h1> <time>{props.when}</time> <button onClick={() => this.setState({ started: true, })}> Lets start! </button> {this.state.started && <BeerBooth/>} </div>);
![Page 9: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/9.jpg)
const MeetJS = props => ( <div> <h1>Meet.js</h1> <AtendeesList attendees={props.attendees}/> </div>);
![Page 10: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/10.jpg)
Pytania?
![Page 11: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/11.jpg)
Krótko o mnieW trzech memach
![Page 12: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/12.jpg)
![Page 13: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/13.jpg)
![Page 14: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/14.jpg)
![Page 15: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/15.jpg)
ReactPodsumowanie z placu boju
![Page 16: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/16.jpg)
Komponenty są jak klasy
![Page 17: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/17.jpg)
Properties === methods
![Page 18: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/18.jpg)
<MeetJS when="03.10.2016"/>
![Page 19: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/19.jpg)
new MeetJS() .setWhen('03.10.2016') .render();
![Page 20: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/20.jpg)
Properties === API
![Page 21: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/21.jpg)
<MeetJS ticketPrice={daysLeft => 0}/>
![Page 22: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/22.jpg)
<div> <h1>Meet.js</h1> <BeerBooth onEmpty={() => this.panic() }/></div>
![Page 23: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/23.jpg)
SRP głupcze!
![Page 24: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/24.jpg)
Blob componentPo czym poznać?
![Page 25: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/25.jpg)
Ilość kodu!
![Page 26: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/26.jpg)
Za dużo właściwości
![Page 27: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/27.jpg)
static propTypes = { id: PropTypes.string, label: PropTypes.string, changeHandler: PropTypes.func, checked: PropTypes.bool, wrapper: PropTypes.string, labelClass: PropTypes.string, type: PropTypes.string, setValue: PropTypes.func, getValue: PropTypes.func, resetValue: PropTypes.func, touched: PropTypes.bool, error: PropTypes.string, name: PropTypes.string, showError: PropTypes.func, onChange: PropTypes.func, preventHover: PropTypes.bool, onMouseOut: PropTypes.func,};
![Page 28: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/28.jpg)
Za dużo stanów
![Page 29: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/29.jpg)
this.state = { show: false, enableEdit: false, enableRemoveDropdown: false, enableDueDateDropdown: false, itemTitle: props.item.title, canCreate: true, canBeHidden: true, temporaryDueDate: undefined, temporaryAssigneeId: undefined, discardModalOpened: false, locked: false, wasUnchecked: false,};
![Page 30: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/30.jpg)
… za dużo className
![Page 31: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/31.jpg)
const todoListClass: string = cx({ 'todo-list-item__inline': true, 'todo-list-item__inline--hover': this.state.show, 'todo-list-item__inline--active': this.state.enableEdit, 'todo-list-item__inline--loading': this.state.locked || item.notSaved, 'todo-list-item__inline--hidden': this.props.item.hidden, 'todo-list-item__inline--edit': this.isDrawerOpened(), 'todo-list-item__inline--updated': item.state.updated, 'todo-list-item__inline--updated-comment': item.state.firstUnreadCommentId,});
const dragClass: string = cx({ 'todo-list-item__drag': true, 'todo-list-item__drag--hover': this.state.show && !this.state.enableEdit,});
const editControlsClass: string = cx({ 'todo-list-item__edit__controls': true, 'todo-list-item__edit__controls--active': this.state.show,});
const editClass: string = cx({ 'todo-list-item__edit': true, 'todo-list-item__edit--hover': this.state.show, 'todo-list-item__edit--active': this.state.enableEdit,});
const editTodoButtonClass: string = cx({ 'todo-list-item__edit__toggle': true, 'todo-list-item__edit__toggle--hide': this.state.enableEdit,});
const saveTodoButtonClass: string = cx({ 'todo-list-item__add': true, 'todo-list-item__add--active': this.state.enableEdit, 'todo-list-item__add--disabled': !this.state.canCreate,});
const discardButtonClass: string = cx({ 'todo-list-item__discard': true, 'todo-list-item__discard--show': this.state.enableEdit,});
const todoItemInfoClass: string = cx({ 'todo-list-item__info': true, 'todo-list-item__info--hide': this.state.enableEdit,});
const editTodoInputClass: string = cx({ 'todo-list-item__edit__input': true, 'todo-list-item__edit__input--active': this.state.enableEdit,});
const todoItemEditDescriptionClass: string = cx({ 'todo-list-item__edit__description': true, 'todo-list-item__edit__description--show': this.state.enableEdit,});
const removeTodoClass: string = cx({ 'todo-list-item__remove': true, 'todo-list-item__remove--edit': this.state.enableEdit,});
const toggleDropdownClass: string = cx({ 'todo-list-item__remove__dropdown': true, 'todo-list-item__remove__dropdown--show': this.state.enableRemoveDropdown,});
![Page 32: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/32.jpg)
Jedyne rozwiązanie
![Page 33: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/33.jpg)
![Page 34: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/34.jpg)
Komunikacja między komponentami
![Page 35: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/35.jpg)
Top to bottomParent > child
![Page 36: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/36.jpg)
const MeetJS = props => ( <div> <BeerBooth opened={props.when > new Date()} /> <Attendees list={props.attendess} /> </div>);
![Page 37: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/37.jpg)
FTW!
![Page 38: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/38.jpg)
Context
![Page 39: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/39.jpg)
class BeerBooth extends React.Component { static contextTypes = { opened: React.PropTypes.bool, };
render() { return ( <div> <h1>Beer!</h1> <h2>{this.context.opened ? 'Opened!' : 'Closed'}</h2> </div> ); }}
![Page 40: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/40.jpg)
class MeetJS extends React.Component { static childContextTypes = { opened: React.PropTypes.bool, };
getChildContext() { return { opened: this.props.when > new Date(), }; }
render() { return ( <div>{/* ... */}</div> ); }}
![Page 41: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/41.jpg)
Referencje
![Page 42: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/42.jpg)
class MeetJS extends React.Component { componentDidMount() { if (this.props.when > new Date()) { this.beer.open(); // this.beer.setState({opened: true}); } }
render() { return ( <div> <BeerBooth ref={el => { this.beer = el; }}/> </div> ); }}
![Page 43: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/43.jpg)
Bottom to topChild > parent
![Page 44: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/44.jpg)
Właściwości jako eventy
![Page 45: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/45.jpg)
const MeetJS = props => ( <div> <h1>Meet.js</h1> <BeerBooth onEmpty={() => this.setState({ closed: true, })}/> </div>);
![Page 46: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/46.jpg)
Referencje
![Page 47: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/47.jpg)
const MeetJS = props => ( <div> <h1>Meet.js</h1> <BeerBooth partyHost={this}/> </div>);
![Page 48: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/48.jpg)
STAHP
![Page 49: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/49.jpg)
Context
![Page 50: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/50.jpg)
class MeetJS extends React.Component { static childContextTypes = { endParty: React.PropTypes.func, };
getChildContext() { return { endParty: () => this.setState({ closed: true, }), }; }
render() { return ( <div>{/* ... */}</div> ); }}
![Page 51: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/51.jpg)
Komunikacja dwustronnaTaki pomysł
![Page 52: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/52.jpg)
Context + event emitter
![Page 53: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/53.jpg)
FLUX głupcze!
![Page 54: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/54.jpg)
Unidirectional data flow
![Page 55: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/55.jpg)
High Order Components
![Page 56: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/56.jpg)
… komplikują korzystanie z referencji
![Page 57: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/57.jpg)
… uniemożliwiają korzystanie z shallow
render
![Page 58: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/58.jpg)
Trochę o testowaniu
![Page 59: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/59.jpg)
Shallow renderof <MeetJS/>
![Page 60: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/60.jpg)
<div> <h1>Meet.js</h1> <BeerBooth/></div>
![Page 61: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/61.jpg)
Full renderof <MeetJS/>
![Page 62: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/62.jpg)
<div> <h1>Meet.js</h1> <div class="beer-booth"> <div id="theGuy">•|龴 龴◡ |•</div> <ul class="beer-booth--kegs-list"> <li>Beer keg #1</li> <li>Beer keg #2</li> <li>Beer keg #3</li> </ul> </div></div>
![Page 63: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/63.jpg)
Testy jednostkowe to nie testy integracyjne
Shallow render != full render
![Page 64: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/64.jpg)
Unit test powinien korzystać z shallow
render
![Page 65: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/65.jpg)
Full render zostawmy dla testów e2e
![Page 66: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/66.jpg)
Unit testy powinny być szybkie
Szanuj swój czas :)
![Page 67: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/67.jpg)
Rozdziel testyUnit test / e2e
![Page 68: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/68.jpg)
Natywne narzędzia mogą nie wystarczać
![Page 69: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/69.jpg)
Szybko o narzędziach
![Page 70: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/70.jpg)
Hot Module ReloadFTW
![Page 71: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/71.jpg)
Eslint… skąd u niego taka spina?
![Page 72: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/72.jpg)
Mocha > Karma
![Page 73: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/73.jpg)
Pytania?
![Page 74: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/74.jpg)
fb:twt:gh:
radoslaw.mejer_radmenradmen
![Page 76: React - podsumowanie z placu boju](https://reader036.vdocuments.net/reader036/viewer/2022062412/58867b3d1a28ab962a8b5aff/html5/thumbnails/76.jpg)
Dzięki!