🏴‍☠️ Pirateria

01. Premessa

02. Creare un progetto React - TypeScript con Vite

03. React Components: Arrow Function vs Regular Function

04. JSX Multiline

05. React Fragment

06. JSX Expressions

07. Dynamic Attributes

08. Conditional DOM

09. Ternary Operator

11. Custom components

12. Component Properties

13. Split in multiple files

14. Mouse Events

15. Rendering e React Strict Mode

16. useState hook

17. Visualizzare un elenco di dati con map

18. useState & Map: aggiungere elementi alla lista

19. useEffect and Fetch Data (GET)

20. fetch, POST e aggiornamento stato

21. Custom Types

22. Utilizzare axios per la comunicazione con le API REST

23. TypeScript TIP: strict flag in tsconfig

24. TypeScript TIP: noImplicitAny

25. TypeScript TIP: Union Type

26. TypeScript TIP: Typed useState

27. TypeScript TIP: useState, Union Type e null

28. TypeScript TIP: strictNullCheck

Pre-Requisiti

1. Creare il progetto React con Vite

2. Strict Mode

3. Installare e Configurare Tailwind v.3

4. Utilizzare Google Font

5. Tailwind @apply utility e mobile developers tools

6. Tailwind Page responsive layout

7. Tailwind Creare Button e varianti

8. Tailwind Forms Plugin

9. Tailwind Tables

10. Final Source Code

Pre-Requisiti

01. Creare le pagine dell'applicazione

02. Installare React Router e creare le regole

03. La Navigation Bar (+ Emmet TIP)

04. Nested Routes e Navigazione Secondaria

05. TIP - Short imports con Barrel Files

06. TIP - TypeScript Alias paths

Pre-Requisiti

01. Installare Pocket Base

02. Database - la collezione products

03. il Database - la collezione orders

04. Popolare il database

05. Installare e usare l'SDK JavaScript di PocketBase

06. Creare il custom type "Product"

07. L'hook useEffect

08. Gestione stato locale con useState e visualizzazione prodotti

09. TIP - env variables - differenziare le proprietà tra ambiente di sviluppo e produzione

10. Creare il file pocketbase di configurazione

Pre-Requisiti

01. Shop Layout - CSS Grid with Tailwind

02. Creare il layout dello Shop con Tailwind

03. Creare il componente ProductCard: gestire proprietà primitive e callback

04. Comunicazione con le API REST e gestione stato di "pending"

05. Gestione degli errori

06. Creare il componente "ServerError"

07. TIP - Aggiornare gli alias paths in tsconfig.json

08. Creare un componente "Spinner" animato utilizzando le icone di FontAwesome

09. Download Source Code Progetto

01. CartPanel Layout

02. useCartPanel - Glogal Store con Zustand

03. Use global state in NavBar e Shop Page

04. Usare lo store nel componente Cart Panel

05. Download Source Code progetto

Pre-Requisiti

01. Cart Store con Zustand

02. Dynamic Cart Panel - Utilizzare lo store

03. Enhance Store - gestione quantità

04. Cart Selectors

05. Usare i selettori nella NavBar

06. La pagina Cart

07. useCart store - refactoring e completamento

08. Checkout Button

09. Controlled Forms: la pagina Checkout

10. Form Validations

11. Form Field Validation e dynamic CSS class con "clsx"

12. Dirty State e setState simultanei

13. Regex Validators

14. Form Prevent Default

15. Creare il Type Order

16. Ultimi fix per procedere alla pagina thank you

17. useCheckout - spostare la business logic in un custom hook

18. Thank you Page

19. Disabilitare il Cart Badge se il carrello è vuoto

20. Demo Finale e Download Source

01. Login Form - Controlled Form

02. useLogin - Custom Hook

03. Creare un modulo per le API di Authentication di PocketBase

04. Authentication Store and Actions con Zustand

05. Auth Zustand Selectors

06. Auth Barrel File

07. Usare le API di Autenticazione

08. Gestione Errori nel Login

09. Redirect dopo il login con useEffect

10. AuthLogin e LocalStorage

11. Logout

12. Componente "IfLogged": protezione DOM, Fragment and PropsWithChildren

13. Componente IfLogged...else

14. Private Route

Download Source Code

Pre-Requisiti

Introduzione e Obiettivi del capitolo

01. da useState a useReducer

02. Products API - "non-null" assertion operator and TypeScript utility types

03. Typed State

04. Typed Actions

05. Product Actions

06. Separare il reducer dalla UI

07. Products Reducer

08. useProductsService - custom Hook Prodotti

09.Barrel File e Considerazioni su Refactoring

Download Source Code

Pre-Requisiti

01. useEffect

02. Differenziare i messaggi d'errore nel componente "ServerError"

03. Spinner, useEffect e cleanup function-applicare un debounce

04. Creare la tabella statica per la visualizzazione dei prodotti

05. Popolare la tabella, cancellare e selezionare elementi e stopPropagation

06. clsx - applicare dinamicamente classi css

07. Product List Component

08. Product Form - creare un side panel con transitions

09. Product Form - Controlled Form e Validazioni

10. useEffect e dipendenze - sync props con state

11. Product Form - gestire EDIT e ADD

12. Gestire campi di tipo differente

13. Dirty State

14. Visualizzazione Immagini

15. Scrollable Side Panel

16. Upload images con Cloudinary - Setup Account

17. Upload con Cloudinary Widget

18. useCloudinary - custom hook e Promise

19. Creare il file definition type per Cloudinary: index.d.ts

20. ShopPage - refactoring - usare actions e reducer

Download Source Code

01. Caricare gli ordini

02. Order Type

03. Orders API

04. Orders Actions

05. Orders Reducer

06. useOrdersService: custom hook

07. Orders Barrel File

08. CMS Orders Page - invocare la prima azione

09. CMSOrders Page - UI

10. Salvare su database il nuovo ordine

11. Gestire Azioni e Promise

Download Source Code

01. React, Components & CSS Modules: Local vs Global CSS

02. Versioning & Deploy di applicazioni React su Vercel

03. Pubblicare un'app PocketBase su PocketHost

11. Ottimizzazione bundle e lazy loading