React with Hooks and the Redux ToolKit Training

Nivå: Intermediate

This course gives you the tools to build client-side applications using the latest version of the React toolset to create high-performance apps running both in the browser and as native mobile applications. The course uses React Hooks to simplify coding and improve performance, while leveraging Typescript and the Redux Toolkit to improve productivity in creating complex applications. The full development process is covered, beginning with creating the application project, incorporating automated testing (using Enzyme and Jest for both unit and end-to-end testing), automatic documentation generation, and finishing with deploying the application.

Nyckelfunktioner:

  • Hands-on instructor-led training
  • After-course instructor coaching included
  • Learning Tree end-of-course exam included

Du kommer lära dig att:

  • Create web and mobile applications with the most popular client-side framework
  • Build complex applications with multiple screens and components
  • Read, update, add, and delete server-side data using Ajax calls
  • Architect client-side applications with UIs that dynamically respond to changes in the data

Välj den utbildningsform som passar dig bäst

LIVE, INSTRUCTOR-LED

In Class & Live, Online Training

  • 4-day instructor-led training course
  • After-course instructor coaching included
  • Learning Tree end-of-course exam included

UTBILDNING PÅ DIN ARBETSPLATS

Teamträning

  • Använd denna eller någon annan utbildning i ditt företag
  • Fullskalig programutveckling
  • Levereras när, var och hur du vill
  • Blandade utbildningsmodellerSkräddarsytt innehåll
  • Coaching av ett expertteam

Anpassa kurs och innehåll efter teamets behov

Kontakta oss

Utveckla dig och ditt team med anpassade eller öppna kurser alternativt e-learning

Learning Tree erbjuder kundanpassad utbildning hos er, öppna kurser i Stockholm, London eller Washington, möjlighet att delta via våra Anywhere centers (Malmö, Göteborg, Linköping, Stockholm eller Borlänge) eller olika former av e-learning med lärarstöd. Läs mer på www.learningtree.se/priser .

In Class & Live, Online Training

Note: This course runs for 4 dagar

  • 7 - 10 mar 9:00 - 16:30 GMT Online (AnyWare) Online (AnyWare) Boka Din Kursplats

  • 6 - 9 jun 9:00 - 16:30 BST Online (AnyWare) Online (AnyWare) Boka Din Kursplats

  • 5 - 8 sep 9:00 - 16:30 BST Online (AnyWare) Online (AnyWare) Boka Din Kursplats

  • 10 - 13 maj 15:00 - 22:30 CCST Herndon, VA / Online (AnyWare) Herndon, VA / Online (AnyWare) Boka Din Kursplats

  • 9 - 12 aug 15:00 - 22:30 CCST Herndon, VA / Online (AnyWare) Herndon, VA / Online (AnyWare) Boka Din Kursplats

Kurs med startgaranti

När du ser symbolen för “Guaranteed to Run” vid ett kurstillfälle vet du att kursen blir av. Garanterat.

Important React Training Information

  • Prerequisites

    Attendees should have knowledge at the level of Course 2319, JavaScript Essentials for the Full Stack Developer Using ECMAScript.
  • Who Should Attend

    • Developers with experience in JavaScript development who will be creating client-side applications with React
    • System architects and project managers who need to understand the tools being used to create client-side applications

React Training Outline

  • Introduction and Overview

    • Understanding React
    • Integrating React and TypeScript
  • Designing Custom React Components

    Leveraging JSX for UI design

    • Coding custom component classes
    • Composing a JSX component hierarchy
    • Extending the hierarchy with the Container/Presentational design pattern
    • Understanding the differences between JSX and HTML
  • Activating React Components

    Parameterizing components

    • Passing data from owner components to children
    • Leveraging the children props to pass content dynamically
    • Leveraging TypeScript to provide default values and data types

    Managing Complex UIs

    • Centralising logic at the container level by passing functions as props
    • Integrating stateless functional components
    • Improving performance with useCallback
    • Dynamically building the UI at runtime

    Manipulating component state

    • Managing State with UseState
    • Best practises for integrating components with TypeScript and props
    • Managing activities with useEffect
    • Sharing global data with useContext

    Routing between components

    • Exploiting the react-router for semantic URLs
    • Mapping URL paths and parameters to components
    • Testing routed components
  • Developing React Forms

    Manipulating form input components

    • Working with interactive properties
    • Capturing form component updates with onChange
    • Exploiting controlled components with one-way dataflow

    Implementing data and event binding

    • Applying the onChange / useState() convention
    • Reducing onChange clutter for cleaner code
    • Integrating functions with form events

    Ensuring quality with automated testing

    • Unit testing with Jest
    • End-to-End testing with Enzyme
    • Improving testing syntax with Testing Library
  • Centralising State with the Redux Toolkit

    Global State and Redux

    • Architecting loosely-coupled applications for extensibility
    • Managing state centrally

    Coding a loosely coupled application

    • Creating the central store
    • Understanding React’s one-way data flow at the application level
    • Segmenting the store with slicers

    Managing application-wide data

    • Creating the reducers and slices to manage application-wide state
    • Exploiting useSelector and useDispatch to access the global store
    • Reviewing alternatives: Mbox, alt, Relay, Flux, and Reflux
  • Connecting React to RESTful services

    • Making Ajax calls with isomorphic-fetch
    • Mapping CRUD access to React components
    • Adding Web service updates to the global store
    • Reviewing alternatives
  • Enhancing and Deploying

    • Extending your components with Higher Order Components
    • Accessing HTML with useRef
    • Externalizing configuration with appsetting files
    • Creating a deployment package
    • Deploying your application to IIS
  • React Native

    Introducing React Native

    • Building native apps with TypeScript
    • Integrating core, community, and custom components
    • The toolkit: React Native, TypeScript, and Expo

    Creating UIs in Reactive Native

    • Fundamental building blocks: View, Stylesheet, Text, Pressable
    • More advanced components: Flatlist, Picker, Switch

    Accepting Input

    • Integrating TextInput with change and value events
    • Simplifying the input process

    Navigation in React Native

    • Navigation options
    • Navigating the application Stack
    • Defining routes and passing parameters

    Deploying

    • Options for platform-specific functionality
    • Reviewing the deployment paths

Teamträning

React Training FAQs

  • What version of React is this course using?

    This course uses React version 17, however will benefit any attendee using version 16 or later.
  • What if I am using React version 15 (or earlier)?

    We recommend if you’re on version 15, or earlier, that you instead take our 2322: Building Web Applications with React and Redux course.
  • Will this course cover creating apps for iOS devices?

    Due to licencing restriction, the exercises students deploy are on an Android platform. Deploying to iOS devices is covered, and students using the MacIntosh platform can download the final app to their computers and generate an iOS compatible app. We will cover how to create apps that run on Web browsers, on any device, and how to create apps that run with native controls on Android and iOS devices. The course will also show to create an application that leverages Android and iOS-specific features (and how to ensure that the right code will deploy to the right device).
Online (AnyWare)
Online (AnyWare)
Online (AnyWare)
Herndon, VA / Online (AnyWare)
Herndon, VA / Online (AnyWare)
Why do we require your location?

It allows us to direct your request to the appropriate Customer Care team.

Hur föredrar du att bli kontaktad:

Please Choose a Language

Canada - English

Canada - Français