Costruire un'applicazione
React
Piero Nicolli
Frontend Developer
CSS and UX enthusiast
Gaming addicted
@pieronicolli
pnicolli
medium.redturtle.it
pnicolli ~ italiajs.slack.com
React
- Dichiarativo
- State / Props
- Stateful / Stateless components
... e ora che si fa?
😱
Cosa vogliamo costruire
Una "semplice" calcolatrice! 😁
1. Spezzare il problema
Ricaviamo dall'interfaccia i singoli componenti che costituiscono la nostra app.
Ciascuno ha un singolo scopo.
2. Costruire l'html statico
Per ora non ci preoccupiamo dello stato dell'app e dei componenti
3. Sviluppare i componenti
Spezziamo l'html che abbiamo creato in più componenti (veri e propri, questa volta!)
Due approcci possibili:
- Top-down
- Bottom-up
4. Definire la rappresentazione minima dello stato dell'applicazione.
Elementi che:
- Definiscono lo stato dell'applicazione
- Non sono calcolabili da altri elementi dello stato
5. Stabilire dove risiede lo stato
Lo stato non deve necessariamente stare nel livello più alto dell'applicazione.
Deve però stare almeno nel primo livello che contiene tutti gli elementi con operano con esso.
Ok. Ho progettato tutto. Come procedo?
🤔
create-react-app
$ npm install -g create-react-app $ create-react-app nome-app
1. Spezzare il problema
Ricaviamo dall'interfaccia i singoli componenti che costituiscono la nostra app.
Ciascuno ha un singolo scopo.
2. Costruire l'html statico
Per ora non ci preoccupiamo dello stato dell'app e dei componenti
3. Sviluppare i componenti
Spezziamo l'html che abbiamo creato in più componenti (veri e propri, questa volta!)
Due approcci possibili:
- Top-down
- Bottom-up
4. Definire la rappresentazione minima dello stato dell'applicazione.
Elementi che:
- Definiscono lo stato dell'applicazione
- Non sono calcolabili da altri elementi dello stato
5. Stabilire dove risiede lo stato
Lo stato non deve necessariamente stare nel livello più alto dell'applicazione.
Deve però stare almeno nel primo livello che contiene tutti gli elementi con operano con esso.
Grazie! 🎉
- slides.com/pnicolli/costruire-un-applicazione-react
- github.com/pnicolli/demo-calculator
- facebook.github.io/react/docs/thinking-in-react.html
- twitter.com/pieronicolli
- github.com/pnicolli
- pnicolli ~ italiajs.slack.com
Costruire un'applicazione React
By Piero Nicolli
Costruire un'applicazione React
React è una libreria potente e flessibile e tutto il mondo ne parla. In questo talk ci mettiamo nei panni di chi ha appena imparato ad usarlo e vuole affrontare la sua prima sfida. Affrontare un nuovo progetto può sembrare complicato, vedremo come scegliere la strada da percorrere grazie ad alcune semplici linee guida: - Creare un’applicazione nuova - Trasformare un prototipo in un piano d’azione - Dare una struttura modulare all’applicazione - Comincia lo sviluppo!
