ReactJS for beginners

ReactJS
Ilaria Franchini
‘’A JavaScript library for building user interfaces’’
Presentazione a cura di:

UN PO’ DI STORIA...
2011 -Jordan Walk e il suo team rilasciano ReactJS per la gestione del
newsfeed di Facebook
2012 - ReactJS viene utilizzato per realizzare Instagram
2013 - La libreria viene rilasciata come strumento open source
2015 - Viene rilasciato React Native, per lo sviluppo di app per dispositivi
mobili iOS e Android

Componenti riutilizzabili e componibili
Approccio dichiarativo
Sintassi JSX
Virtual DOM
Flusso dei dati unidirezionale
PRINCIPALI CARATTERISTICHE

REALIZZAZIONE DI UNA SHOPPING LIST

npm install -g create-react-app
create-react-app shopping-list
cd shopping-list
npm start
INSTALLAZIONE CON “Create React App”

<!DOCTYPE html>
<html lang="en">
<head>
<title>Shopping list</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from
'./registerServiceWorker';
ReactDOM.render(<App />,
document.getElementById('root'));
registerServiceWorker();
index.html
index.js

import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="App">
<header>
<h1>Shopping list</h1>
</header>
</div>
);
}
}
export default App;
App.js

I COMPONENTI
COMPONENTI
CLASSE
COMPONENTI
FUNZIONALI
PROPS DOM
PROPS DOM
STATO

COMPONENTE FUNZIONALE
import React from 'react';
import './index.css';
const Header = () => {
return (
<div>
<h1>Shopping list</h1>
</div>
)
};
export default Header;
Header.js
...
import Header from '../Header/header';
render() {
return (
<div>
<Header/>
</div>
...
App.js
Risultato:

INIZIALIZZAZIONE AGGIORNAMENTO DISTRUZIONE
getDefaultProps()
getInitialState()
componentWillMount()
componentDidMount()
componentWillUnmount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
COMPONENTE CLASSE: CICLO DI VITA

COMPONENTE CLASSE
import './index.css'
class Header extends Component {
constructor() {
super();
this.state = {title: ''}
}
componentDidMount() {
const title= 'Shopping list';
setTimeout(() => {
this.setState({ title });
}, 3000)
}
Header.js
Risultato:
render() {
return (
<div>
<h1>
{this.state.title}
</h1>
</div>
)
}
};
export default Header;

GESTIONE DEGLI EVENTI
class Header extends Component {
constructor() {
super();
this.state = {value: 'Shopping list'}
}
handleChange = (e) => {
this.setState({value: e.target.value })
}
render() {
return (
<div>
<input className="title"
value={this.state.value}
onChange={this.handleChange}
/>
...
Header.js
Risultato:
Data-binding sul titolo

constructor() {
super();
this.state = {
items: [
{ element: "pane", completed: false },
{ element: "farina", completed: false },
{ element: "lievito", completed: false }
],
...
render() {
return (
...
<div>
<ul>
{this.state.items.map((item, index) => {
return (
<li key={index}>{this.state.items[index].element}</li>
)
})}
</ul><hr />
<p> Elementi nella lista:{this.state.items.length}</p>
</div>
LISTE E CHIAVI

PASSAGGIO DEI DATI: DAL PADRE AL FIGLIO
PADRE FIGLIO
PROPS ❏ Passaggio dei dati al figlio come
props dopo averli istanziati
❏ Richiamo dei dati nel figlio con
{this.props.dato}

LE PROPS
import Item from '../Item/item'
...
handleClick = (index) => {
const items = this.state.items;
items[index].completed =
!items[index].completed;
this.setState({ items })
}
render() {
return (
...
<div>{this.state.items.map((item, index) => {
return (
<Item
key={index}
index={index}
handleClick={this.handleClick}
item={item}
/>
)
Componente
padre “App.js”

LE PROPS
class Item extends Component {
render() {
return (
<div>
<span
style={{textDecoration: this.props.item.completed?
'line-through': 'none'}}>
</span>
</div>
)
Componente
figlio “Item.js”

LE PROPS
render() {
return (
<div>
<span
style={{textDecoration: this.props.item.completed?
'line-through': 'none'}}>
<input type = "checkbox" onClick={()=>
this.props.handleClick(this.props.index)}/>
{ this.props.item.element }
</span>
</div>
)
Componente

capitalize(item) {
let res = '';
for (let i = 0; i < item.length; i++) {
if(i === 0)
res += item[i].toUpperCase();
else
res += item[i].toLowerCase();
};
return res;
}
render() {
return (
...
<input type = "checkbox" onClick ={()=>
this.props.handleClick(this.props.index)}/>
{ this.capitalize(this.props.item.element) }
LE PROPS
Componente
Risultato:

PASSAGGIO DATI: DAL FIGLIO AL PADRE
❏ Definizione callback nel padre con in input i dati di cui ha bisogno
❏ Passaggio come props della callback al figlio
❏ Richiamo della callback in una funzione definita nel figlio
PADRE FIGLIO

...
import AddItem
from '../AddItem/addItem'
...
addItem = (itemFromChild) => {
const newItem = {
element: itemFromChild,
completed: false
}
const items = this.state.items;
items.push(newItem);
this.setState({
items: items
})
...
render() {
return (
...
<AddItem
addItem={this.addItem}
/>
...
Componente
padre “App.js”

class AddItem extends Component {
constructor () {
super();
this.state = {
inputValue: ''
}
}
this.setState(
{inputValue: e.target.value}
);
}
render() {
return (
<div className="addItem">
<form>
<input
value={this.state.inputValue}
onChange={this.handleChange }
/>
</form>
</div>
...

class AddItem extends Component {
constructor () {
super();
this.state = {
inputValue: ''
}
}
this.setState(
{inputValue: e.target.value}
);
}
handleClick = (e) => {
e.preventDefault();
this.props.addItem(
this.state.inputValue
);
this.setState(
{inputValue : ''}
)
}
render() {
return (
<div className="addItem">
<form>
<input
value={this.state.inputValue}
onChange={this.handleChange }
/>
<button
onClick={this.handleClick }
</button>
</form>
</div>
...

RENDERING CONDIZIONALE
...
this.state = {
...
showAll: true
}
}
...
changeShowAll = (showAll) => {
this.setState(
{showAll: showAll}
);
...
render() {
...
<button onClick={() =>
this.changeShowAll(true)}> Tutti
</button>
<button onClick={() =>
this.changeShowAll(false)}>
Completati
</button>

RENDERING CONDIZIONALE
...
render() {
...
{this.state.items.map((item, index) => {
if(this.state.items[index].completed ||
this.state.showAll)
return (
<Item
…
/>
Risultato:

CONCLUSIONI
● Veloce
● Stabile
● Codice UI leggibile e
mantenibile
● Debug più semplice
● Dimensioni
● Lenta curva di
apprendimento
● È solo una libreria UI
JSX
PRO CONTRO

CONCLUSIONI
❏ Non rischioso
❏ Reattivo
❏ Avanzato
Soluzione ideale per costruire applicazioni con dati che cambiano
ripetutamente nel tempo.

VS - SIMILARITÀ
❏ Virtual DOM
❏ Architettura basata su componenti
❏ Hook life-cycle
❏ Props
❏ Strumenti di costruzione
❏ Chrome Devtools

VS - DIFFERENZE
REACT VUE
JSX Templating
Gestione dello stato Object Properties
React Native Weex
Configurazione più lunga Sintassi più intuitiva
40 KB 20.9 KB
1178 contributori 190 contributori

ReactJS for beginners

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to ReactJS for beginners

Similar to ReactJS for beginners (20)

ReactJS for beginners