O'Reilly logo
live online training icon Live Online training

React in 4 Hours

Kickstart Your React Web Application Development Skills

Andy Olsen

This training will help you take your first steps in React web application development. You’ll learn about the tools you need to create and build React apps and then see how to create user interface components using various techniques. You’ll also learn how to aggregate components to create composite web pages and how to manage state as the user moves from one component to another.

Andy Olsen, experienced trainer and author, provides labs so you can follow along and get the experience you need. Andy will provide full source code and solutions on GitHub, plus bonus materials you can take away for additional exploration and added value.

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

  • React architectural concepts
  • Creating components
  • Using JSX
  • Creating modular applications
  • Managing properties and state
  • Using component techniques

This training course is for you because...

  • You’re a front-end developer and you want to start using React to create lean and mean web applications
  • You have experience with another front-end frameworks such as Angular or Vue.js, and you want to learn how React is different

Prerequisites

  • Familiarity with ECMAScript 6 or above
  • Experience with HTML and CSS

Course Set-up

Recommended Preparation

Recommended Follow-up

About your instructor

  • Andy is a freelance consultant, instructor, and developer with more than 30 years of experience in IT. Andy began his professional career as a C/C++ developer and morphed into Java, C#, and other languages as the years and decades passed by. Andy is actively involved in a wide range of technologies including full stack development, cloud native applications, data science, and more. Andy is passionate about technology education and runs training courses around the world across diverse market sectors.

Schedule

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

Segment 1: Getting Started with React Length (10 min)

  • What is React?
  • Characteristics of React
  • Tooling up
  • React and ECMAScript 6++

Segment 2: Creating a React Web Application Length (50 min)

  • Creating a simple React application
  • Creating multiple React elements
  • Creating multiple React elements from data
  • Creating React elements using ReactDOMFactories
  • Lab: Creating a React baseline web application

Break (5 min)

Segment 3: Creating Components Length (45 min)

  • Overview of React components
  • Creating components using inheritance
  • Creating functional stateless components
  • Creating components using factories
  • Lab: Adding components to the web application

Break (5 min)

Segment 4: Creating Elements using JSX Length (30 min)

  • Overview of JSX
  • Understanding JSX syntax
  • Lab: Using JSX in the web application

Segment 5: Creating Modular Applications Length (30 min)

  • The need for modularity
  • Understanding Webpack
  • Lab: Creating an application using Webpack

Break (5 min)

Segment 6: Properties and State Length (30 min)

  • Specifying types for properties
  • Working with ES6 classes
  • Working with stateless functional components
  • Lab: Example application with properties and state

Segment 7: Component Techniques Length (30 min)

  • Component lifecycle methods
  • Practical use of lifecycle methods
  • Optimizing UI updates
  • Accessing child content in a component
  • Lab: Applying component techniques effectively