Getting Started with React Essentials (Latest Edition) (TT4190)

React Essentials is an engaging, three-day course tailored for web developers who are new to React. This course is a perfect starting point for those looking to add this powerful JavaScript library to their skill set. React is renowned for its efficiency in building dynamic user interfaces, making it a valuable asset for any web project. By learning React, you’ll be equipped to create more interactive, responsive websites, enhancing both user experience and organizational web strategies.

During the course, you’ll explore essential React topics through a mix of lectures and hands-on labs.

Throughout the course, you’ll dive into the essentials of React, starting with the fundamentals of building your first React web application, where you’ll learn about setting up your development environment and creating your initial application. You’ll also explore the intricacies of React’s component-based architecture, including both class and functional components, and understand the role of JSX in developing intuitive user interfaces. You’ll also explore creating and managing web forms, along with an understanding of routing to build multi-page applications. Complementing these core topics, the course also introduces you to advanced concepts such as the Virtual DOM, state management using Hooks, and essential tools like React Router, ensuring you have a comprehensive foundation in React.

This course prioritizes a practical approach, ensuring that 50% of your time is spent in hands-on labs, solidifying your understanding through real-world application. Guided by an industry expert, you’ll acquire problem-solving skills and gain confidence in applying your new knowledge immediately in your projects. By the end of the course, you will have not only a theoretical understanding of React but also practical basic experience in its application, ready to enhance your web development projects with your newfound skills.

NOTE: For a deeper dive into React essentials with extended topics and labs, you might consider the five day React Boot Camp (TT4195) course as an alternative. The five day Boot Camp is a superset of this three day React Essentials (TT4190) course.

Course Agenda

Please note that this list of topics is based on our standard course offering, evolved from typical industry uses and trends. We will work with you to tune this course and level of coverage to target the skills you need most. Course agenda, topics and labs are subject to adjust during live delivery in response to student skill level, interests and participation.

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
   • useContext() Hook Example
   • Bonus Content / Time Permitting
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
10. REST
    • REST Basics
    • Using fetch
    • Using axios
11. 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