React in Motion
Zac Braddy
  • Course duration: 2h 17m
    Estimated full duration: 4h
    27 exercises
  • MEAP began October 2017
  • Publication in January 2018 (estimated)
React.js is a game-changer. This powerful web framework reinvents the way you create web UI, making it possible to build responsive browser-based applications with flowing, flicker-free screens. The React in Motion liveVideo course gets you up and running with React just as smoothly. As you work through the efficient crystal-clear tutorials from experienced React developer Zac Braddy, you'll learn the ins and outs of React development, essential techniques for working with reactive applications, and handy code reuse techniques that will save you time and effort!

In this liveVideo, you'll start with the fundamentals of React, as you build your first application. You'll learn how to set up the perfect build environment, build your own components, make asynchronous calls to third party APIs, efficiently test, debug, and then finally deploy your finished reactive applications!
Table of Contents detailed table of contents

What is React and why do we like it

React in Motion

Ramping up with React

Overview of tools

Create-React-app: Overview and History

Installing and Running create-react-app

Building a Hello World Component

Componentised UIs: Intro & Overview

What is a Component?

Using props

Discovering PropTypes

Using State

Basic Patterns: Presentation & Container Components Pattern

The culture of reuse in the React ecosystem

React Lifecycle Methods

Building the app’s first component

The render function

The shape of the data we’ll be receiving

Mocking up static data for display in our component

Showing the working component

Adding more components to our app and making them communicate

Introduction to the implementation container and presentation components

Build a component that will represent a list of the components built in Unit 4

Introduction to the implementation of props

Introduction to prop types

Add container component above the list and add a search input box and button

Make it filter the list for demonstration purposes for now

Introduction to the implementation of state

Create state based paging on the list

Hooking up the sample app to the spoonacular APIs

Introduction to isomorphic fetch

Pull in isomorphic fetch to the project

Hook up the button to make calls to the spoonacular APIs on click (output to console to begin with)

Loading the results of the API call into state on the main App container

Consolidating the lessons learned by adding functionality to the App

Add a component for displaying recipes found

Refactor the current app component into its own component

Clicking items on the list produces API calls

Build a button to go back to the list

Where from here? What other tech could I use to improve this app?




Hosting the React app (Firebase or Heroku)

About the subject

React is a JavaScript library developed by Facebook for creating clean web UI in applications where data and graphics change frequently. React is more lightweight than similar frameworks like Angular and Ember because React only handles the view —the visible portion of the application. React partners with a rich ecosystem of technologies that you can mix and match to build a full stack tailored to your specific needs. React is a high-demand skill, so there's no better time to get started!


Designed for front-end and full-stack web developers with a basic understanding of ES6 JavaScript, HTML and CSS. Knowledge of promises in JS and Virtual DOM is helpful, but not required.

What you will learn

  • The fundamentals and best practices for working with React
  • Setting up the perfect build environment for your React projects
  • Constructing components and basic patterns
  • Making asynchronous calls to third party APIs
  • Building your first React application

About the instructor

Zac Braddy is a full stack developer whose career has seen him working with almost every tech you can think of. He has blogged extensively about React and maintains a popular YouTube channel on React.

Manning Early Access Program (MEAP) Watch raw videos as they are added, and get the entire course, complete with transcript and exercises, when it is finished.
MEAP liveVideo $59.99