DEVREACT

React JavaScript Programming

2 dagen
Intermediate
Available in English

Volg de React JavaScript Programming Training. Deze React training introduceert het React JavaScript framework, vaak ReactJS of React.JS genoemd. React is een populair component-based JavaScript framework gebruikt voor het makkelijk creëren van sterke, interactieve UIs.

Na afronding van deze training kun je onder andere:

Flexibel inplannen
Bij ons kun je flexibel inplannen. Zo train je wanneer het jou uitkomt. 
Hulp of advies nodig?
Laat je telefoonnummer achter, dan bellen we je binnen 30 minuten terug.
Hidden

Met het versturen van dit formulier ga je akkoord met onze Privacy Policy

This field is for validation purposes and should be left unchanged.
Beste lesmethode
Kleine klassen
Flexibel inplannen
Leer wat jij nodig hebt

Training: React JavaScript Programming

Deze React training introduceert het React JavaScript framework, vaak ReactJS of React.JS genoemd. React is een populair component-based JavaScript framework gebruikt voor het makkelijk creëren van sterke, interactieve UIs.

Deze React training biedt een introductie waar de voordelen van het React JavaScript framework naar boven komen zodat je snel kunt beginnen met het ontwikkelen van applicaties met behulp van het framework.

Na afronding van de training kun je:

  • Het programmeermodel wat aangeboden wordt door het React framework begrijpen.
  • React componenten definiëren.
  • Het React framework gebruiken om events en stateful data te handelen.

Voor het volgen van deze training dien je te beschikken over:

  • Eerdere ervaring en begrip van web development, HTML, AJAX en JavaScript.

Deze training is bedoeld voor iedereen die aan de slag wil met het creëren van UIs met behulp van het React JavaScript framework.

CHAPTER 1. REACT OVERVIEW

  • What is React?
  • What’s in a Name?
  • React Component Model
  • What React Is Not
  • What You Will Not Find in React
  • Motivation for Creating React
  • A React JavaScript Example
  • One-Way Data Flow
  • JSX
  • A JSX Example
  • The Virtual (Mock) DOM
  • Only Sub-components that Actually Change are Re-Rendered
  • React Libraries
  • Summary

CHAPTER 2. ES6 IN A NUTSHELL

  • What is ES6?
  • ES6 Features
  • Using ES6
  • Transpiling
  • Major Syntax Changes
  • let and const
  • Variable Scope
  • Shadowing Variables
  • Arrow Functions
  • Arrow Functions As Parameters
  • Using ‘this’ Within Arrow Functions
  • Template Literals
  • Spread Operator
  • ES6 Classes
  • Declaring Classes
  • Declaring Instance Methods
  • Accessor Methods
  • Static Methods
  • Inheritance With Classes
  • Summary

CHAPTER 3. BABEL COMMAND-LINE INTERFACE

  • Babel Transpiler
  • Usage Options
  • Presets and Plug-ins
  • Babel CLI Installation
  • Babel Configuration
  • Running Babel Command-Line
  • A Basic ES6 Development Setup with Babel
  • Test the Babel Development Setup
  • Adding React to the Development Setup
  • Create a Minimal React App – Index.html
  • Create a Minimal React App – app.js
  • Summary

CHAPTER 4. BASIC COMPONENTS AND JSX

  • What is JSX?
  • JSX Transpilation to React Code Example
  • Running the Transpiled Code
  • Babel
  • The Babel Runtime JavaScript Library
  • Script Import Skeleton Code
  • Playing Around in CodePen
  • React Components
  • Ways to Create UI Components
  • Creating a Functional Component Example
  • Component Names Must Be Capitalized
  • Creating a React Class-Based Component in ES5
  • The render Method
  • Creating a UI Component Using ES6 Class Notation
  • Using ES6 Classes with React
  • Which UI Component Creation Syntax Should I Use?
  • Components vs Elements
  • Elements Are Immutable
  • Properties
  • Property Naming Convention
  • Properties Default to ‘True’
  • Spread Attributes (an ES6 Feature)
  • Expressions
  • Fragments
  • Summary

CHAPTER 5. REACT FUNCTIONAL COMPONENT CONCEPTS

  • Functional Components
  • Nesting JSX Elements
  • Example of JSX Nesting
  • Comments in JSX Code
  • Setting CSS Styles Using Classes
  • Setting CSS Styles Directly
  • JSX Escapes Values
  • Working with Lists of Items
  • Keys in Lists
  • Example List With Key
  • Container vs. Presentational Components
  • State
  • Types of State Data
  • State Hierarchy
  • Lifting State Up
  • Props vs. State
  • Pass Down a Function
  • Immutability
  • Immutability – Why?
  • Virtual DOM and State
  • Setting state
  • Updating Input fields
  • Passing Props to Components
  • Passing Functions to Components
  • Event Handling
  • Event Handler Example
  • Event Binding – DOs
  • Event Binding – Don’ts
  • Passing Parameters to Event Handlers
  • Component Life-cycle
  • Life-cycle in Functional Components
  • App Development Workflow – 1/3
  • App Development Workflow – 2/3
  • App Development Workflow – 3/3
  • Summary

CHAPTER 6. REACT COMPONENTS WITH ES6 CLASSES

  • Classes in ES6
  • Functional Components
  • Extending React.Component
  • The render() Method
  • state
  • props
  • defaultProps
  • propTypes
  • Component Lifecycle
  • Component Life-cycle: Overview
  • Component Life-cycle – Render Phase
  • Component Life cycle – Commit Phase
  • Component Life-cycle – Unmounting
  • constructor()
  • example
  • componentDidMount()
  • example
  • setState( newStateValue )
  • Summary

CHAPTER 7. REACT ROUTER

  • Routing and Navigation
  • react-router
  • Creating a react-router based project
  • A Basic Routed Component
  • Router vs. BrowserRouter
  • The Route component
  • <Switch>
  • Redirect Route
  • Navigating with <Link>
  • Navigating with <NavLink>
  • Route Parameters
  • Retrieving Route Parameters
  • QueryString Parameters
  • Using Router with Redux
  • Summary

CHAPTER 8. STATE MANAGEMENT FOR REACT

  • React State Basics – Props and State
  • Props
  • State in Class Based Components
  • Managing State with Hooks in Functional Components
  • The Problem with Props and State
  • Redux State Library
  • Redux Advantages
  • Redux Disadvantages
  • Basic Rules for State Management
  • Types of State
  • Data State
  • Communication State
  • Control State
  • Session State
  • Location State
  • Location State Side Effects
  • Summary

CHAPTER 9. USING REACT HOOKS

  • Functional Component Shortcomings
  • Hooks Overview
  • Functional Component Props
  • The useState Hook
  • Functional Component using the useState hook
  • useState with Multiple Variables
  • useState can also be used with Objects
  • The Effect Hook
  • Effect Hook Example
  • Using Effect Hook to Load Data
  • Restricting when useEffect is Called
  • Hook Rules
  • Linter Example
  • Custom Hooks
  • Custom Hook Function Example
  • Using the Custom Hook
  • Additional Hooks
  • Summary

CHAPTER 10. UNIT TESTING REACT WITH REACT TESTING LIBRARY

  • React Testing Framework
  • Features
  • Snapshot Testing
  • Code Coverage
  • Interactive Mode
  • Projects created with
  • create-react-app
  • Default App Component Test
  • Unit Tests
  • Anatomy of a Unit Test
  • Common Matchers
  • Combining Tests
  • Running Tests
  • Testing Promise based async code with ‘done’
  • Setup and Teardown
  • react-testing-library
  • A Simple Component Test
  • A Simple Snapshot Test
  • Running and Updating SnapShot Tests
  • Building Component Tests
  • Calling Render
  • Render Properties
  • Simulating Events
  • Testing Results
  • Using Query Functions
  • Text Matching
  • Counter Component
  • counter-test.js
  • Summary

Ontvang gave gadgets bij onze trainingen!

10
Jennifer Pereira
Ik heb hier de 2-daagse training Microsoft Dynamics 365 fundamentals gevolgd. Medewerkers zijn zeer hulpvaardig en denken ver mee, dit vond ik TOP! De Active Learning training met vakkundige trainster is me heel goed bevallen. De lunch was royaal en erg lekker! Kortom, wellicht tot ziens!
9,0
Willem de Lang
In Februari een 5-daagse training WS-11 (Server 2019) gevolgd in twee weken. Deze training was op basis van het Active Learning programma en dit is me zeer goed bevallen. De instructeur had voldoende tijd/kennis om vragen te beantwoorden en me verder te helpen wanneer ik vast liep.
9,5
Edwin Kruize
Bij Master IT train ik al jaren on-site in Eindhoven wat mij ontzettend goed bevalt. De Active Learning lesmethode is perfect voor mij en kan ik op mijn eigen tempo en onder goede begeleiding mijn studies volgen. De trainers hebben veel brede kennis en nemen de tijd voor je. 

In de klas, online of beiden.

Active Learning

Je maakt samen met je trainer een plan en gaat actief aan de slag. In een kleine klas verdiepen in wat je echt nodig hebt, inzoomen op zaken die je echt interesseren en overslaan wat je al weet of niet nodig hebt. Plan je lesdagen flexibel, neem real-life casussen mee en werk ze uit met je trainer. Verrijk je kennis en verbind het met alles wat je al wist.

Digital MOC
Labomgeving
2 dagen voor € 995,-

Incompany

Wist jij dat alle IT trainingen die we aanbieden op de website ook bij jouw bedrijf uitgevoerd kunnen worden? Zo volg je een maatwerk IT training (Incompany training) met al je collega’s. Jij kunt de training nog specifieker voor jouw bedrijf laten inrichten en het is zelfs mogelijk om een geheel maatwerk traject door ons te laten ontwerpen.

Je bespaart reiskosten en reistijd voor de deelnemers, doordat onze trainer bij jou op locatie komt. Op deze manier kun je meerdere deelnemers van jouw organisatie dezelfde training laten volgen. Dat is efficiënt en effectief! Samen heb je een gemeenschappelijke opleidingsbehoefte en daar gaan we je bij helpen.

We hebben jarenlang ervaring in het geven van maatwerk it trainingen. We kijken zorgvuldig naar de opleidingsbehoefte om volledig aan te sluiten bij je wensen. Zo formuleren we haalbare en concrete doelstellingen en deelnemers kunnen het geleerde in de praktijk toepassen. Op deze manier groeien deelnemers persoonlijk en professioneel op meerdere niveaus.

Maatwerktraining
Van A-Z geregeld voor jouw team
Trainer komt op locatie

Digitale brochure ontvangen?

  • Hidden
  • Hidden
  • Met het versturen van dit formulier ga je akkoord met onze Privacy Policy

  • This field is for validation purposes and should be left unchanged.
DEVREACT
React JavaScript Programming
€ 995,-
Bekijk data