O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Hands-on Web Development with React

Video Description

Boost your JavaScript skills by building a real-world SPA with React

About This Video

  • Dive into React right away and create real-world interfaces
  • Build a fully-featured Single-Page Application with CRUD operations, routing, and multi-role systems
  • Master advanced patterns based on functional programming concepts

In Detail

The best way to explore React is to dive in, build realistic interfaces, and unravel its secrets one by one. This video course is designed to take you on a journey from a fascinated newbie to an expert in advanced concepts and design patterns.

You will work on an SPA project from start to finish and learn how to implement features and interfaces based on real-world requirements. Facing every challenge head-on, you will slowly dissect React and expose its features. Each section will take you through one web development feature with React. You will write components that are maintainable, reusable, stylish (based on CSS-in-JS concepts), and easy to compose. You will tie together all the concepts by turning your small React app into a fully featured Single-Page Application. You will also understand how to add routing, networking, and session management to your project.

By the end of the course, you will be well on your way to becoming a React expert, armed with strong fundamentals and clear conceptual knowledge of advanced patterns.

The code bundle for this video course is available at: https://github.com/PacktPublishing/Hands-on-Web-Development-with-React

Table of Contents

  1. Chapter 1 : Get a Head Start By Creating a React App
    1. The Course Overview 00:05:07
    2. What Is React Anyway? 00:07:26
    3. Using Package Managers and the Command Line 00:04:47
    4. Your First React App 00:04:21
    5. Understanding the Basis of the CRA Magic 00:05:03
    6. React, JSX, and Your First Component 00:08:20
  2. Chapter 2 : Building Components with React
    1. Creating a Reusable List Component 00:10:54
    2. Forms, Inputs, and Handling Events 00:12:51
    3. Understanding Local State in React 00:09:03
    4. Validating User Input 00:06:55
    5. Examining Code with React Developer Tools 00:04:25
  3. Chapter 3 : Understanding the Core Concepts
    1. Understanding Lifecycle Methods by Example 00:12:24
    2. Prop Drilling and Lifting State 00:08:29
    3. Type Checking with PropTypes 00:07:50
    4. Reconciliation and the Virtual DOM 00:07:13
    5. Functional (Stateless) Components 00:06:26
  4. Chapter 4 : Crafting Styled Components
    1. Styling React Components with Good Ol‘ CSS 00:04:42
    2. Why is CSS-in-JS Growing in Popularity? 00:05:16
    3. Getting Started with Styled Components 00:07:21
    4. Modern Layouts with Flexbox 00:05:21
    5. Working with Animations 00:03:35
    6. Building Dynamic Themes 00:06:05
  5. Chapter 5 : Building a Full React SPA
    1. Routing with React Router 00:08:53
    2. Working with an API 00:05:33
    3. Be Offline-Ready with Mocked APIs 00:08:46
    4. Adding a Login System to Our App 00:07:46
    5. Session Management 00:06:45
  6. Chapter 6 : Multi-Role SPAs with React
    1. Adding Public Content 00:11:28
    2. Handling Different User Roles in Our System 00:08:46
    3. Not Just Routes: Granular Feature Control! 00:11:12
    4. Working with Third-Party Libraries 00:06:05
    5. Session Management 00:04:11
  7. Chapter 7 : Advanced Patterns and Concepts
    1. Functional Programming: You’re Already Doing It! 00:09:13
    2. Higher Order Components 00:03:19
    3. It’s Just Functions! 00:06:05
    4. Simple Component Testing with Jest 00:04:17
    5. Safeguard Your App with Snapshot Tests 00:05:14
    6. Where to Go From Here? 00:03:35