Szybki start z React. Prezentacja przedstawiona na warsztatach z podstaw technologii React w ramach DreamLab Academy. W razie pytań zapraszamy do kontaktu academy@dreamlab.pl

1. Intro to React
Marcin Śpiewak
Marek Mitis

2. First app
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);

3. First app
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);
Node managed by React DOM

4. First app
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);
Main component

5. controllers
Services
templates
models

6. Controllers
Services
templates
models
COMPONENTS

10. REACT === COMPONENTS

11. First app
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);

12. First app
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);
“ReactDOM is the glue
between React and the
DOM”

13. Example component
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;

14. Example component
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;
function

15. Example component
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;
import React from 'react';
export class TodoApp extends React.Component {
render() {
return (
<h1>Learn React</h1>
);
}
}
export default TodoApp;
function

16. Example component
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;
import React from 'react';
export class TodoApp extends React.Component {
render() {
return (
<h1>Learn React</h1>
);
}
}
export default TodoApp;
classfunction

17. Example component
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;
import React from 'react';
export class TodoApp extends React.Component {
render() {
return (
<h1>Learn React</h1>
);
}
}
export default TodoApp;
classfunction
===

18. export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
XML???

19. JSX

20. Compilation
function TodoApp() {
return (
<h1>Learn React</h1>
);
}
function TodoApp() {
return React.createElement(
"h1",
null,
"Learn React"
);
}
compilation

21. Compilation
function TodoApp() {
return (
<h1>Learn React</h1>
);
}
function TodoApp() {
return React.createElement(
"h1",
null,
"Learn React"
);
}
compilation

22. Props
function TodoApp({task}) {
return (
<h1>{task}</h1>
);
}

23. Props
function TodoApp({task}) {
return (
<h1>{task}</h1>
);
}
<TodoApp task={"Learn React"}/>

24. class TodoApp extends React.Component {
render() {
return (
<h1>{this.props.task}</h1>
);
}
}
<TodoApp task={"Learn React"}/>

25. Props are immutable
class TodoApp extends React.Component {
render() {
this.props.task = 'New task';
return (
<h1>{this.props.task}</h1>
);
}
}

26. Props are immutable
class TodoApp extends React.Component {
render() {
this.props.task = 'New task';
return (
<h1>{this.props.task}</h1>
);
}
}

27. Props are immutable
class TodoApp extends React.Component {
render() {
this.props.task = 'New task';
return (
<h1>{this.props.task}</h1>
);
}
}

28. State
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
task: 'Learn React'
}
}
render() {
return (
<h1>{this.state.task}</h1>
);
}
}

29. State
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
task: 'Learn React'
}
}
render() {
return (
<h1>{this.state.task}</h1>
);
}
}

30. State is mutable
addNewTask() {
this.setState({
task: 'My new task'
});
}

31. State is mutable
addNewTask() {
this.setState({
task: 'My new task'
});
}

32. Events
addTask(e) {
...
}
render() {
return (
<form onSubmit={this.addTask}>
...
</form>
);
}

33. Events
addTask(e) {
...
}
render() {
return (
<form onSubmit={this.addTask}>
...
</form>
);
}

34. Events
addTask(e) {
e.preventDefault();
...
}
render() {
return (
<form onSubmit={this.addTask}>
...
</form>
);
}

35. Events
addTask(e) {
e.preventDefault();
...
}
render() {
return (
<form onSubmit={this.addTask}>
...
</form>
);
}
stops the default action of an element

36. Child component
import TodoList from './TodoList';
export class TodoApp extends React.Component {
render() {
return (
<div>
...
<TodoList items={this.state.items} />
</div>
);
}}

37. Child component
import TodoList from './TodoList';
export class TodoApp extends React.Component {
render() {
return (
<div>
...
<TodoList items={this.state.items} />
</div>
);
}}

38. Render multiple components
render() {
return (
<ul>
{this.props.items.map((item) => {
return (
<li key={item.id}>{item.text}</li>
)
})}
</ul>
)
}

39. Render multiple components
render() {
return (
<ul>
{this.props.items.map((item) => {
return (
<li key={item.id}>{item.text}</li>
)
})}
</ul>
)
}
This way React can
handle the minimal DOM
change.

40. The component lifecycle
constructor()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()

41. The component lifecycle
constructor()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()
mounting
updating
unmounting

42. Render method
constructor()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()

43. Render method
constructor()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()

44. Render method
constructor()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()
Invoke only if shouldComponentUpdate return true

45. Typechecking with PropTypes
import React, {PropTypes} from 'react';
export class TodoList extends React.Component {
...
}
TodoList.propTypes = {
items: PropTypes.string.isRequired
};

46. Typechecking with PropTypes
import React, {PropTypes} from 'react';
export class TodoList extends React.Component {
...
}
TodoList.propTypes = {
items: PropTypes.string.isRequired
};

47. Typechecking with PropTypes
import React, {PropTypes} from 'react';
export class TodoList extends React.Component {
...
}
TodoList.propTypes = {
items: PropTypes.string.isRequired
};

48. Thanks
[Dzięki]

49. Thanks
[Dzięki]