Build Web Apps with React JS and Flux

Master the fundamentals of React as you develop applications supported by Flux, React Router, Gulp, and Browserify.
4.4 (1,513 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
10,725 students enrolled
$50
Take This Course
  • Lectures 73
  • Contents Video: 9.5 hours
    Other: 1 min
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2015 English

Course Description

Last Course Update: 12/27/2015. Now using React 0.14.4 (latest) and React Router 1.0.3 :)

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.

What are the requirements?

  • A Mac or PC
  • Basic Javascript knowledge

What am I going to get from this course?

  • Build amazing single page applications with React JS and Flux
  • Master fundamental concepts behind structuring React applications
  • Realize the power of building composable components
  • Be the engineer who explains how React works to everyone else, because you know the fundamentals so well
  • Become fluent in the toolchain supporting React, including NPM, Gulp, Browserify, and Watchify

What is the target audience?

  • Programmers looking to learn React
  • Developers who want to grow out of just using jQuery
  • Engineers who have researched React but have had trouble mastering some concepts

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Start Here - Dive In!
Introduction
Preview
02:10
Link to Github Repository
Article
JSX Markup In Our Views
Preview
06:39
Quick Note
Article
First Application - Basic Building Blocks
Preview
03:35
First Application - Creating a React Class
05:00
First Application - Showing Content
04:58
Section 2: Intermediate Concepts
Exploring Props - Customizing Views
05:50
Exporing Props - Wiring Up Our Data
07:46
Composition - Views Within Views
07:50
Composition - Props Selection
12:03
Lists
10:34
Section 3: Tooling
Tooling - Breaking Up Our Code
11:46
Tooling - Applying NPM
13:52
Tooling - Exporting Code
09:48
Tooling - Gulpfile
19:43
Tooling - Final Refactor
16:44
Section 4: State and Events
Exploring State and Events - Purpose of State
09:01
Exploring State and Events - State Applied
16:12
Exploring State and Events - Bringing Button Back
09:30
Exploring State and Events - Adding Content
13:20
Exploring State and Events - Toggling Visibility
10:40
Exploring State and Events - Selecting Items
11:21
Section 5: Working with Remote Data on Firebase
Firebase - Building From a New Start
04:07
Firebase - Firebase Signup and Integration
08:38
Firebase - Building Our Application Architecture
02:45
Firebase - Hooking Up Our Remote Datastore
11:06
Firebase - Scaffolding the Header
05:58
Firebase - Handling Form Inputs
11:36
Firebase - Pushing Data to Firebase
09:38
Firebase - Rendering a List of Items
14:48
Firebase - Waiting on Data Before Rendering
08:07
Firebase - Building Item Components
12:12
Firebase - Updating Data to the Remote Datastore
08:52
Firebase - Debugging Firebase Update
02:57
Firebase - Allowing Editing and Undoing
07:34
Firebase - Saving Edits
06:17
Firebase - Bulk Delete Data
07:47
Section 6: Flux and React Router
Project Overview
08:09
Imgur API Overview
09:08
Imgur API in Detail
08:13
React Router Demo
08:56
Nesting Routes
05:15
Refactor to Separate Rendering and Routing
05:57
In-App Navigation
10:44
Section 7: Flux - Downwards Data Flow
Implementing Fetch
08:22
Working with Fetch's Promise
08:52
Display a List of Topics
05:11
Fetching Data Naively
08:26
Working With Stores
08:21
Triggering Changes From a Store
09:54
Working with Actions
06:56
Recap of Flux Data Fetching
04:59
Routing with Parameters
07:33
Matching Parameters
06:56
Rendering Topics in the Header
07:31
React Router Helpers
05:04
Implementing Image Store
13:53
Section 8: Combining Flux and React Router
Refetching Data on Rerender
06:47
Scaffolding Image Previews
07:43
Filtering Image Data
09:52
Playing Videos on Mouseover
11:15
Showing a Play Button for Each Image
04:05
Adding an Image Stats Overlay
03:40
Scaffolding Image Detail
04:35
Fetching Single Records from a Store
06:15
Fetching Single Records from a Store Continued
06:45
Rendering an Image Detail
05:01
Actions With Multiple Methods
07:18
Listening to Many Changes in a Component
04:10
CSS Animations
06:48
Closing Comments and Next Steps
04:06
Section 9: One More Thing...
Still Want More React?
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Stephen Grider, Engineering Architect

Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area. With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. I teach on Udemy to share the knowledge I have gained with other software engineers. Invest in yourself by learning from Stephen's published courses.

Ready to start learning?
Take This Course