Podstawy wykorzystania biblioteki React.js. Prezentacja przedstawiona na warsztatach dla studentów Politechniki Krakowskiej w ramach cyklu wartsztatów DreamLab Academy. W razie pytań zapraszamy do kontaktu academy@dreamlab.pl The presentation was created for a DreamLab Academy workshop on React.js. For more details get in touch - academy@dreamlab.pl

1. Intro to React
Mariusz Wieczorkiewicz
Marek Mitis

2. controllers
Services
templates
models

3. Controllers
Services
templates
models
COMPONENTS

7. REACT === COMPONENTS

8. Virtual DOM <=> DOM(Document Object Model)

9. Data Flow and Components Structure

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

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

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

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

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

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

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

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;
function

18. 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

19. 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
===

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

21. JSX

22. Compilation
function TodoApp() {
return (
<h1 className="main-header">
Learn React
</h1>
);
}
function TodoApp() {
return React.createElement(
"h1",
{className: "main-header"},
"Learn React"
);
}
compilation

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

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

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

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. Props are immutable
class TodoApp extends React.Component {
render() {
this.props.task = 'New task';
return (
<h1>{this.props.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
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
task: 'Learn React'
}
}
render() {
return (
<h1>{this.state.task}</h1>
);
}
}

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

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

33. setState is asynchronous
addNewTask() {
this.setState({
task: 'My new task'
}, function() {
this.sendTask(this.state.task);
});
}

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

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

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

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

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

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

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

41. 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.

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

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

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

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

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

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

48. Typechecking with PropTypes
import React, {PropTypes} from 'react';
export class TodoList extends React.Component {
...
}
const {arrayOf, string, bool, func, shape, oneOfType} = PropTypes;
TodoList.propTypes = {
items: arrayOf(string),
loadNew: bool,
updateItems: func.isRequired,
order: oneOfType(null, shape({value: number, items:arrayOf(string)})
};

49. Want more?
- React Documentation (https://reactjs.org/docs/hello-world.html)
- Better State management: Redux
(https://redux.js.org/introduction)
- Make your data immutable for real: Immutable.js
(https://facebook.github.io/immutable-js)
- Test your Components: Jest
(https://facebook.github.io/jest/docs/en/getting-started.html)
- Make great documentation: React Story Book
(https://github.com/storybooks/storybook)

50. Why i should learn React?
➔ Awesome testability and debug
➔ Strong support / Popularity
➔ Loose, extendable architecture
➔ Reusable components
➔ React is not just library, it’s a platform:
Next.js -> Server Side Rendering
Gatsby.js -> Static Sites
React Native -> Mobile Apps
ReactVR -> VR Apps

51. Questions?

52. https://goo.gl/DvVWq1