
Che cosa e` REACT
Installare nvm su windows
Editor Visual code
Creare una pagina web e aggiungere React e Reactdom e creare elementi
Annidare elementi con React.createElement e dichiare le loro proprietà
Creare componenti a base di funzioni con JSX e babel
Creare un progetto React con Vite
Struttura di un´app creata con Vite
JSX: Elementi ed espressioni
Component e props. Vedremo come creare un componente con una funzione e come passare parametri attraverso delle proprietà
Introduzione a react hooks
React hooks. useState e useEffect. Facciamo degli orologi
Facciamo un orologio digitale
Hook useState. Gestire lo stato in componenti funzionali
Hook useEffect. Fare chiamate alle API quando componente è pronto
useEffect: Rerendering del componente quando cambiano delle variabili
Useeffect. Parametri di redendering
Select dipendenti. Richiamare API degli album quando cambia l'utente
My movies app.Intro. Visita sito open movies database
OMBAPI-Creare app e ottenere chiave API di omdb
OMBPI- Chiamare le api usando fetch, implementare gli hooks e mostrare i films
React omdapi. Creare il componente movielist e aggiungere bootstrap
React omdapi-Creare componente MovieItem e usare componente CARD di bootstrap
React omdapi. Creare i componenti Navbar, Search e Menu
React omdapi- Implementare la ricerca di film
React omdapi- Creare finestra modale per mostrare dettaglio film
React omdapi- Mostrare dettaglio del film. Fare chiamata api per dettaglio
Intro a useReducer
Creare una Todo list App con useReducer
Creare una Todo list App con useReducer. Gestire add, remove e toggle
Creare una Todo list App con useReducer. Aggiungere Flex css per gestire il layo
React Redux-toolkit. Intro
Creare la Todo app e spiegazione dello store
Todo App. Aggiungere bootstrap e bootstrap icons
Todo app. Create la slice della store per i todos
Todo app.Mostrare i todos
Todo app. Aggiungere bootstrap e textbox per aggiungere nuovo todo
Todo App. Creare il componente List
Todo app. Creare componente todo con toggle e remove
Todo app. Aggiungere la barra di navigazione
Todo App. Aggiungere Reacto Router Dom e definire le rotte
Todo App. Aggiungere il componente Lista per mostrare e creare liste
Todo App. Creare il componente ListDetail per mostrare elenco todo di una lista
Todo App. Aggiungere pulsante view ed edit alla lista
Todo App. Editare una lista inline
Todo App. Editare un todo inline
Todo App. Implementare Auth. Login e Logout
Installare mysql con mac
Installare mysql in Windows
Express todo api. Installare express e testare l'applicazione
Express todo api. Configurare la connessione al database
Express Todo.Creare Modello lista, router lista e testare creazione di una lista
Express todo. Creare il CRUD completo delle liste
Express todo. Creare il controller delle liste
Express todo. Creare il controller dei todos. Gestione degli errori
Express todo. Creare AuthController e implementare il metodo register. Usare jwt
Express todo. Creare AuthController e implementare il metodo register. Usare jwt
Express todo. Creare il middleware Auth per proteggere le rotte e gesitre il jwt
Express todo. Testare i middleware Auth
App todo list. Intro ad Axios
App todo list.Installare y configurare Axios
App todo. Creare asyncthunks per login e register
App todo. Usare asyncthunks per i componenti login e register
Todo app. Mostrare gli errori del server
Todo app. Intro a RTK query
Todo App. Creare le API per le liste
Todo app. Usare il hook useGetListsQuery per leggere le liste
Todo app. Usare il hook useGetListsQuery per gestire gli errori e mostrare i dat
Todo app. Usare il hook useUpdateListMutation e useDeleteListMutation
Todo app. Usare i hook di mutazioni per i Todos
Todo app.Proteggere le rotte con un HOC component
Impara React, Redux Toolkit, RTK Query e React Router DOM con progetti reali!
In questo corso pratico imparerai a sviluppare Single Page Applications (SPA) complete utilizzando React, Redux Toolkit, RTK Query, e React Router DOM per la gestione della navigazione. Integrare i progetti con backend API sviluppate sia in Laravel che in Express.js ti permetterà di comprendere la gestione del frontend e backend in modo completo. Il corso è aggiornato con le ultime novità di React e Redux Toolkit, progettato per portarti a un livello avanzato.
Se vuoi imparare ReactJS, Redux Toolkit, RTK Query e React Router DOM in modo chiaro e pratico, questo è il corso giusto per te!
Cosa Faremo Insieme:
Esploreremo React tramite esercizi e progetti reali, coprendo tutto il necessario per acquisire padronanza. Ogni progetto è pensato per darti una comprensione profonda delle tecnologie frontend e backend.
Progetti Pratici che Creeremo:
Orologio Digitale: Un primo progetto per apprendere la gestione del tempo e delle componenti.
My Movies App: Applicazione completa con chiamate API per visualizzare e gestire informazioni sui film.
Albums App: Un’applicazione per gestire liste e lavorare con componenti.
Todo List App (CRUD e Autenticazione): Un progetto avanzato che include funzioni CRUD e autenticazione per la gestione completa degli stati. La creazione del backend sarà affrontata sia con Laravel che con Express.js, permettendoti di comprendere le basi dei due framework più usati nel mondo del backend.
Cosa Imparerai
Fondamenti di React:
Installazione di Node.js e npm per iniziare a sviluppare
Creazione di un'app con create-react-app
Introduzione a JSX e rendering degli elementi
Lavorare con Componenti e Props
Gestione dello Stato e Ciclo di Vita (State & Lifecycle)
Eventi e Rendering Condizionale
Utilizzo di Liste e Keys
Gestione delle Forms e dei Componenti Controllati
Accesso al DOM degli elementi con React.createRef
React Fragments per una migliore organizzazione del codice
Chiamate API e gestione delle risposte
React Router DOM per gestire la navigazione nelle SPA, creando percorsi multipli e dinamici
Redux Toolkit, RTK Query e React Router DOM:
Imparerai a gestire lo stato avanzato delle tue applicazioni grazie al Redux Toolkit e a RTK Query, integrandolo con React Router DOM per una navigazione efficiente tra le pagine. Creeremo una Movie API App per esplorare a fondo questi strumenti:
Cos'è Redux Toolkit e come ottimizza Redux
Creazione di uno Store con Redux Toolkit
Gestione delle azioni con Dispatch e abbonamento con Subscribe
Utilizzo di Actions e Action Creators
Reducers con Redux Toolkit
Introduzione e configurazione di RTK Query per la gestione delle chiamate API
Utilizzo di ThunkAPI per le azioni asincrone avanzate
Configurazione e uso di React Router DOM per creare SPA con navigazione multi-pagina e gestione delle rotte
Applicazione Pratica con React Redux Toolkit e Todo List:
Nella creazione di una Todo List App, vedremo come utilizzare React Redux Toolkit, RTK Query e React Router DOM, integrando il backend API con Laravel e Express.js. Imparerai a:
Collegare React e Redux con react-redux e Redux Toolkit
Passare lo Store ai componenti con <Provider>
Collegamento dello Store ai componenti con connect()
Creazione di Container Components per collegare Redux ai componenti
Mappatura dello stato della Store come proprietà dei componenti
Mappatura degli Action Creators come metodi
Uso di MapDispatchToProps e MapStateToProps
Configurazione di combineReducers per gestire più reducer
Sviluppo di un sistema CRUD completo (creazione, lettura, aggiornamento e cancellazione) utilizzando Laravel e Express.js per esplorare entrambi i framework backend
Configurazione avanzata di React Router DOM per una navigazione fluida nelle app SPA
Obiettivo del Corso
Alla fine di questo corso, sarai in grado di creare applicazioni SPA complesse utilizzando React, Redux Toolkit, RTK Query, e React Router DOM. Inoltre, potrai sviluppare un backend API sia con Laravel che con Express.js, acquisendo una comprensione pratica e avanzata degli strumenti principali di React e Redux, permettendoti di realizzare progetti completi e scalabili.
Iscriviti ora per iniziare il tuo viaggio verso il livello avanzato in React, Redux, e nella creazione di applicazioni web moderne!