Programmare con tuo figlio — Episodio 1

In un tranquillo sabato mattina, mi sono resa conto che mio figlio a 9 anni non ha mai avuto una esperienza diretta con la programmazione, quella vera, quella da nerd. Ha fatto un corso sul pensiero computazionale, gioca ogni giorno con un tablet, interagisce molto meglio di me con la smart TV, ma non gli ho mai raccontato come e perchè oggi abbiamo tutto questo. Non è in grado di creare una cartella con un mkdir, di navigare nel file system da un prompt dei comandi. Sa appena usare il mouse per navigare tra una tab e l’altra di un browser.

Mi sono veramente sentita in colpa nei suoi confronti! L’ho privato fino ad oggi di questa conoscenza!

Così lasciando dietro tutta la mia routine del sabato mattina, ho liberato la mia scrivania per fare posto ad un vecchio mio pc e al mio pc personale, ci siamo sedutti accanto. Abbiamo aperto il brower, siamo andati nel mio blog personale e gli ho chiesto: ti piacerebbe imparare a creare una pagina web?

I suoi occhi si sono illuminati: posso imparare a fare questo?

Così ho pensato bene di cominciare a guardare la programmazione con gli occhi di chi con un F12 in un browser vede solo mistero, ovvero cominciare a guardare la programmazione, con gli occhi di mio figlio.

Non mi importa se un giorno farà dell’informatica un mestiere, ma quello che per me più conta è che posso condividere con lui qualcosa che per me è importante e che magari nel suo futuro potrebbe ispirarlo.

Da dove abbiamo cominciato?

Intanto dall’esplorare il file system dentro un sistema windows attraverso il prompt dei comandi:

• cd per navigare nelle directory;
• mkdir per creare la directory della nostra prima applicazione.

Poi mi sono chiesta. Usiamo notepad per fare la nostra prima esperienza di coding? Ma mi sembrava una cosa troppo cattiva. Così ho ho preferito fargli provare l’ebrezza di procedere alla sua prima installazione di un programma su windows, Visual studio code, e di seguire insieme a lui un tutorial sulla creazione della nostra prima app in React:

• installazione di Node.js JavaScript runtime;
• apertura del prompt di comandi per verificare versione di quanto abbiamo installato:
• node — version
• npm — version

A questo punto siamo pronti per creare la nostra prima applicazione con

• npx create-react-app first-eu
• cd my-app per entrare nella cartella generata dal comando precendente
• npm start per far partire la nostra applicazione (e qui non vi dico il suo stupore nel vedere partire il browser all’indirizzo http://localhost:3000);
• code . per esplorare il contenuto con Visual Studio Code.

Andati poi nel file App.js e personalizzato il contenuto della pagina della prima nostra app, salviamo …e magicamente quello che abbiamo scritto nel codice, diventa live nella pagina