Prezentacja z React.js Warsaw #1

1. WITAMY!
WARSAW REACT.JS #1

2. REACT.JS WARSAW #1
AGENDA
▸ Przywitanie sponsora - ASTEK Polska
▸ React.js - Wprowadzenie - Marcin Mieszek
▸ Flux - intro i przykłady wykorzystania - Damian Legawiec
▸ Losowanie nagrody
▸ W trakcie:

3. REACT.JS - WPROWADZENIE
WARSAW REACT.JS #1
MARCIN MIESZEK
MARCIN.MIESZEK@GMAIL.COM

4. REACT.JS WARSAW #1
AGENDA
▸ Czym jest React.js?
▸ Tworzenie komponentów
▸ Warsztaty

5. REACT.JS WARSAW #1
CZYM JEST REACT.JS?
▸ Deklaratywne komponenty
▸ Virtual DOM
▸ JSX
▸ Jednokierunkowy przepływ danych

6. REACT.JS WARSAW #1
{name: 'Zaprosić uczestników'},
{name: 'Kupić piwo'},
{name: 'Przygotować prezentację'}
<table>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Zaprosić uczestników</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Kupić piwo</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Przygotować prezentację</td>
</tr>
</tbody>
</table>
{name: 'Przywitać gości'}

7. REACT.JS WARSAW #1
$("button").click(function(){
$("<tr>" +
"<td><input type='checkbox'></td>" +
"<td>Przywitać gości</td>" +
"</tr>").appendTo("tbody");
});
<tr ng-repeat="task in tasks">
<td><input type='checkbox'></td>
<td>{{task.name}}</td>
</tr>

8. REACT.JS WARSAW #1
DEKLARATYWNE KOMPONENTY
var Tasks = React.createClass({
render: function () {
return (
<table>
<tbody>
{this.props.tasks.map(function (task) {
return (
<tr>
<td><input type="checkbox"/></td>
<td>{task.name}</td>
</tr>
)
})}
</tbody>
</table>
)
}
})
ReactDOM.render(<Tasks tasks={tasks}/>, document.getElementById('app'))

9. REACT.JS WARSAW #1
JSX
<p class="lead">Hello, world!</p>
React.createElement('p',
{className: 'lead'},
['Hello, world!’]
)
<table>
<tbody>
{this.props.tasks.map(function (task) {
return (
<tr>
<td><input type="checkbox"/></td>
<td>{task.name}</td>
</tr>
)
})}
</tbody>
</table>
React.createElement("table", null,
React.createElement("tbody", null,
this.props.tasks.map(function (task) {
return (
React.createElement("tr", null,
React.createElement("td", null,
React.createElement("input", {type:
"checkbox"})),
React.createElement("td", null, task.name)
)
)
})
)
)

10. REACT.JS WARSAW #1
JSX
<table>
<tbody>
{this.state.tasks.map(function (task,) {
return (
<Task task={task}/>
)
}}
var Task = React.createClass({
render: function () {
return (
<tr>
<td><input type="checkbox"/></td>
<td>{this.props.task.name}</td>
</tr>
)
}
})

11. REACT.JS WARSAW #1
VIRTUAL DOM
▸ Operacje na DOM są kosztowne
▸ Celem jest aktualizacja tylko zmienionych elementów
▸ Renderujemy w pamięci nowy komponent
▸ Znajdowana jest minimalna liczba operacji
transformujących stary komponent w nowy
▸ Nanieśmy zmiany w DOM w jednej serii

12. REACT.JS WARSAW #1
PRZEPŁYW DANYCH
▸ Dane płyną w dół
▸ Zdarzenia płyną w górę

13. REACT.JS WARSAW #1
PRACA Z REACT.JS
▸ Komponenty
▸ State, props, refs
▸ Cykl życia

14. REACT.JS WARSAW #1
KOMPONENTY
var Task = React.createClass({
render: function () {
return (
<tr>
<td><input type="checkbox"/></td>
<td>{this.props.task.name}</td>
</tr>
)
}
})

15. REACT.JS WARSAW #1
STATE & PROPS
▸ Komponent pobiera dane z props
▸ State przechowuje dane zmienione przez zdarzenia
komponentu
▸ State nie przechowuje:
▸ innych komponentów
▸ kopii props
▸ danych obliczeniowych

16. REACT.JS WARSAW #1
REFS
<input ref="myInput" />
var input = this.refs.myInput
var inputValue = input.value
var inputRect = input.getBoundingClientRect()

17. REACT.JS WARSAW #1
CHILDREN
<Parent><Child /></Parent>
<div>
{this.props.children}
</div>

18. REACT.JS WARSAW #1
CYKL ŻYCIA
▸ ReactElement render
▸ object getInitialState
▸ object getDefaultProps
▸ void componentDidMount
▸ void componentWillReceiveProps(nextProps)
▸ boolean shouldComponentUpdate(nextProps, nextState)

19. REACT.JS WARSAW #1
WARSZTATY - TO-DO LIST