Skip to content
O'Reilly home
React

React in 4 Hours

Kickstart Your React Web Application Development Skills

This event has ended.

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 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

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
  • Example: Creating a React baseline web application

Break Length (5min)

Segment 3: Creating Components Length (45 min)

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

Break Length (5 min)

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

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

Segment 5: Creating Modular Applications Length (30 min)

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

Break Length (5 min)

Segment 6: Properties and State Length (30 min)

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

Segment 7: Component Techniques Length (30 min)

  • Component lifecycle methods
  • Effect hooks
  • Memoization
  • Example: Applying component techniques effectively

Course wrap-up and next steps

Your Instructor

  • Andy Olsen

    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.

Start your free 10-day trial

Get started

Want to learn more at events like these?

Get full access to O'Reilly online learning for 10 days—free.

  • checkmark50k+ videos, live online training, learning paths, books, and more.
  • checkmarkBuild playlists of content to share with friends and colleagues.
  • checkmarkLearn anywhere with our iOS and Android apps.
Start Free TrialNo credit card required.