Build Web Apps with React JS and Flux (2015)

Master the fundamentals of React as you develop applications supported by Flux, React Router, Gulp, and Browserify. Mastering React can get you a position in web development or help you build that personal project you've been dreaming of. It's a skill that will put you more in demand in the modern web development industry, especially with the release of Flux and ReactNative. This course will get you up and running quickly, and teach you the core knowledge you need to deeply understand and build React components. We'll start by mastering the fundamentals of React, including JSX, “props", “state", and eventing. Source code is provided for each lecture, so you will always stay up-to-date with the course pacing.

If you are new to React, or if you've been working to learn it but sometimes feel like you still don't quite 'get it', this is the React course for you! To learn React you have to understand it.

Learn how to use React's custom markup language, JSX, to clean up your Javascript code.
Learn the process of converting JSX to raw Javascript on the fly in your browser.
Master the process of breaking down a complex component into many smaller, interchangeable components.
Grasp the difference between “props" and “state" and when to use each.
Learn how to construct your own automated build process using Gulp and Browserify to automatically prepare your React code for deployment.
Use Bootstrap to get awesome-looking components.
I've built the course that I would have wanted to take when I was learning React. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.

Section 1 - Start Here - Dive In!
Lecture 1: Introduction
Lecture 2: Link to Github Repository
Lecture 3: JSX Markup In Our Views
Lecture 4: First Application - Basic Building Blocks
Lecture 5: First Application - Creating a React Class
Lecture 6: First Application - Showing Content

Section 2 - Intermediate Concepts
Lecture 7: Exploring Props - Customizing Views
Lecture 8: Exporing Props - Wiring Up Our Data
Lecture 9: Composition - Views Within Views
Lecture 10: Composition - Props Selection
Lecture 11: Lists

Section 3 - Tooling
Lecture 12: Tooling - Breaking Up Our Code
Lecture 13: Tooling - Applying NPM
Lecture 14: Tooling - Exporting Code
Lecture 15: Tooling - Gulpfile
Lecture 16: Tooling - Final Refactor

Section 4 - State and Events
Lecture 17: Exploring State and Events - Purpose of State
Lecture 18: Exploring State and Events - State Applied
Lecture 19: Exploring State and Events - Bringing Button Back
Lecture 20: Exploring State and Events - Adding Content
Lecture 21: Exploring State and Events - Toggling Visibility
Lecture 22: Exploring State and Events - Selecting Items

Section 5 - Working with Remote Data on Firebase
Lecture 23: Firebase - Building From a New Start
Lecture 24: Firebase - Firebase Signup and Integration
Lecture 25: Firebase - Building Our Application Architecture
Lecture 26: Firebase - Hooking Up Our Remote Datastore
Lecture 27: Firebase - Scaffolding the Header
Lecture 28: Firebase - Handling Form Inputs
Lecture 29: Firebase - Pushing Data to Firebase
Lecture 30: Firebase - Rendering a List of Items
Lecture 31: Firebase - Waiting on Data Before Rendering
Lecture 32: Firebase - Building Item Components
Lecture 33: Firebase - Updating Data to the Remote Datastore
Lecture 34: Firebase - Debugging Firebase Update
Lecture 35: Firebase - Allowing Editing and Undoing
Lecture 36: Firebase - Saving Edits
Lecture 37: Firebase - Bulk Delete Data

Section 6 - Flux and React Router
Lecture 38: Project Overview
Lecture 39: Imgur API Overview
Lecture 40: Imgur API in Detail
Lecture 41: React Router Demo
Lecture 42: Nesting Routes
Lecture 43: Refactor to Separate Rendering and Routing
Lecture 44: In-App Navigation

Section 7 - Flux - Downwards Data Flow
Lecture 45: Implementing Fetch
Lecture 46: Working with Fetch's Promise
Lecture 47: Display a List of Topics
Lecture 48: Fetching Data Naively
Lecture 49: Working With Stores
Lecture 50: Triggering Changes From a Store
Lecture 51: Working with Actions
Lecture 52: Recap of Flux Data Fetching
Lecture 53: Routing with Parameters
Lecture 54: Matching Parameters
Lecture 55: Rendering Topics in the Header
Lecture 56: React Router Helpers
Lecture 57: Implementing Image Store

Section 8 - Combining Flux and React Router
Lecture 58: Refetching Data on Rerender
Lecture 59: Scaffolding Image Previews
Lecture 60: Filtering Image Data
Lecture 61: Playing Videos on Mouseover
Lecture 62: Showing a Play Button for Each Image
Lecture 63: Adding an Image Stats Overlay
Lecture 64: Scaffolding Image Detail
Lecture 65: Fetching Single Records from a Store
Lecture 66: Fetching Single Records from a Store Continued
Lecture 67: Rendering an Image Detail
Lecture 68: Actions With Multiple Methods
Lecture 69: Listening to Many Changes in a Component
Lecture 70: CSS Animations
Lecture 71: Closing Comments and Next Steps