�ݺ�ߣ

React
Podsumowanie z placu boju

TOC
1.React - TL;DR
2.Cz??? w?a?ciwa
3.Kr��tko o narz?dziach

const MeetJS = props => (
<div>
<h1>Meet.js</h1>
<time>{props.when}</time>
</div>
);

class MeetJS extends React.Component
{
render() {
return (
<div>
<h1>Meet.js</h1>
<time>{this.props.when}</time>
</div>
);
}
}

<div>
<h1>Meet.js</h1>
<time>{props.when}</time>
<button onClick={() => this.setState({
started: true,
})}>
Lets start!
</button>
{this.state.started && <BeerBooth/>}
</div>
);

<div>
<h1>Meet.js</h1>
<AtendeesList
attendees={props.attendees}/>
</div>
);

Kr��tko o mnie
W trzech memach

React - podsumowanie z placu boju

new MeetJS()
.setWhen('03.10.2016')
.render();

<div>
<h1>Meet.js</h1>
<BeerBooth onEmpty={() =>
this.panic()
}/>
</div>

Blob component
Po czym pozna??

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,
};

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,
};

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,
});

Komunikacja mi?dzy
komponentami

<div>
<BeerBooth
opened={props.when > new Date()} />
<Attendees list={props.attendess} />
</div>
);

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>
);
}
}

class MeetJS extends React.Component {
static childContextTypes = {
opened: React.PropTypes.bool,
};
getChildContext() {
return {
opened: this.props.when > new Date(),
};
}
render() {
return (
<div>{/* ... */}</div>
);
}
}

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>
);
}
}

<div>
<h1>Meet.js</h1>
<BeerBooth
onEmpty={() => this.setState({
closed: true,
})}/>
</div>
);

<div>
<h1>Meet.js</h1>
<BeerBooth
partyHost={this}/>
</div>
);

static childContextTypes = {
endParty: React.PropTypes.func,
};
getChildContext() {
return {
endParty: () => this.setState({
closed: true,
}),
};
}
render() {
return (
<div>{/* ... */}</div>
);
}
}

Komunikacja dwustronna
Taki pomys?

�� komplikuj? korzystanie z
referencji

�� uniemo?liwiaj?
korzystanie z shallow
render

Testy jednostkowe to nie
testy integracyjne
Shallow render != full render

Unit test powinien korzysta?
z shallow render

Full render zostawmy dla
test��w e2e

Unit testy powinny by?
szybkie
Szanuj sw��j czas :)

Rozdziel testy
Unit test / e2e

Natywne narz?dzia mog?
nie wystarcza?

Eslint
�� sk?d u niego taka spina?

fb:
twt:
gh:
radoslaw.mejer
_radmen
radmen

�ݺ�ߣ

React - podsumowanie z placu boju

More Related Content

React - podsumowanie z placu boju