În acest curs tutorial complet, veți învăța cum să creați o aplicație de rețea socială completă, cu funcții complete, folosind React, Firebase, Redux, Express și Material-UI. Acest tutorial intermediar acoperă lucruri precum crearea unui server API REST backend cu Node.js și Express, autentificarea și autentificarea utilizatorului, încărcarea imaginilor, notificări, funcții cloud, implementarea în Firebase și multe altele.
🎥 Curs creat de Classsed. Urmăriți canalul lor de YouTube: https://www.youtube.com/classsed
🔗Discord clasificat: https://discord.gg/GUuKyQW
🔗Patreon clasificat: https://www.patreon.com/classsed
⭐️ Cod ⭐️
Repo de coduri de funcții: https://github.com/hidjou/classsed-react-firebase-functions
React code repo: https://github.com/hidjou/classsed-react-firebase-client
E-mail expresie regulată: https://pastebin.com/f33g85pd
NoImg: https://pixabay.com/vectors/blank-profile-picture-mystery-man-973460/
Adresa URL de bază API: https://europe-west1-socialape-d081e.cloudfunctions.net/api
⭐️ Conținutul cursului ⭐️
⌨️ (0:00:00) Introducere
⌨️ (0:07:03) Creați și citiți date
⌨️ (0:27:56) Răspuns expres și formatare
⌨️ (0:42:37) Înregistrarea utilizatorului
⌨️ (1:03:22) Validare și ruta de conectare
⌨️ (1:19:33) Middleware de autentificare
⌨️ (1:33:10) Refactorizare și organizare
⌨️ (1:48:46) Încărcare de imagine
⌨️ (2:13:45) Adăugați și obțineți detalii despre profilul utilizatorului
⌨️ (2:33:15) Obținerea și comentarea postării
⌨️ (2:56:38) Like, Unlike și Șterge postarea
⌨️ (3:25:42) Creați și primiți notificări
⌨️ (3:58:11) Finalizarea Funcțiilor Cloud
⌨️ (4:23:46) Noțiuni introductive cu React
⌨️ (4:44:01) Detalii cărți poștale
⌨️ (5:11:45) Formular de conectare
⌨️ (5:50:36) Înregistrare și stare de autentificare
⌨️ (6:05:16) Configurare Redux
⌨️ (6:41:17) Înscriere și traseu de autentificare
⌨️ (6:56:35) Secțiunea de profil
⌨️ (7:19:48) Încărcare de imagine
⌨️ (7:31:24) Deconectați-vă și editați profilul
⌨️ (7:53:60) Butoane din bara de navigare
⌨️ (8:07:60) Acțiuni pe plac și spre deosebire
⌨️ (8:39:11) Butonul de ștergere
⌨️ (8:57:45) Adăugați o componentă de postare
⌨️ (9:20:19) Post Dialog
⌨️ (9:47:30) Detalii de dialog post
⌨️ (10:01:21) Se afișează comentarii
⌨️ (10:16:29) Trimiterea comentariilor
⌨️ (10:37:28) Pagina de utilizator
⌨️ (10:54:30) Notificări
⌨️ (11:31:59) Încărcare schelete
⌨️ (11:59:28) Implementare în Firebase
Actualizare 15 februarie 2022: rețineți că nu putem actualiza acest videoclip. Iată câteva actualizări de la @FrankJacquette:
– Firebase nu mai oferă un nivel gratuit. Va trebui să configurați un cont și să furnizați un card de credit pentru a utiliza funcțiile Firebase.
– Versiunea actuală de Busboy a spart API-ul descris în videoclip. Vă recomand să vă modificați codul pentru a utiliza versiunea curentă.
– React-router-dom are modificări API-breaking de când a fost realizat videoclipul. Recomand să faceți downgrade la versiunea 5.x.
– Instructorul va introduce ocazional o eroare în munca sa și o va repara mai târziu. Dacă codul dvs. nu funcționează, mai uitați-vă puțin înainte de a presupune că este problema dvs.
– Codul Redux așa cum este implementat va provoca o buclă infinită de reîmprospătare a paginii în anumite circumstanțe. Ștergerea spațiului de stocare local și reîncărcarea paginii va ocoli acest lucru.
– componentWillReceiveProps este depreciat și ar trebui înlocuit cu componentDidUpdate. Există câteva pagini bune care descriu cum să faceți acest lucru.
– Material UI a trecut printr-o versiune majoră de când a fost produs videoclipul. Deși totul din videoclip va continua să funcționeze, documentația pe care o veți găsi este pentru versiunea actuală a MUI și va fi ușor diferită. De asemenea, Grid are parametri ușor diferiți.
–
Învățați să codificați gratuit și obțineți un job de dezvoltator: https://www.freecodecamp.org
Citiți sute de articole despre programare: https://www.freecodecamp.org/news
Cursuri interesante:
- Creați o clonă Instagram cu React Native, Firebase Firestore, Redux, Expo – Curs complet
- Creați și implementați o clonă Instagram cu React și Firebase – Tutorial
- Curs React / GraphQL – Creați o aplicație de social media (MERNG Stack)
- Construiește o clonă LinkedIn cu React și Firebase – Tutorial
- Curs Flutter & Firebase – Construiește o clonă Instagram completă
- Redux Tutorial – Începător până la avansat
- Tutorial aplicație nativă Android: clonarea WhatsApp
- Curs de dezvoltare a aplicației Flutter – Construiește o clonă Twitter cu Appwrite și Riverpod
- Redux Toolkit Tutorial – Bibliotecă JavaScript State Management
- Tutorial proiect Python – Primul proiect Python