Getting Started with React Essentials Training in Canada

Who Should Attend?

In order to be successful in the course, you should have solid, current hands-on experience developing basic web applications, and be well versed in HTML5, CSS3 and JavaScript.

Our engaging instructors and mentors are highly experienced practitioners who bring years of current "on-the-job" experience into every classroom. Working in a hands-on learning environment, guided by our expert team, you’ll learn how to:

• Develop and Deploy a Basic React Application: Gain basic skills in setting up a React development environment and deploying a basic React web application.
• Work with React Components and JSX: Learn to effectively use class and functional components in React, integrating JSX syntax for dynamic user interface development.
• Implement Forms and Routing in React: Acquire skills in creating and managing interactive web forms and implementing seamless navigation using React Router.
• Apply State Management and Lifecycle Methods: Understand and apply state management using the useState Hook and lifecycle methods with the useEffect Hook in React applications.

1. Your first React Web Application
   
   • Setting up your development environment
   • JavaScript ES6 /ES7
   • Next.js Introduction
   • Getting started
2. Functional Components
   
   • What’s a component?
   • Class components
   • Functional components - Motivation behind Hooks
   • Our first component
   • Building the App
   • Props - Making the App data-driven
   • Events - Your app’s first interaction with the useEffect() Hook
   • State - Updating state with the useState() Hook
3. JSX and the Virtual DOM
   
   • React Uses a Virtual DOM
   • Why Not Modify the Actual DOM?
   • What is a Virtual DOM?
   • Virtual DOM Pieces
   • ReactElement
4. JSX
   
   • JSX Creates Elements
   • JSX Attribute Expressions
   • JSX Conditional Child Expressions
   • JSX Boolean Attributes
   • JSX Comments
   • JSX Spread Syntax
   • JSX Gotchas
5. Forms
   
   • Forms 101
   • Text Input
   • Multiple fields
   • Validation
6. Routing
   
   • What’s in a URL?
   • React Router’s core components
   • Building the components of react-router
7. Advanced Component Configuration with context
   
   • Context - Provider/Consumer
   • useContext() Hook Example
8. Unit Testing & Jest
   
   • Writing tests without a framework
   • What is Jest?
   • Using Jest
   • Testing strategies for React applications
9. Debugging React
   
   • Using React Developer Tools
   • Using Visual Studio Code
   • OPTIONAL - Using the Chrome Debugger

Bonus Content / Time Permitting

1. REST
   
   • REST Basics
   • Using fetch
   • Using axios
2. ES6 Primer
   
   • Prefer const and let over var
   • Arrow functions
   • Modules
   • Object.assign()
   • Template literals
   • The spread operator and Rest parameters
   • Enhanced object literals
   • Default arguments
   • Destructuring assignments