ReactJS Masterclass

Tijdsduur

ReactJS Masterclass

EDC4IT Europe BV
Logo van EDC4IT Europe BV

Tip: meer info over het programma, prijs, en inschrijven? Download de brochure!

Startdata en plaatsen

Er zijn nog geen startdata bekend voor dit product.

Beschrijving

Course Overview

This is a fast-paced course to get you started building web applications using ReactJS. It assumes no prior knowledge of ReactJS.

After this course you will be able to build Single Page Web Applications using ReactJS:

  • Building Reusable components
  • Working with state
  • Adding routing to your applications
  • Adding form processing to your applications
  • Use patterns such as higher-order-components and render-props
  • Use state management solutions (Redux, Context)
  • Use hooks for functional components
  • Best Practices

After a few introductory labs,you will be working on non-trivial recipe application with all sorts of real-project problems (and their solutions)

Course Prerequi…

Lees de volledige beschrijving

Veelgestelde vragen

Er zijn nog geen veelgestelde vragen over dit product. Als je een vraag hebt, neem dan contact op met onze klantenservice.

Nog niet gevonden wat je zocht? Bekijk deze onderwerpen: Jenkins, Java, Softwarearchitectuur, Software Testing en Software Development / Ontwikkeling.

Course Overview

This is a fast-paced course to get you started building web applications using ReactJS. It assumes no prior knowledge of ReactJS.

After this course you will be able to build Single Page Web Applications using ReactJS:

  • Building Reusable components
  • Working with state
  • Adding routing to your applications
  • Adding form processing to your applications
  • Use patterns such as higher-order-components and render-props
  • Use state management solutions (Redux, Context)
  • Use hooks for functional components
  • Best Practices

After a few introductory labs,you will be working on non-trivial recipe application with all sorts of real-project problems (and their solutions)

Course Prerequisites

Students for this course will be familiar with JavaScript and have a strong understanding of HTML/CSS. Ideally people are familiar with ES6 (arrow functions, import/export, classes, fetch API). It is also helpful if students are familiar with a more "Functional" way of developing JavaScript. We recommend to follow our Introduction to Modern JavaScript and Advanced JavaScript for Front-end Developers coures before.

Outline

Introduction

  • Understand the rational behind React
  • Define scope of the React library
  • Understand the overall architecture of React
  • Discuss how react follows Declarative programming and how it uses concepts from Functional Programming
  • Contrast with other popular frameworks and libraries (e.g, Vue, Angular)
  • Introduce react basic concepts: ElementsComponentsJSXPropsState
  • Understand the virtual dom and how reacts performs reconciliation
  • Discuss toolchains and in particular Create React App
  • Recap of important ES6 features

Elements, JSX, and Components

JSX and Elements

  • Understand the JSX expression syntax
  • Understand what it transpiles/compiles into
  • Embed javascript expressions inside your JSX
  • Perform conditional rendering (using different techniques)
  • How to create dynamic css class lists (and discuss libraries which may help with this)
  • Working with lists
  • Understand the need for a key when using lists

Components (Basics)

  • Define functional components
  • How to work with props
  • Understand what components transpile to
  • Define ES6 class components
  • Discuss composing a User Interface into components
  • Understand and use the children prop
  • Add type information of a component's props using PropTypes

State and Life-cycle

State

  • Understand the difference between props and state
  • How to initialise state (using different techniques)
  • Changing/merging state using setState
  • Understand the relation between setState and render
  • How to update existing state
  • Using props when changing the state
  • Understand batching
  • Discuss react dataflow from state to props
  • How to transfer props to children

Life-cycle

  • Understand the react Life-cycle
  • What triggers state transitions (between mountedupdate and unmounted)
  • Details discussion of the different callback handlers (e.g, componentDidMountgetDerivedStateFromProps etc...)
  • Briefly discuss the deprecated callback handlers
  • Discuss common pitfalls and gotchas using these methods.
  • How to deal with state based on side-effects (e.g, fetching data)
  • How to deal with state based on props pure
  • How to deal with state based on props side-effects
  • How and where to use a REST API (using ES6 Fetch and Axios)

Routing

  • Discuss different routing libraries
  • Introduce and use react-router (including different routers)
  • How to define routes
  • List the various options (exactstrict, etc)
  • Using Path parameters
  • Defining child routes
  • Using exclusive routing with switch
  • Use the different rendering techniques (componentrender and children)
  • Detailed discussion on the different rendered properties (matchlocation and history)
  • Use declarative navigation (Link, NavLink, Redirect, etc)
  • Using custom Location objects
  • Passing state between views
  • Imperative navigation using the History API

Forms

  • Understand controlled and uncontrolled components
  • Create and manage controlled components
  • How to use the various form elements in React (inputselect, etc)
  • Adding validation
  • How to handle form submit
  • Introduction to Formik

Patterns

  • Discuss techniques to make code more DRY

Higher Order Components

  • Introduce Higher Order Components (HoCs)
  • Building and using HoCs
  • Best practices when defining HOCs
  • Composing multiple HoCs

Render props

  • Introduce the render-prop pattern
  • When to use render-props components (RPC)
  • Using and defining render-props components (RPC)
  • Best practices when defining HOCs
  • How to avoid callback-hell

State Management

  • Discuss different techniques for application state management

Redux & Flux

  • Introduction to Flux
  • Understand the one-way data flow
  • Ways of implementing Flux
  • Understand the architecture of Redux
  • Defining stores
  • Understand the concept of Reducers
  • How to organise reducers
  • Use action creators
  • How to dispatch actions
  • Understand and use redux middleware
  • How to deal with asynchronous actions (e.g, when using a Rest API)
  • Asynchronous actions with Redux Thunk
  • Using Redux Saga to manage the asynchronous lif-cycle
  • Best practices in structuring your Redux application

React Context

  • Understand the architecture of React Context
  • Discuss use-cases for using Context
  • Defining contexts
  • Creating Providers and Consumers
  • Discuss gotchas when using contexts

Hooks

  • Introduce React Hooks
  • Understand how Hooks impact application design
  • Towards only functional components
  • List which features you can *hook into**
  • Introduce and use the useState hook
  • Introduce and use the useContext hook
  • Introduce and use the useEffect hook
  • Discuss other hooks (useRefuseCallback etc)
  • Using hooks with redux
  • Introduce and use useSelector and useDispatch

React platforms (overview, time-allowing)

  • Introduction and overview of React Native
  • Overview of Server-Site-Rendering (SSR) (using Next.js)
  • Using react as a Static-Site-Generator (SSG) (usng Gatsby and GraphQL)

Welkom bij EDC4IT: Uw Innovatiehub voor IT-Training

Ontdek de kracht van onze interactieve Open Source Technologieën, DevOps en Infrastructuur cursussen:

  • Praktisch & Toepasbaar: Cursusmateriaal dat direct impact maakt in uw werk.
  • Persoonlijke Groei: On-the-job coaching en gepersonaliseerde consultancy.
  • Deskundige Trainers: Leer van de besten, met state-of-the-art materiaal.
  • Voorop in IT: Blijf vooruit met onze actuele en innovatieve aanpak.

Zet Nu de Stap met EDC4IT – Vergroot uw vaardigheden, versnel uw carrière.

Blijf op de hoogte van nieuwe ervaringen

Er zijn nog geen ervaringen.

Deel je ervaring

Heb je ervaring met deze cursus? Deel je ervaring en help anderen kiezen. Als dank voor de moeite doneert Springest € 1,- aan Stichting Edukans.

Er zijn nog geen veelgestelde vragen over dit product. Als je een vraag hebt, neem dan contact op met onze klantenservice.

Vraag nu gratis en vrijblijvend informatie aan:

(optioneel)
(optioneel)
(optioneel)
(optioneel)
(optioneel)