O'Reilly logo
live online training icon Live Online training

Learn React 16 on the Spot

Topic: Web & Mobile
Shaun Wassell

React is an incredible library for building front-end applications. This course aims to provide you with a solid foundation in creating modern web applications using the latest version of React, along with all of its latest features. You’ll start off by learning basic React syntax and the architecture of a React web application, working your way through progressively more advanced concepts until you reach a very deep level of understanding. By the end, you’ll not only have a firm grasp on what it takes to build a full-scale React application, but also the best practices to follow when doing so. This will ensure that the end result of any further React-related endeavors will be not only an application that works, but one that is highly performant and maintainable.

What you'll learn-and how you can apply it

  • Learn how to create React applications from scratch
  • Learn how components work in React, as well as how to use state and the component lifecycle
  • Use React-Router to implement effective routing in React apps
  • Build and deploy your React apps
  • Recognize good and bad patterns in React code

This training course is for you because...

  • You’re already a front-end developer and want to use React to build performant sites
  • You’re a software developer with little to no experience in web development and want to jump right into the most advanced technology for doing so
  • You’ve seen the huge number of React-related job postings and want to advance your career

Prerequisites

  • Basic knowledge of JavaScript
  • Basic knowledge of HTML and CSS

Course Set-up

Recommended Preparation

  • Video: Learn React LiveLessons, by Shaun Wassell (forthcoming)

Recommended Follow-up

  • Video: Learn React LiveLessons by Shaun Wassell (forthcoming)
  • Live Online Training: Creating Robust React App with Redux, by Shaun Wassell. Search the O’Reilly Learning Platform for an upcoming date.
  • Live Online Training: Full-Stack React: Build and Publish a Modern Web Application, by Shaun Wassell. Search the O’Reilly Learning Platform for an upcoming date.
  • Live Online Training: Google Firebase & React.js, by Shaun Wassell. Search the O’Reilly Learning Platform for an upcoming date.

About your instructor

  • Shaun is a lifelong programmer and problem-solving addict. His goal is to help people build incredible software and solve meaningful problems by mastering the art of software development. He currently works as the Head of Application Development at Starweaver Inc., but also has a lot of side gigs, including consulting, freelance development, and online education. Don’t hesitate to get in contact with him if you enjoy his materials.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Overall Introduction (5 mins)

Learn Basic React Syntax and Concepts (40)

  • Understand the Purpose and Benefits of React
  • Create and Run a React App
  • Write Your First JSX
  • Create React Components
  • Pass Props to Components
  • Render Components Conditionally
  • Display Lists of Components
  • Handle Clicks and Other Events
  • Style Components in React
  • Q&A

Learn About State and The Component Lifecycle (45)

  • Use State in Components
  • Decide Where to Put State
  • Use Lifecycle Events in Components
  • Q&A

Break (10 mins)

Learn Routing in React (35)

  • Install and Setup React-Router
  • Use URL Parameters & Query Parameters
  • Implement “Not Found” Pages
  • Redirect with React-Router
  • Navigate Programmatically
  • Q&A

Learn Common React Patterns (35)

  • Create and Manage Forms in React
  • Build a Navigation Bar in React
  • Load Data & Make Requests in React
  • Use the “Children” Prop
  • Q&A

Break (10 mins)

Learn Class-Based Components (25)

  • Differentiate Between Functional vs. Class-Based Components
  • Use State in Class-Based Components
  • Use Lifecycle Events in Class-Based Components
  • Q&A

Write Clean React Code (25)

  • Understand the Difference Between Inheritance and Composition
  • Apply the Single-Responsibility Principle in React
  • Avoid Common Anti-Patterns
  • Q&A

Break (10 mins)

Learn Advanced React Topics (30)

  • Use Context in React
  • Persist Data in React
  • Create Custom React Hooks
  • Q&A

Host React Applications (20)

  • Host a React App on Netlify
  • Host a React App on Firebase Hosting
  • Q&A

Overall Summary