Advanced React

Course Abstract - Advanced React

This course provides a deep understanding of the React framework and teaches how to build front-end web applications with rich UI/UX using React. A strong focus is given on the functional approach, a preferred style in React.

The course gives an overview of underlying architectural principles of React, clarifies details and differences of its fundamental concepts (class and functional components, state and properties, rendering, lifecycle methods, hooks, etc.) and explains when and how to apply them. The course also discusses common issues in building advanced apps such as dynamically composing UI, sharing information among UI components, and data entry and validation using forms. Testing, profiling and optimizing methods are also discussed.

There will be during the course exercise sessions in which participants will practice presented topics.

Content: 

1. React fundamentals

• Architectural principles: React approach vs traditional app architectures

• Short overview of building Web UI with React components

• Developer Tools

2. Understanding React components

• Stateless and stateful components

• Class vs functional components

• Managing state and life-cycle of of class components

• Reusing code: composition vs inheritance

3. Functional components and React hooks

• Managing state using the State hook

• Managing life-cycle using the Effect hook

• Rules for using hooks

• Creating custom hooks

• Additional React hooks

4. Patterns for UI dynamic rendering

• List rendering

• Children props and user-defined props

• Conditional rendering

• Render props

• Higher-order components

• Routing and navigation using React Router

• Lazy loading components

5. Introduction to app state management

• The problem of app state and sharing information

• Sharing state via props

• Lifting component state up

• Using React Context API

• Using external state management frameworks

6. Data entry and validation

• Building forms using standard form elements

• Controlled vs uncontrolled components

• Data validation

7. Testing, profiling and optimizing

• Testing: tools and recipes

• React Profiler API

• Optimizing performance

Prerequisites

It is expected that participants already know the basics of HTML/CSS, JavaScript ES6 and Typescript, and have a good understanding of both object-oriented and functional programming concepts such as objects, classes, interfaces, functional composition and higher order functions. They should also be familiar with basic debugging and testing using Jest.

Target Audience

The course is aimed at developers with some practical experience with React interested in acquiring a deep understanding of the framework for building  web apps with rich UI/UX.

Learning Objectives

After the course, the participant can explain the fundamental React concepts and know when and how to apply them in practice. The participant will be able to develop front-end apps with advanced UI/UX.

Further courses

After the course, participants can continue with the upcoming course "Building Advanced Web Apps using React and its Ecosystem", which introduces advanced front-end web architectures and external React frameworks dealing with issues like complex state management and asynchronous communications with the server.