ReactJS Masterclass
Startdata en plaatsen
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…
Veelgestelde vragen
Er zijn nog geen veelgestelde vragen over dit product. Als je een vraag hebt, neem dan contact op met onze klantenservice.
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: Elements, Components, JSX, Props, State
- 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 mounted, update and unmounted)
- Details discussion of the different callback handlers (e.g, componentDidMount, getDerivedStateFromProps 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 (exact, strict, etc)
- Using Path parameters
- Defining child routes
- Using exclusive routing with switch
- Use the different rendering techniques (component, render and children)
- Detailed discussion on the different rendered properties (match, location 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 (input, select, 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 (useRef, useCallback 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
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.