React Programming

React har snabbt blivit ett av de mest populära ramverken för JavaScript-utveckling. Under den här kursen lär du dig hur man sätter upp och skapar en React-app, JSX och renderande av element, komponenter och props, state och livscykel, hooks, händelsehantering, listor och nycklar, formulär, komposition och arv, React Router, Flux och Redux.

Kursen ger dig de kunskaper som krävs för att bygga en Single Page Application (SPA) bestående av React-komponenter och med användning av React Router. Du får också kommer en introduktion till applikations-state-containrar, inklusive Flux och Redux, samt lokal state-hantering med hjälp av Hooks. Observera att React Native ingår inte i denna kurs.

Genom hela kursen används övningar och exempel för att ge praktisk erfarenhet av de tekniker som behandlas.

Målgrupp och förkunskaper

Utbildningen riktar sig till webbutvecklare. Du ska ha erfarenhet av webbutveckling, HTML, och JavaScript. För att alltid hålla en hög kvalitet på våra teknikkurser använder vi både engelsk- och svensktalande experter som kursledare.

Detaljerad information

Kursmaterialet är på engelska, med detta innehåll:

Introduction to React

• Understanding React
• Using Babel
• Create-React-App
• Setup & Project Structure

Modern Javascript

• Single Page Applications
• Transpilers & Polyfills
• ES6 Features
• Primitive & Reference Types
• Template Literals
• Destructuring
• Let, Const & Var
• Arrow Functions
• Understanding Classes
• Decorators
• Spread and Rest Operators
• Default Parameters and Values
• Exports and Imports
• Modules
• Array Functions
• Promises
• Generator Functions
• Sets and Maps
• Functional JavaScript
• Typescript

JSX & Element Rendering

• Virtual DOM
• JSX
• Lists and Keys

Components & Props

• What is a Component
• Functional vs. Class Components
• React Props
• State in Brief
• Typechecking
• Composition & Inheritance

State & Lifecycle

• State vs. Props
• Adding State
• Lifting State Up
• Component Lifecycle
• Component Lifecycle Methods
• Immutability

Event Handling

• Handler Assignment
• Binding to this
• Passing Arguments to Event Handlers
• Custom Components & Events
• Synthetic Event

Forms

• Controlled Components
• Uncontrolled Components
• Using Refs
• Forms JSX Summary
• Validation
• Form Libraries

React Router

• Using react-router
• Core Components

Hooks

• Motivation: Stateful Logic Re-Use
• Functional Vs Class Components Refactored
• Local State Without A Class: Internals
• Standard Hooks
• Custom Hooks: The Anticipated Future
• The (Only) Rules of Hooks

Further React

• Testing React
• React Performance
• Production Build/Deploy
• Refs & DOM
• React Patterns
• Authentication
• JSON Web Token
• Third Party Components

Flux

• Flux vs MVC
• Flux Main Components
• Flux Flow in Action
• Flux Utils
• Flux Implementations

Introducing Redux

• Redux: Inspired by Flux
• Core Redux: Actions, Action Creators, Reducers, Store
• Redux Data Flow

Redux & React

• Introduction and Setup Environment
• Components of React Redux
• React Data Flow
• Redux Recipes
• Redux DevTools

Further Redux

• Middleware
• Redux Thunk
• Redux Saga