quick start with react | dreamlab academy #2
TRANSCRIPT
Intro to React
Marcin ŚpiewakMarek Mitis
First app
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);
First app
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);
Node managed by React DOM
First app
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);
Main component
controllers
Services
templates
models
Controllers
Services
templates
models
COMPONENTS
REACT === COMPONENTS
First app
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);
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”
Example component
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;
Example component
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;
function
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
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
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 ===
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
XML???
JSX
Compilation
function TodoApp() {
return (
<h1>Learn React</h1>
);
}
function TodoApp() {
return React.createElement(
"h1",
null,
"Learn React"
);
}
compilation
Compilation
function TodoApp() {
return (
<h1>Learn React</h1>
);
}
function TodoApp() {
return React.createElement(
"h1",
null,
"Learn React"
);
}
compilation
Props
function TodoApp({task}) {
return (
<h1>{task}</h1>
);
}
Props
function TodoApp({task}) {
return (
<h1>{task}</h1>
);
}
<TodoApp task={"Learn React"}/>
class TodoApp extends React.Component {
render() {
return (
<h1>{this.props.task}</h1>
);
}
}
<TodoApp task={"Learn React"}/>
Props are immutable
class TodoApp extends React.Component {
render() {
this.props.task = 'New task';
return (
<h1>{this.props.task}</h1>
);
}
}
Props are immutable
class TodoApp extends React.Component {
render() {
this.props.task = 'New task';
return (
<h1>{this.props.task}</h1>
);
}
}
Props are immutable
class TodoApp extends React.Component {
render() {
this.props.task = 'New task';
return (
<h1>{this.props.task}</h1>
);
}
}
Stateclass TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
task: 'Learn React'
}
}
render() {
return (
<h1>{this.state.task}</h1>
);
}
}
Stateclass TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
task: 'Learn React'
}
}
render() {
return (
<h1>{this.state.task}</h1>
);
}
}
State is mutable
addNewTask() {
this.setState({
task: 'My new task'
});
}
State is mutable
addNewTask() {
this.setState({
task: 'My new task'
});
}
EventsaddTask(e) {
...
}
render() {
return (
<form onSubmit={this.addTask}>
...
</form>
);
}
EventsaddTask(e) {
...
}
render() {
return (
<form onSubmit={this.addTask}>
...
</form>
);
}
EventsaddTask(e) {
e.preventDefault();
...
}
render() {
return (
<form onSubmit={this.addTask}>
...
</form>
);
}
EventsaddTask(e) {
e.preventDefault();
...
}
render() {
return (
<form onSubmit={this.addTask}>
...
</form>
);
}
stops the default action of an element
Child componentimport TodoList from './TodoList';
export class TodoApp extends React.Component {
render() {
return (
<div>
...
<TodoList items={this.state.items} />
</div>
);
}}
Child componentimport TodoList from './TodoList';
export class TodoApp extends React.Component {
render() {
return (
<div>
...
<TodoList items={this.state.items} />
</div>
);
}}
Render multiple componentsrender() {
return (
<ul>
{this.props.items.map((item) => {
return (
<li key={item.id}>{item.text}</li>
)
})}
</ul>
)
}
Render multiple componentsrender() {
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.
The component lifecycleconstructor()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()
The component lifecycleconstructor()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()
mounting
updating
unmounting
Render methodconstructor()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()
Render methodconstructor()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()
Render methodconstructor()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()
Invoke only if shouldComponentUpdate return true
Typechecking with PropTypesimport React, {PropTypes} from 'react';
export class TodoList extends React.Component {
...
}
TodoList.propTypes = {
items: PropTypes.string.isRequired
};
Typechecking with PropTypesimport React, {PropTypes} from 'react';
export class TodoList extends React.Component {
...
}
TodoList.propTypes = {
items: PropTypes.string.isRequired
};
Typechecking with PropTypesimport React, {PropTypes} from 'react';
export class TodoList extends React.Component {
...
}
TodoList.propTypes = {
items: PropTypes.string.isRequired
};
Thanks[Dzięki]
Thanks[Dzięki]