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]