O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Fundamentals of React and Flux Web Development

Video Description

This course is designed for developers who know basic HTML and CSS but who want to take their skills to the next level by building data-driven web apps - the kind of apps that can be used for products or startups and the type of apps that can interact with servers. The course is also for developers of any level who want to know and master React and Flux. Why React? Why should you learn React js instead of Angular or Backbone or Ember or Meteor? One reason is because React is incredibly minimalistic. It focuses on reusable view components. Never have to copy and paste code again with React. Then take the Reflux design architecture and mix it with React js and you have a full-stack front-end solution that is very lightweight. Frameworks like Angular do a LOT of things, are very heavyweight, and have steep learning curves. Why use a framework that gives you stuff you don't need in every project? React was created by Facebook, designed incredibly well, and makes fantastic data-driven websites. React Flux is a powerful combination. You are going to learn a lot in this course. Here are some of the topics we cover: React Components and component nesting React Component user interaction with states React Component data management with props Robust architectures with Flux and Reflux Building simple Node & Express servers Making HTTP requests and managing data in React In-line React styling with Javascript Parsing and managing JSON in React Single page applications with React Router Javascript overview Professional development practices and tips

Table of Contents

  1. React Course Overview
    1. Intro to React Course 00:01:29
  2. Free Bonus Content - Javascript Basics
    1. Javascript Resources (React pre-requisite) 00:04:05
    2. Installing NodeJs (React pre-requisite) 00:07:33
    3. Javascript Strings (React pre-requisite) 00:09:40
    4. Javascript Conditionals (React pre-requisite) 00:06:09
    5. Javascript Numbers (React pre-requisite) 00:07:38
    6. Javascript Loops & Arrays (React pre-requisite) 00:05:33
    7. Javascript Objects (React pre-requisite) 00:14:11
    8. Javascript Bind (React pre-requisite) 00:08:12
    9. NPM readline-sync (React pre-requisite) 00:05:22
  3. Introduction to React
    1. Set up Atom IDE for React development 00:03:04
    2. Installing NodeJs for React development 00:03:05
    3. Node basics & npm for React development 00:09:03
    4. Node module exports 00:05:40
    5. React tooling overview 00:07:46
    6. Building a React skeleton app with Watchify, Babelify, & Node 00:32:58
    7. Design react components 00:08:08
    8. Your first React application - Ingredients 00:37:47
    9. Bootstrap overview 00:10:44
    10. Bootstrap Grid System 00:23:04
    11. React App- Ingredients - CSS & React Inline Styling Part 1 00:19:46
    12. React App- Ingredients - CSS & React Inline Styling Part 2 00:11:07
    13. Using React without NPM 00:09:10
    14. How react works & thinking in React 00:08:56
    15. React Chrome developer tools 00:08:17
  4. Moving Forward with React
    1. Event system in React 00:04:03
    2. Multiple pages with React Router 00:22:49
    3. React Router Hash 00:06:47
    4. Problems mixing React and other frameworks (like Angular ) 00:09:00
    5. Comments in JSX & React 00:03:18
    6. Forms in React 00:28:21
    7. Forms in React Part 2 - Working with refs 00:19:45
  5. HTTP Requests, React Flux & Reflux
    1. Setting up a simple Node & Express test server for React 00:09:13
    2. How web requests work 00:17:40
    3. Using Postman to test APIs 00:06:10
    4. Javascript Bind 00:08:12
    5. HTTP Requests with Fetch 00:24:21
    6. Understanding React Flux 00:25:06
    7. A better way with React Reflux 00:05:47
    8. React & Reflux - Actions & Stores 00:20:56
    9. React & Reflux- Stores, Listeners & Triggers 00:15:17
    10. React & Reflux- Modifying data 00:18:50
  6. Putting Theory Into Practice - A Better React Developer
    1. Setting up the React project 00:05:24
    2. Creating a link hover effect on the navigation bar with State 00:38:01
    3. Building a reuseable navigation bar with React 00:11:44
    4. React Router, route params, getting updated props 00:32:58
    5. React Lead capture form with dynamic UI 00:17:41
    6. Flux, Reflux, and connecting the lead capture form in React 00:22:42