Învață React în acest curs complet pentru începători. React este unul dintre cele mai populare cadre JavaScript, iar acest curs este locul perfect pentru a începe călătoria dvs. de învățare. Veți învăța tot ce trebuie să știți pentru a începe cu React prin construirea a trei proiecte diferite.
Am reunit trei profesori populari pentru acest curs, astfel încât să puteți învăța din mai multe perspective.
Puteți codifica React all într-un browser web folosind Replit. Replit a oferit un grant care a făcut posibil acest curs.
🔗 https://join.replit.com/react-students
⭐️ Prima parte ⭐️
✏️ Instructor: Gavin Lon
🎥 Canalul lui Gavin: https://www.youtube.com/c/GavinLon
💻 Cod din video (folosind găurire cu prop): https://replit.com/@GavinLon/TeamMemberAllocation
💻 Cod alternativ (folosind Context pentru a evita forarea suportului): https://github.com/GavinLonDigital/TeamMemberAllocationApp
🔗 Cum să creați un cont gratuit de replit: https://www.freecodecamp.org/news/how-to-use-replit/#how-to-create-a-free-replit-account
🔗 Ce este un repl și cum să creați unul: https://www.freecodecamp.org/news/how-to-use-replit/#what-is-a-repl-and-how-do-you-create-one
🔗 Componenta funcției vs componenta clasei: https://reactjs.org/docs/components-and-props.html#function-and-class-components
🔗 Funcții săgeți JavaScript: https://www.freecodecamp.org/news/javascripts-arrow-functions-explained-by-going-down-a-slide-2eb8ee3c45e/
🔗 Cârlige și stare în reacție: https://reactjs.org/docs/hooks-state.html
🔗 Sistemul Bootstrap Grid: https://getbootstrap.com/docs/5.0/layout/grid
🔗 Înțelegerea elementelor de recuzită în React: https://www.freecodecamp.org/news/how-to-use-props-in-react/
🔗 Utilizarea contextului în React:https://reactjs.org/docs/context.html
⭐️ Partea a doua ⭐️
✏️ Instructor: John Smilga
🎥 Canalul lui Gavin: https://www.youtube.com/c/CodingAddict
💻 Aplicație completă: https://meals-application.john-smilga.repl.co/
💻 Cod sursă: https://replit.com/@john-smilga/meals-application
⭐️ Partea a treia ⭐️
✏️ Instructor: Sanjeev Thiyagarajan
🎥 Canalul lui Gavin: https://www.youtube.com/c/SanjeevThiyagarajan
💻 Cod: https://replit.com/@SanjeevThiyagar/react-demo
⭐️ Cuprins ⭐️
⌨️ (0:00:00) Introducere curs
⌨️ (0:02:03) Introducere, partea 1
⌨️ (0:06:15) Ce este Replit
⌨️ (0:07:50) Ce este React
⌨️ (0:08:23) Creați o repl
⌨️ (0:11:29) Creați componente funcționale
⌨️ (0:18:02) Instalați Bootstrap 5
⌨️ (0:22:49) Implementați useState Hook într-o componentă funcțională
⌨️ (0:29:16) Încărcați fișiere de imagine pentru a relua
⌨️ (0:33:28) Creați cod JSX pentru a randa cardurile Bootstrap pentru angajați
⌨️ (0:40:49) Creați o listă drop-down pentru echipe
⌨️ (0:45:03) Utilizați evenimente JavaScript pentru a seta starea
⌨️ (0:54:26) Mutați funcționalitatea legată de stare în componenta aplicației
⌨️ (0:56:48) Înțelegerea recuzitei
⌨️ (1:04:41) LocalStorage și useEffect Hook
⌨️ (1:11:47) Rutare, pachet react-router-dom, Navigare
⌨️ (1:25:25) Creați componenta de angajat
⌨️ (1:38:03) Responsabilități abstracte în componente funcționale
⌨️ (1:46:14) Implementați interogări media
⌨️ (1:47:04) Utilizarea contextului pentru a reduce sau a evita găurirea elementelor
⌨️ (1:48:50) Încheierea cursului
⌨️ (1:49:15) Introducere, partea 2
⌨️ (1:53:12) Configurare
⌨️ (2:08:03) Context API
⌨️ (2:30:46) Preluare date
⌨️ (2:42:08) Componenta mese
⌨️ (3:38:29) Componenta de căutare
⌨️ (4:10:11) Componentă modală
⌨️ (4:43:04) Componenta Favorite
⌨️ (5:14:27) Introducere, partea 3
⌨️ (5:20:32) Inițializați proiectul
⌨️ (5:22:48) React Router
⌨️ (5:30:23) Preluare date de la API
⌨️ (5:49:46) Solicitări multiple cu Promise.all()
⌨️ (5:54:05) Metoda hartă pentru randarea listelor
⌨️ (6:04:12) Tabel de randare a stocurilor
⌨️ (6:09:12) Date de codare a culorilor
⌨️ (6:16:55) Componentă de căutare de completare automată
⌨️ (6:39:12) Context API
⌨️ (6:59:40) Navigarea între pagini
⌨️ (7:03:52) Preluare date istorice
⌨️ (7:25:22) Formatarea datelor
⌨️ (7:31:31) Lucrul cu diagrame
⌨️ (7:44:18) Comutare oră grafică
⌨️ (7:58:54) Ștergeți stocul (propagarea evenimentului)
⌨️ (8:05:26) Date stoc
⌨️ (8:16:52) Stocare locală
🎉 Mulțumim susținătorilor noștri Campion și Sponsor:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
—
Î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://freecodecamp.org/news
Cursuri interesante:
- Curs Neo4j pentru începători
- Tutorial React Project – Creați un site web de portofoliu cu animații avansate
- Dezvoltare Web Full Stack pentru începători (curs complet despre HTML, CSS, JavaScript, Node.js, MongoDB)
- Dezvoltare Full Stack cu Java Spring Boot, React și MongoDB – Curs complet
- Codați un Discord Bot cu JavaScript – Gazdă gratuit în cloud
- Blazor WebAssembly & Web API pe .NET 6 – Curs complet (C#)
- React Native – Curs introductiv pentru începători
- Creați o aplicație de chat – Curs tutorial React
- Tutorial JavaScript – Creați un joc de cărți 🃏
- Tutorial pentru proiectare web pentru începători – Aplicație meteo cu Next.js, Tailwind CSS și TypeScript