React.js eLearning (Mobile & Software Development - Programmering)

React.js eLearning

Programöversikt:

Denna React.js-kurs är utformad för nybörjare som vill bygga en stark grund i att utveckla moderna webbapplikationer med hjälp av React.js, ett av de mest populära JavaScript-biblioteken. Denna kurs utrustar eleverna med de grundläggande färdigheterna och kunskaperna för att effektivt skapa dynamiska, interaktiva och responsiva användargränssnitt.

Programfunktioner:

• Kursen och materialet är på engelska.
• Nybörjare - medel för blivande mjukvaruingenjörer
• 1 års tillgång till den självstyrda studieplattformen för e-lärande 24/7
• 14 timmar videoinnehåll
• 50 timmars studietid rekommenderas
• MEAN Stack virtuellt labb ingår
• 2 avslutningsprojektkurser
• Ingen tenta för kursen men studenten får ett intyg på genomförd utbildning.

Viktiga läranderesultat:

• Vet hur man bygger fantastiska en-sidesapplikationer med React och Redux
• Lär dig och tillämpa grundläggande koncept bakom strukturerandet av Redux-applikationer.
• Inse och uppskatta kraften i att bygga komponerbara komponenter
• Förstå och använd NPM, Babel och ES6 JavaScript-syntax.

Målgrupp:

Denna React.js-certifieringskurs är utformad för webb utvecklare som designar och bygger UI/UX-lösningar för mobil- och webbappar och vill designa med React så effektivt som möjligt med hjälp av ett JavaScript-bibliotek.

• Webbutvecklare
• Webbdesigners
• Fullstack-utvecklare
• Mobilutvecklare

Förutsättningar:

För den här kursen måste du ha erfarenhet av att bygga front-end webbapplikationer med HTML, CSS och JavaScript.

Kursinnehåll

Kursintroduktion

• Vad är React
• Sätta upp miljön

Startar (GitHub Finder) och sätter upp Reagera

• Projektintroduktion
• Skapa en React-applikation och visa filstrukturen
• Skapa React-app (CRA) Rensning och förberedelse
• Introduktion till JavaScript Syntax Extension (JSX) och Fragments
• Uttryck och villkor i JSX

Komponenter Tillstånd och Props

• Listor och att skicka ett tillstånd med props
• Stateless funktionella komponenter
• Hantering av HTTP-förfrågningar och uppdatering av tillstånd
• Spinner-komponent och omstrukturering
• Miljövariabler

Händelseöverföring av props React Router och mer

• Händelser och sökkomponenter
• Skicka props uppåt och söka efter användare
• Rensa användare från ditt tillstånd
• Sätta upp varningstillstånd och komponent
• Sätta upp en React-router
• Lägga till en enskild användarkomponent och data
• Skapa en användarkomponent Användargränssnitt och Layout
• Repos och Repoitem-komponenten

Refaktorisering av Hooks och context API

• Översikt över hooks och context API
• Använda en Search-klass för att fungera med use state-hooken
• Använda en User-klass för att fungera med useEffect-hooken
• App klass funktionskomponent
• Implementera context API och använda Reducer
• Skapa reducers
• Flytta användartillståndet till context-API:t
• Flyttar repos tillstånd till kontext-API:t
• Skapar arbetsflöde för varningskontext
• Skapar hem- och NotFound-komponenterna
• Förbereda och distribuera till Netlify

Mongo DB express React och Node (MERN)

• Sätta upp MongoDB Atlas
• Skapa beroenden och en grundläggande Express-server
• Sätta upp backend-rutter
• Ansluta MongoDB till applikationen

Backend-användarkontakter och JSON-webbtokenautentisering

• Användarmodell och validering
• Hasha lösenord och registrera rutter
• Skapa och svara med en JSON-webbtoken
• Skapa en autentiseringsrutt
• Autentiserande Middleware och skydda rutter
• Skapa en kontaktmodell och hämta kontaktvägen
• Lägga till en kontaktväg
• uppdaterar kontakter och tar bort rutter

Ställa in din klient och kontakter Användargränssnitt

• Sätta upp React och Concurrently
• Sätta upp städning, Navbar och en router
• Skapa kontakter, Context och ett globalt tillstånd
• Skapa kontakterna och kontaktitem-komponenterna
• Ta bort en kontakt från användargränssnittet
• Inställning och rensning av aktuella kontakter
• Lägga till åtgärder för att redigera och uppdatera kontakter
• Skapa ett kontaktfilterformulär och tillstånd
• Skapa en grundläggande lägg till och ta bort-animation

React eller Express-autentisering

• Skapar autentiseringens kontext och initiala tillstånd
• Skapar registrerings- och inloggningsformulär
• Skapa varningskontext, tillstånd och komponenter
• Skapa ett användarregistreringsformulär
• Laddar en användare och sätter en token
• Skapar användarinloggning
• Skapar logout- och Navbar-komponenterna
• Skapa PrivateRoute-komponenten

Integrera och distribuera Contacts API

• Lägga till kontakter i databasen
• Hämta och rensa kontakter
• Radera kontakter
• Uppdaterar kontakter
• Förbereda och distribuera till Heroku

Starta IT Logger (Redux) komponenter och UI

• Sätta upp React och JSON
• Sätta upp Materialize CSS
• Skapa SearchBar- och Logs-komponenterna
• Skapa Logitem- och Preloader-komponenterna
• Skapa AddBtn- och AddLogModal-komponenterna
• Lägga till redigerings- och teknikmodal-komponenterna

Redux tillståndshantering

• Sätta upp redux-butiken och leverantören
• Ställa in Logs Reducer, Actions och Typer
• Ansluta Redux till en komponent
• Lägga till, ta bort, uppdatera, söka loggar

Teknikers tillstånd och dess komponenter

• Teknikers reducer, åtgärder och komponenter
• Använda urvalskomponenten
• Lägga till tekniker
• Radera tekniker

Kursens slutprojekt:

• Bygga en Event Finder-app i React

Bygg en React-app där användare kan se och marknadsföra kommande evenemang, ställa in en JSON-server för testning tills backend-API:er är klara, och slutligen hantera tillståndet med Redux.

• Pokémon Sökapplikation

I pokémonvärlden, där användaren ska kunna söka efter olika pokémon, måste du skapa en applikation för att söka efter dem med följande funktioner:

Pokémon-applikationen bör ha en lista över pokémon-detaljer som kommer att tillhandahållas i form av JSON-data, det vill säga den bör ha namn, bild, CP, attack, försvarstyp osv.
Det bör finnas en sökfält så att användaren kan söka efter Pokémon baserat på Pokémon-namnet. Eftersom vi har många Pokémon, tillämpa paginering så att användaren bara kan se 10 Pokémon åt gången.