React

num alias default 20.18.1 → dice al mio sistema : usa sempre questa funzione di NODE

Un programma che facilita l'installazione di dipendenze esterne – un gestore di pacchetti.

Per eseguire un file JavaScript, utilizzo il comando:

node nome_script.js package.json,

Il manifesto del nostro progetto/applicazione JavaScript è il file che

gestisce e definisce le dipendenze del progetto.

Il comando:

npm init package.json.

inizializza un nuovo progetto JavaScript, generando il file

NPM (Node Package Manager) è il gestore di pacchetti predefinito fornito con Node.js e

viene utilizzato per gestire le dipendenze e configurare il progetto.

per “scripts” si intende degli alias

nmp → package manejr

"scripts": {

"dev" : "node script1.js"

},

Se io eseguo su il terminale npm run dev

comando per eseguire il mio script

ottengo :

> test_init@1.0.0 dev

> node script1.js

hello

npm (Node Package Manager)

●​ Cos'è:​

È il gestore di pacchetti predefinito per Node.js. npm permette di installare,

aggiornare e gestire librerie e moduli JavaScript.

●​ Funzionalità principali:

○​ Installazione di pacchetti: Consente di installare librerie e strumenti da un

vasto repository online (il registro npm).

○​ Gestione delle dipendenze: Permette di definire e gestire le dipendenze di

package.json.

un progetto tramite il file

○​ Script e automazione: Supporta l'esecuzione di script per task di sviluppo,

test e build.

●​ Ambito di utilizzo:​

Utilizzato in progetti Node.js e front-end per facilitare la gestione dei moduli e delle

dipendenze.

axios

●​ Cos'è:​

È una libreria JavaScript (un modulo) che permette di effettuare richieste HTTP da

browser e ambienti Node.js.

●​ Funzionalità principali:

○​ HTTP Client: Consente di inviare richieste GET, POST, PUT, DELETE, ecc.

○​ Promise-based: Utilizza le Promesse, rendendo il codice asincrono e più

async/await.

facile da gestire con

○​ Intercettori e gestione degli errori: Permette di configurare intercettori per

le richieste o le risposte e gestire errori in modo centralizzato.

○​ Compatibilità: Funziona sia in ambiente browser che in Node.js, facilitando

la scrittura di codice condiviso.

●​ Ambito di utilizzo:​

Utilizzato per interagire con API REST o qualsiasi servizio web, facilitando la

comunicazione client-server.

se io installo : npm install axios

il mio manifesto json cambia

ha aggiunto Dependencies

non ho specificato la versione per specificarla, dovevo mettere axios@numero_vers

"axios": "^1.7.9"

il ^ mi dice che se un giorno viene aggiornata una nuova versione di axios di aggiornarla

anche nelle mie dipendenze

se tolgo il capello dico usa sempre axios con quell’aggiornamento

Dev Dependencies → dipendenze di sviluppatore, pacchetti che servono solo mentre

sviluppiamo il progetto ma che non servono all'utente finale

La cartella node_modules è la directory in cui vengono installati e conservati tutti i pacchetti

(librerie e moduli) che il tuo progetto utilizza, installati tramite npm (Node Package

Dettagli principali

Manager).

●​ Installazione dei pacchetti:​

npm install

Quando esegui il comando in una cartella di progetto che contiene un

package.json, npm scarica e installa tutti i pacchetti elencati nelle dipendenze

file

all'interno della cartella node_modules.

●​ Struttura:​

All'interno di node_modules sono presenti non solo i pacchetti che hai

esplicitamente richiesto, ma anche tutte le dipendenze (e le dipendenze delle

dipendenze) necessarie al funzionamento di tali pacchetti.

●​ Dimensioni:​

Questa cartella può diventare molto grande, a causa dell'ampio numero di moduli

necessari per far funzionare correttamente il progetto.

●​ Version Control:​

Di solito, la cartella node_modules non viene inclusa nel controllo versione (come

Git) perché: npm install.

○​ È possibile ricostruirla in qualsiasi momento eseguendo

○​ Riduce le dimensioni del repository.

●​ Utilizzo in fase di sviluppo:​

I pacchetti contenuti in node_modules vengono utilizzati durante lo sviluppo e

l'esecuzione del tuo progetto per fornire funzionalità aggiuntive, come l'accesso a

librerie di terze parti, strumenti di sviluppo, framework, ecc.

dentro cartella node_modules ho una cartella per ogni dipendenza che ho installato nel mio

sistema.

Ogni cartella per la dipendenza come ad esempio axios ha altre dipendenze nel suo

package json sono definite altre librerie di cui ha bisogno. La risoluzione di dipendenze è un

albero

React è una libreria scritta in javascript ma che supporta typescript ma è scritta attraverso un

pacchetto terzo

COMANDO PER INSTALLARE TYPESCRIPT

npm install --save-dev typescript

typescript è una Dev Dependencies

perché serve solo a noi mentre sviluppiamo

typescript è una command line interface : ci mette a disposizione dei comandi che posso

usare a riga di comando,

CLI possiamo avere librerie con le quali dialoghiamo da terminale

typescript ci mette a disposizione un comando : TSC

npx → eseguire i comandi dei pacchetti di node, interagiamo con la CLI

se però :

ovvero nella cartella ​ proj_REACT/

non avevo lanciato il comando​ ​ npm install --save-dev typescript

e quindi non funziona

in test_ts si quindi funziona

se non voglio usare npx

posso installare typescript globalmente nel mio sistema, come ?

con il comando visto inizialmente typescript lo installo solo localmente al mio progetto.

con typescript c’è tsconfing.json → ulteriore file di dichiarazione

non devo esguire typescript devo eseguire javascript

Comando : TSC

meggio@MEGGIO:~/proj_REACT/test_ts$ npx tsc

se ho più file mi crea il compilato

Però non voglio vedere il file javascript che viene creato a partire da un file typescript dentro

src, quindi gli specifico una propria cartella

COME ?

cambio una proprietà in tsconfig.json → “outDir”

tolgo il commento e gli assegno la cartello in cui voglio che mi vengano salvati i file js creati

da ts

meggio@MEGGIO:~/proj_REACT/test_ts$ npx tsc

TOOL : che mi permette di fare tutto in automatico

TSX​ ​ → è una Dev Dependency, serve solo a noi finché sviluppiamo fare una build

"dependencies": {

"tsx": "^4.19.2"

}

Come lo eseguo ??

ESISTE UN MODO CHE QUANDO CAMBIO QUALCOSA NEL MIO FILE IO NON DEBBA

RICOMPILARE ??

INSTALLARE REACT

→ React ha bisogno di un ambiente di esecuzione specifico perché non è un linguaggio a sé

stante, ma una libreria JavaScript per la creazione di interfacce utente. Ecco perché:

→ React è scritto in JavaScript, quindi per eseguire un'app React, hai bisogno di un

ambiente che supporti JavaScript, come un browser o Node.js.

→ React utilizza una sintassi chiamata JSX (JavaScript XML), che non è supportata

direttamente dai browser. Per questo, serve un transpiler come Babel per convertirlo

in JavaScript standard.

→ Un'applicazione React è spesso suddivisa in più componenti e file. Per gestire questi file

e ottimizzare il codice, si usano bundler come Webpack, Vite o Parcel.

Questi strumenti combinano tutti i file in un unico script eseguibile nel browser.

→ React usa un ambiente di sviluppo interattivo che offre funzionalità come Hot Module

Replacement (HMR), il che significa che puoi vedere le modifiche in tempo reale senza

ricaricare la pagina. Vite create-react-app

Per questo, strumenti come o avviano un server locale che

gestisce la tua applicazione.

REACT-DOM : renderizzare su un browser ciò che noi facciamo in react

ad esempio react native usa un altro adattatore per renderizzare.

Next.js è un framework basato su React che semplifica lo sviluppo di applicazioni web,

offrendo funzionalità avanzate come il rendering lato server (SSR), la generazione statica

(SSG) e il routing automatico.

Perché usare Next.js invece di React puro?​

React di per sé è una libreria per creare interfacce utente, ma lascia a te la gestione di

aspetti come il routing, l'ottimizzazione delle performance e il rendering. Next.js aggiunge

queste funzionalità, rendendo lo sviluppo più efficiente.

PROCEDURE :

→ create react app vite :

comando che ho copiato : npm create vite@latest

e l'ho lanciato sul terminale nella cartella dove volevo creare l’app, poi ho scelto :

react - typescript + sw

→ dopo che apro la cartella che contiene il mio progetto devi installare le dipendenze con

npm install

→ se guardi package.json trovi devDependencies : librerie terze che servono solo per

compilare il nostro progetto ecc..

→ SCRIPT – ALIAS che ha installato :

→ proviamo lo script di build : npm run build

[ha fatto delle cose e ha creato la cartellina dist / : Che cos’è ?? è il pacchetto completo che

andiamo a dare quando rilasciamo la nostra applicazione]

→ npm run dev : ci ha creato un server di dave : è un server che gira sulla mia macchina,

che mi permette di visualizzare quello che sto facendo sul browser, e quindi sviluppare

index.html :

Quando parte l’html mi crea questo id : root e carica lo script main.tsx

file.tsx che si occuperà di renderizzare tutto quello che noi facciamo in react, in html

è un file.jsx perchè sintassi json : → esempio app.jsx

React si basa sul modello dei componenti, incapsulo un funzione logica in un componente

per utilizzarlo poi più volte, quando vado a programmare.

meccanismo di rendering di react si basa su un albero di componenti

esempio :

che cos’è una componente ?? è una FUNZIONE

che prende in input qualunque cosa e ritorna del jsx → ritorna dell’interfaccia (renderizzato

come html valido)