Udemy

Platform

Italiano

Language

Other

Category

React hooks e Node.js fullstack : Il corso completo

Il corso su REACT con gli HOOKS, NODEJS ed EXPRESS completo. Deploy su HEROKU, database MONGODB

Students

13.5 hours

Content

May 2021

Last Update
Regular Price

SKILLSHARE
SkillShare
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will learn

Gli studenti impareranno a sviluppare applicazioni in REACT con componenti funzionali utilizzando gli Hooks, inoltre svilupperanno un backend in NODEJS ed EXPRESS.


Description

Node.js è uno dei framework JavaScript più rivoluzionari dell’ultimo decennio, in quanto permette di utilizzare V8, l’interprete JavaScript di Google. Questo consente agli sviluppatori di realizzare web application con JavaScript non più solo lato client, ma anche sfruttandolo come linguaggio di programmazione lato server.

La caratteristica principale di Node.js risiede nella possibilità che offre di accedere alle risorse del sistema operativo in modalità event-driven e non sfruttando il classico modello basato su processi o thread concorrenti, utilizzato dai classici web server.

Il modello event-driven, o “programmazione ad eventi”, si basa su un concetto piuttosto semplice: si lancia una azione quando accade qualcosa. Ogni azione quindi risulta asincrona a differenza dei pattern di programmazione più comune in cui una azione succede ad un’altra solo dopo che essa è stata completata.

Gli Hooks sono stati aggiunti in React 16.8. Ti permettono di utilizzare state ed altre funzioni di React senza dover scrivere una classe.

In questo corso realizzeremo un’applicazione completa sfruttando React con componenti funzionali senza scrivere una classe. Impareremo a gestire gli stati della libreria grazie agli hooks(ganci) con useEffect ed useState.

Nella seconda parte dello stesso realizzeremo un backend con RestFull Api completo in NodeJs ed Express, pubblicheremo la web App su Heroku e sfutteremo il database testuale MongoDb Atlas.

Nella terza parte del corso introdurremo la libreria Redux e vedremo come realizzare un sistema di autenticazione sfruttando sempre la web App costruita durante tutte le lezioni.

Alla fine sarete in grado di padroneggiare sia il frontend che il backend delle applicazioni, insomma avrete tutte le competenze per poter diventare sviluppatori fullstack.

Per poter seguire il corso senza problemi è necessario avere conoscenze , anche se di base, di Es7, css ed Html.


Screenshots

React hooks e Node.js fullstack : Il corso completo
React hooks e Node.js fullstack : Il corso completo
React hooks e Node.js fullstack : Il corso completo
React hooks e Node.js fullstack : Il corso completo

Content

Introduzione

Introduzione agli hooks

Mia presentazione

Requisiti

Il codice delle videolezioni

RISORSE DEL CORSO

ESERCITARSI CON GLI HOOKS

Installa test-hooks

Realizza component button con la classe

Aggiungi bootstrap

Realizza componente funzionale Button

Recupero dati API con componenti a classe

Passare dati al componente figlio

Recupero dei dati con un componente funzionale

Realizzare un Hook personalizzato

BREVE RIPASSO DI REACT

Il componente radice

Contenuto dinamico del componente

Componenti all'interno di altri componenti

Installa bootstrap

Passaggio di dati con le props

Note importanti su React

Funzioni di supporto

Esempio di destrutturazione

Rendering della pagina

Component stateful

Il gestore di eventi

Il gestore di eventi è una funzione

Passaggio di stato ai componenti figli

Refactoring del codice

UNO STATO PIU' COMPLESSO

uno stato più complesso

Gestione degli array

Rendering condizionale

Consiglio utile

REALIZZA APP NOTE

Crea Note

Attributo chiave key

Metodo Map di javascript

Anti pattern passando indici come chiavi

Realizza e separa componente Note

I FORM

Aggiungi il form

Aggiungi una nuova nota

Aggiungi data ed ora

Filtrare gli elementi visualizzati

RECUPERO DEI DATI DAL SERVER

Installa il json-server

Configura il json-srver

Installa la libreria Axios

Ricevi i dati ,la Promise

Effect-Hooks

AGGIUNGI I DATI AL SERVER

Invio dati al server

Modifica importanza nota

Aggiungi lo stile

Aggiungi il service

Elimina nota

Conferma elimina nota

Aggiungi DATEPICKER

Aggiungi MATERIAL UI per orologio

Ordina nota in base alla data

Inserisci nota in base alla data

Promise ed errori

Style.css messaggio di errore migliorato

Stili in linea

Conclusione

REALIZZA UNA CRUD COMPLETA

Realizza REACT-CRUD

Configurazione iniziale

Installa bootstrap

Crea componente user-table

Installa json-server e concurrently

Installa axios

Crea il service

Aggiungi nuovo utente

Aggiunta nuovo utente

Elimina utente

Aggiorna utente

Conclusione

PARTE 2 - REALIZZA BACKEND CON NODEJS ED EXPRESS

RISORSE DELLA SEZIONE

Realizza directory backend

Modifica il file di configurazione

Crea un semplice server

Crea un semplice server parte 2

Express install

Web ed express

Nodemon install

Recupera singola risorsa

Modifica l'applicazione

Eliminare una risorsa

Testare l'applicazione

Plugin Rest client

Aggiungere note nella lista

Aggiungere dati all'applicazione

Intro ai Middleware

DEPLOING APP SU INTERNET

Cambia indirizzo API sul frontend

Gestione del cors-origin

Servire l'applicazione su heroku

Servire l'applicazione su HEROKU parte 2

Crea la build di produzione

Aggiungi la build sul backend

Razionalizzazione e distribuzione del frontend

Il proxy

SALAVARE I DATI IN UN DATABASE MONGODB

Creare un database mongoDb

Utilizzo del database

Spiegazione del codice di mongo.js

Recuperare oggetti dal db

Backend connesso al database

Configurare il database in un proprio modulo

Definire la variabile d'ambiente

Utilizzare il database nei gestori di rotte

Testare l'applicazione con postman

Gestione degli errori

Gestione degli errori con i middleware

l'Ordine di caricamento dei middleware

Eliminare una nota


4007388

Udemy ID

4/26/2021

Course created date

4/28/2021

Course Indexed date
Bot
Course Submitted by