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! 🎉

  1. slides.com/pnicolli/costruire-un-applicazione-react
  2. github.com/pnicolli/demo-calculator
  3. facebook.github.io/react/docs/thinking-in-react.html

 

  • twitter.com/pieronicolli
  • github.com/pnicolli
  • pnicolli ~ italiajs.slack.com
Made with Slides.com