O'Reilly logo
live online training icon Live Online training

React: Beyond the Basics

Tools and techniques to make your second React app better than your first

Samer Buna

Join expert Samer Buna to learn the skills you need to move beyond the basics and develop full stack applications using React and its surrounding ecosystem of tools. In just six hours spread over two consecutive days, you’ll explore all things components—creating reusable components and testing them—and gain hands-on experience with state and route management with Redux and server-side rendering.

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

By the end of this live, online course, you’ll understand:

  • What is needed to build a maintainable and scalable React application
  • Advanced React concepts, such as components lifecycles, higher-order components, state management, working with routes, and sharing code with the server

And you’ll be able to:

  • Create a full stack React application
  • Use state containers like Redux
  • Work with strong types and immutable data
  • Answer common questions that might be asked in an interview for a senior-level React position

This training course is for you because...

  • You’re a JavaScript developer familiar with the basics of React components and rendering who wants to take the next step toward becoming an experienced React developer.
  • You currently work on another frontend framework (such as Angular or Ember), and you want to learn about React so that you can compare and contrast them.

Prerequisites

  • A working knowledge of modern JavaScript (ES2015 features, objects, arrays, functions, classes, closures, loops, etc.)
  • A basic understanding of React (creating components, rendering components, props, state, etc.)

Recommended preparation:

Emerging JavaScript” (chapter in Learning React)

Welcome to React” (chapter in Learning React)

Pure React” (chapter in Learning React)

Learn JavaScript (tutorial)

Basics of React.js (tutorial)

About your instructor

  • Samer Buna is a polyglot coder with master's degrees in management and information security. He has years of practical experience in designing, implementing, and testing software, including web and mobile applications development, API design, functional programming, optimization, system administration, databases, and scalability. Samer has worked in several industries including real estate, government, education, and publications. Samer has also authored several technical books and online courses about Node.js, React.js, GraphQL, and Ruby on Rails. He is passionate about everything JavaScript, and he loves exploring new libraries. You can follow his latest work over at jsComplete.com and EdgeCoders.com, and on Twitter @samerbuna.

Schedule

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

Day 1

Reusable and testable components (50 minutes)
- Lecture and exercise: Best practices for writing reusable and testable components

Break (10 minutes)

React internals (40 minutes)

  • Lecture and exercise: Advanced React concepts, including the reconciliation algorithm, lifecycle methods, and the context feature

Break (10 minutes)

Requiring modules (40 minutes)

  • Demonstration and exercise: Node’s global object and how the require module actually works in Node

Integrations with the DOM (30 minutes)

  • Demonstration and exercise: Working with and around the browser’s DOM API

Day 2

Higher-order components (HOCs) and immutable structures (40 minutes)

  • Lecture and exercise: HOCs and immutable data concepts

Redux and why we need it (60 minutes)

  • Lecture and exercise: How to use the Redux pattern and why it’s needed

Routing and server-side rendering (60 minutes)

  • Demonstration and exercise: How to do frontend and backend routing with React and how to server-render the content of a React application

Conclusion (20 minutes)

  • Short quiz to assess understanding
  • Q&A