Udemy

Platform

Italiano

Language

Web Development

Category

React.js in Italiano: Teoria Base, Hooks + 10 Progetti

La libreria più diffusa sul mercato Front-end

4.95 (11 reviews)

React.js in Italiano: Teoria Base, Hooks + 10 Progetti

Students

17.5 hours

Content

Jun 2021

Last Update
Regular Price

EXCLUSIVE SKILLSHARE OFFER
Exclusive SkillShare Offer
Unlimited access to 30 000 Premium SkillShare courses
40%OFF ANNUAL MEMBERSHIP

What you will learn

Utilizzare la Libreria React per creare interfacce utente.

Sviluppare web app performanti ed ottimizzate per i tuoi utenti.

Sfruttare il potenziale di Javascript per creare incredibili User Experience.

Imparare una delle Skill più richieste nel mercato moderno.


Description

React è la Libreria più diffusa per lo sviluppo Front-End e vanta la community più vasta tra gli sviluppatori  di web app e mobile.

La richiesta di React  sul mercato è in continua crescita ed è ormai quasi uno standard per gli sviluppatori web per poter accedere a posizioni lavorative in ambito web development in Italia e all'estero ma anche per poter sviluppare progetti personali.

La dimensione della community di React Developer permette di poter facilmente di poter collaborare e comprendere progetti di altri sviluppatori, oltre che di poter facilmente venire a capo di problematiche e bug grazie all'aiuto della vasta community. Facebook, Instagram, WhatsApp, Netflix, Airbnb, eBay, PayPal, New York Time, sono solo alcune delle aziende che utilizzano React in produzione.

In questo corso imparerai:

  • Come creare interfacce Moderne, Performanti e Responsive

  • La Teoria Base del Linguaggio JSX

  • Creare Componenti di Interfaccia riutilizzabili Riutilizzabili

  • Imparare ad utilizzare i principali React Hooks

Creare Hook Personalizzati



Oltre alla spiegazione teorica Realizzeremo 10 Progetti per consolidare le nostre competenze e vedere nel dettaglio alcune delle Best Practice per sfruttare tutto il potenziale delle nostre React App

  • Appuntamenti: Una Lista di Appuntamenti Rimovibili dall'utente

  • Dark Mode: Cambia Modalità alla tua applicazione

  • Vacanze: Scorri la vetrina per una serie di Pacchetti Vacanze

  • Slider: Il Classico Slider di Recensioni che non può mai mancare in una buona App

  • Color-Grading: Applicazione che permette all'utente di trovare tutte le sfumature a partire da un colore da lui scelto ed al click copiarlo nei suoi appunti

  • Navbar: Una barra di navigazione responsive ed espandibile Orizzontalmente in maniere dinamica in base al numero di item presenti.

  • Sidebar: Una Barra di navigazione Laterale espandibile solo da Mobile per offrire una navigazione di qualità

  • Cart: La gestione di un carrello di prodotti utilizzando lo useReducer Hook. La miglior Introduzione all'utilizzo di un framework di gestione e manutenzione degli State

  • Wiki Drink: Un'applicazione completa con una Home Page, un About Page ed una Contact Page. Il nostro utente potrà cercare il nome di qualsiasi cocktail esistente e noi gli forniremo tutte le istruzioni per realizzare e gustarselo. Nel caso Mancasse? Può contattarci per aggiungere il suo cocktail preferito.



Content

Introduzione

Che cosa è React

Come sarà Organizzato il Corso?

Competenze Minime

Dev Environment

Terminale per Principianti

Invito alla Collaborazione

Le Basi di React

Come creare una React App

Esplorazione della Nostra Prima React App

Creare un Componente

Le Regole della sintassi JSX

Componenti Innestati

Utilizzare Javascript in JSX

Il Props Object

Decostruzione Oggetto e Spread Operator

Il Children Props

Iterare un Array in JSX

Iterare un Array di Oggetti in JSX

Il Key Attribute

Gestione Degli Eventi in JSX

Pubblicare Progetti su Netlify

Concetti Avanzati e React Hooks

Organizzazione della Sezione

Link alla Repo su Git Hub

Organizzazione ed Utilizzo delle Lezioni

useState - Errore Base

useState - useState Hook

Regole Generali Utilizzo Hooks

useState - Array come Valore di Default

useState - Oggetto come Valore di Default

useState - Realizzare un Contatore

useState - Functional Return

useState - Functional Return e setTimeout

Progetto 1: Appuntamenti

useEffect - Concetti Base

useEffect - Utilizzo Condizionale

useEffect - Secondo Parametro

useEffect - Cleanup Function

useEffect - Cleanup Function Avanzato

useEffect - Data Fetching

Return Condizionale

Esempio di Return Condizionale

Short Circuit Evaluation

Ternary Operator

Mostrare e Nascondere un Componente

Progetto Numero 2

Progetto Numero 3

Progetto Numero 4

Progetto Numero 5

Form: Impostazione Generale

Input Controllato

Esempio di Submit di un Form

Controllare un input con un Oggetto

useRef - Concetti Base

useRef - Utilizzo Avanzato

Progetto 6: Color Shade Creator

Progetto 7: Navbar

useReducer - Set up Base

useReducer - Concetti Base

useReducer - Dispatch function

useReducer - Payload e Action

Passaggio di Proprietà a cascata

useContext Hook

Progetto 8: Sidebar

Progetto 9: Carrello con useReducer

Custom Hook - Creare Hook Personalizzati

PropTypes - Concetti Base

PropTypes - Valori di Default

Router - Router, Route e Switch

Rotuer - Link ed ErrorPage

Router - Single Page Template

Router - Router Props Object

Router - history e useHistory Hook

Ottimizzazione - React memo e useMemo Hook

Ottimizzazione - useCallback Hook

Progetto 10: Wiki Drink

Progetti

Link alla Repo su Git Hub

Struttura ed Uso Progetti

Progetto 1: Appuntamenti

1.Appuntamenti || - 01 Impostazione Base

Progetto 1 - 02 Creazione Interfaccia

1.Appuntamenti || 03 Utilizzo Icone e Aspetto Funzionale

Progetto 2: Dark Mode

2.Dark Mode || 01 Esplorazione Progetto

2.Dark Mode || 02 Impostazione Interfaccia

2. Dark Mode || 03 Funzione per Cambio Modalità

2. Dark Mode || 04 Local Storage

Pogetto 3: Vacanze

3. Vacanze || 01 Esplorazione Progetto

3. Vacanze || 02 Title Component

3. Vacanze || 03 Data Fetching

3. Vacanze || 04 Render Condizionale

3. Vacanze || 05 Single Holiday Component

3. Vacanze || 06 Next e Prev Funtions

Progetto 4: Slider

4. Slider || 01 Esplorazione Progetto

4. Slider || 02 Slide e Slider Components

4. Slider || 03 Traslare Slide

4. Slider || 04 Prev e Next Funtions

4. Slider || 05 Funzione per Creare le Stelle

4. Slider || 06 Auto Slider

Progetto 5: Gelateria

5. Gelateria || 01 Esplorazione Progetto

5. Gelateria || 02 Menu component

5. Gelateria || 03 Singolo Prodotto

5. Gelateria || 04 Funzione Filtrare Prodotti

5. Gelateria || 05 Data Fetching

Progetto 6: Color-Grading

6. Color-Grading || 01 Esplorazione Progetto

6. Color-Grading || 02 Form Input

6. Color-Grading || 03 Esplorazione Api

6. Color-Grading || 04 Creazione Scala Colori

6. Color-Grading || 05 Single Color Component

6. Color-Grading || 06 Copiare Colore al click

6. Color-Grading || 06 Gestione Errore Input

Progetto 7: Navbar

7. Navbar || 01 Esplorazione Progetto

7. Navbar || 02 Styling Generale

7. Navbar || 03 Toggle Function

7. Navbar || 04 Calcolare Altezza Espansione

Progetto 8: Sidebar

8. Sidebar || 01 Esplorazione Progetto

8. Sidebar || 02 useContext implementazione

8. Sidebar || 03 Navbar Component

8. Sidebar || 04 Sidebar e Styled-Components

8. Sidebar || 05 Mostra Nascondi Sidebar

8. Sidebar || 06 Modal Component

8. Sidebar || 07 Apri e Chiudi Modal

Progetto 9: Cart

9. Cart || 01 Esplorazione Progetto

9. Cart || 02 Navbar Component

9. Cart || 03 Cart Component

9. Cart || 04 Cart Item Component

9. Cart || 05 Creazione Context

9. Cart || 06 Implementazione useReducer

9. Cart || 07 Data Fetching

9. Cart || 08 Render Condizionale

9. Cart || 09 Delete Item Function

9. Cart || 10 Aumenta e Diminuisci quantità

9. Cart || 11 Calcola Costo Totale

9. Cart || 12 Contare Elementi nel Carrello

Progetto 10 - Cocktail

10. Cocktail || 01 Analisi Risultato Finale

10. Cocktail || 02 Esplorazione Progetto

10. Cocktail || 03 Creazione Context

10. Cocktail || 04 Creazione Router

10. Cocktail || 05 Navbar Component

10. Cocktail || 06 Footer Component

10. Cocktail || 07 Sidebar Component

10. Cocktail || 08 Mostra e Nascondi Sidebar

10. Cocktail || 09 Error Page

10. Cocktail || 10 Hero Component

10. Cocktail || 11 About Screen

10. Cocktail || 12 Card Component

10. Cocktail || 13 Contact Screen

10. Cocktail || 14 From Spree

10. Cocktail || 15 Home Screen

10. Cocktail || 16 Home Screen Input

10. Cocktail || 17 Esplorazione Api

10. Cocktail || 18 useFetch Custom Hook

10. Cocktail || 19 Home Data Fetching

10. Cocktail || 20 Cocktail Component

10. Cocktail || 21 Scroll Position Function

10. Cocktail || 22 Single Cocktail Page Data Fetching

10. Cocktail || 23 Single Cocktail Page Component

10. Cocktail || 24 useTitle Custom Hook

10. Cocktail || 25 Pubblicazione su Netlify


Reviews

L
Leonardo25 May 2021

Concetti ben spiegati, precisi e a prova di principianti. Aspetto il tuo prossimo corso, ottimo lavoro!

M
Mauro20 May 2021

I tempi di risposta e la disponibilità di Omar sono eccezionali, i concetti sono spiegati con ordine e criterio ed il corso è davvero aggiornatissimo. Sono molto molto soddisfatto.


3999702

Udemy ID

4/22/2021

Course created date

4/28/2021

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram