React.js training eLearning

Deze React.js cursus is ontworpen voor beginners die een sterke basis willen leggen in het ontwikkelen van moderne webapplicaties met React.js, een van de populairste JavaScript bibliotheken. 

Deze cursus voorziet cursisten van de fundamentele vaardigheden en kennis om op efficiënte wijze dynamische, interactieve en responsieve gebruikersinterfaces te maken.

Doelgroep

Doelgroep:

Deze React.js certificeringscursus is bedoeld voor webontwikkelaars die UI/UX-oplossingen voor mobiele en webapps ontwerpen en bouwen en zo efficiënt mogelijk willen ontwerpen met React met behulp van een JavaScript-bibliotheek.

• Webontwikkelaars
• Webdesigners
• Full-stack ontwikkelaar
• Mobiele ontwikkelaar

Vereisten:

Voor deze cursus moet je ervaring hebben met het bouwen van front-end webapplicaties met HTML, CSS en JavaScript.

Leerresultaten

Belangrijkste leerresultaten:

• Weet hoe je verbazingwekkende single-page applicaties bouwt met React en Redux
• Leer en pas fundamentele concepten toe achter het structureren van Redux applicaties
• Realiseer en waardeer de kracht van het bouwen van samenstelbare componenten
• Begrijpen en gebruiken van NPM, Babel en ES6 JavaScript syntaxis.

Inhoud

Cursusinhoud

Cursus Introductie

• Wat is react
• De omgeving instellen

Starten (GitHub Finder) en instellen van React

• Project introductie
• Een React-applicatie maken en de bestandsstructuur bekijken
• React App maken (CRA) Opschonen en voorbereiden
• Inleiding tot JavaScript Syntax Extension (JSX) en fragmenten
• Expressies en conditionals in JSX

Componenten Staten en Props

• Lijsten en een State doorgeven met Props
• Stateless functionele componenten
• HTTP-verzoeken afhandelen en toestanden bijwerken
• Spinner-component en refactoring
• Omgevingsvariabelen

Props voor het doorgeven van gebeurtenissen React Router en MOre

• Gebeurtenissen en zoekcomponenten
• Props doorgeven en gebruikers zoeken
• Gebruikers uit je status verwijderen
• Waarschuwingsstatus en -component instellen
• Een React Router opzetten
• Een enkel gebruikerscomponent en gegevens toevoegen
• Een gebruikerscomponent UI en lay-out maken
• Repo's en het Repoitem component

Haken en context API verfijnen

• Overzicht van hooks en context API
• Een Zoek-klasse gebruiken om te functioneren met de use state hook
• Een gebruikersklasse gebruiken om te functioneren met de gebruik effect haak
• App klasse functie component
• Context API implementeren en de Reducer gebruiken
• Reducers maken
• Gebruikersstatus naar de context API verplaatsen
• Repos-status naar de context API verplaatsen
• Waarschuwingscontext workflow aanmaken
• Creëren van de home en NotFound componenten
• Voorbereiden en implementeren naar Netlify

Mongo DB uitdrukking React en Node (MERN)

• Opzetten van MongoDB atlas
• Aanmaken van afhankelijkheden en een basis express server
• Backend routes opzetten
• MongoDB verbinden met de applicatie

Backend gebruikerscontacten en JSON web Token Authenticatie

• Gebruikersmodel en validatie
• Wachtwoorden hashen en routes registreren
• Een JSON web token aanmaken en erop reageren
• Een Authenticatieroute maken
• Middleware authenticeren en routes beschermen
• Een contactmodel maken en de contactenroute verkrijgen
• Een contactroute toevoegen
• Contacten bijwerken en routes verwijderen

Uw client en contactpersonen UI instellen

• React en gelijktijdig instellen
• Opschonen, navigatiebalk en een router instellen
• Contacten, Context en een globale status maken
• De componenten contacts en contactitem maken
• Een contact verwijderen uit de UI
• Huidige contacten instellen en wissen
• Acties toevoegen voor het bewerken en bijwerken van contacten
• Een contactfilterformulier en -status maken
• Een basisanimatie voor toevoegen en verwijderen maken

React of Express verificatie

• Authenticatiecontext en initiële status maken
• Registratie- en aanmeldingsformulieren maken
• Waarschuwingscontext, -toestanden en -componenten maken
• Een gebruikersregistratieformulier maken
• Een gebruiker laden en een token instellen
• Aanmaken van gebruikerslogin
• Aanmaken van de logout en Navbar componenten
• De PrivateRoute component aanmaken

De Contacten API integreren en implementeren

• Contacten toevoegen aan de database
• Verkrijgen en wissen van contacten
• Contacten verwijderen
• Contacten bijwerken
• Voorbereiden en implementeren naar Heroku

IT Logger (Redux) componenten en UI starten

• React en de JSON instellen
• Opzetten van Materialize CSS
• De SearchBar en Logs componenten maken
• De Logitem- en Preloader-componenten maken
• De AddBtn en AddLogModal componenten aanmaken
• De edit en Tech Modal componenten toevoegen

Redux toestandsbeheer

• Het opzetten van de redux store en provider
• Het opzetten van Logs Reducer, Acties en Types
• Redux verbinden met een component
• Logs toevoegen, verwijderen, bijwerken en doorzoeken

Technicians State en zijn componenten

• Technici reducer, acties en componenten
• De select component gebruiken
• Technici toevoegen
• Technici verwijderen

Eindproject van de cursus:

• Een evenementenzoeker-app bouwen in React

Bouw een React-app waarmee gebruikers aankomende evenementen kunnen bekijken en promoten, stel een JSON-server in om te testen totdat de backend API's klaar zijn en beheer de status met Redux.

• Pokemon zoekapplicatie

In de wereld van pokemon, waar de gebruiker moet kunnen zoeken naar verschillende pokemons, moet je een applicatie maken om ze te zoeken met de volgende functionaliteiten:

De Pokemon applicatie moet de lijst van pokemon details die zullen worden verstrekt in de vorm van JSON-gegevens dat wil zeggen, het moet naam, afbeelding, CP, aanval, verdediging type etc.

Het moet een zoekbalk, zodat de gebruiker kan de pokemon zoeken op basis van de naam van pokemon.Since hebben we veel pokemon, van toepassing paginering, zodat de gebruiker kan slechts 10 pokemon te zien op een moment.

Belangrijkste kenmerken

Programmaeigenschappen:

• Cursus en materiaal zijn in het Engels
• Beginner - gemiddeld voor aspirant software engineer
• 1 jaar toegang tot het zelfstudie eLearning platform 24/7
• 14 uur video-inhoud
• 50 uur studietijd aanbevolen
• MEAN Stack virtueel Lab inclusief
• 2 Eindproject cursus
• Geen examen voor de cursus, maar de student krijgt wel een certificaat van voltooiing van de training