React and Flux Web Development for Beginners
4.4 (790 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.
8,465 students enrolled
Wishlisted Wishlist

Please confirm that you want to add React and Flux Web Development for Beginners to your Wishlist.

Add to Wishlist

React and Flux Web Development for Beginners

The comprehensive guide to building professional web apps with Facebook's React & Flux
4.4 (790 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.
8,465 students enrolled
Created by Mark Price
Last updated 3/2017
English
Current price: $10 Original price: $100 Discount: 90% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 11 hours on-demand video
  • 14 Articles
  • 12 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build reusable web components with React & flux
  • Build simple Node & Express servers to work with React
  • Use Flux & Reflux to manage your data in React
  • Make HTTP requests in React & Flux
  • Build React websites that can work with data (ie for startups or products)
View Curriculum
Requirements
  • This React course can be taken on Windows, Linux, or OSX (Mac)
Description

React & Flux Course Description

Welcome to React and Flux Web Development for Beginners.

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.

React & Flux Course Content

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


Who is the target audience?
  • If you know basic HTML, CSS, and Javascript then this React course is for you
  • If you are an advanced developer but don't know Javascript you will get by just fine in this React course
  • If you have no HTML or CSS experience you should learn those first before taking this React course
  • If you want to move away from jQuery then take this React course
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 63 Lectures Collapse All 63 Lectures 11:02:46
+
React Course Overview
2 Lectures 01:53

An overview of the specific subjects and technologies we will be covering in this course

Preview 01:38

How to get free live help & other cool stuff
00:15
+
Free Bonus Content - Javascript Basics (React pre-requisites)
10 Lectures 01:11:32

Learn where to go to get help when you need to figure something out with Javascript. This is a React pre-requisite.

Javascript Resources (React pre-requisite)
04:23

How to install Node Js for Javascript development. This is a React pre-requisite.

Installing NodeJs (React pre-requisite)
07:50

Learn the basics of programming Strings in Javascript.This is a React pre-requisite.

Javascript Strings (React pre-requisite)
09:58

Learn the basics of programming conditionals through Javascript. This is a React pre-requisite.

Javascript Conditionals (React pre-requisite)
06:29

Learn how to work with Floats and Integers through Javascript numbers. This is a React pre-requisite.

Javascript Numbers (React pre-requisite)
07:54

Learn about loops and arrays through Javascript programming. This is a React pre-requisite.

Javascript Loops & Arrays (React pre-requisite)
05:51

Learn about powerful Javascript objects and when to use them. This is a React pre-requisite.

Javascript Objects (React pre-requisite)
14:35

Learn the importance of Bind and when and when not to use it. This is a React pre-requisite.

Preview 08:32

Get a taste of the Node Package Manager (NPM) and learn how to use it. This is a React pre-requisite.

NPM readline-sync (React pre-requisite)
05:40

Exercise - Node Calculator (React pre-requisite)
00:20
+
Intro to React
22 Lectures 03:24:55

Learn how to get Atom set up for React and JSX development. You don't have to use Atom as your IDE, but in case you don't know how to support React I go over the IDE that I will be using in this course.

Set up Atom IDE for React development
03:21

If you have this error on Mac just do this in terminal:

ln -s /Applications/Atom.app/Contents/Resources/app/atom.sh /usr/local/bin/atom

Mac Error: -bash: atom: command not found
00:06

Learn how to install Node Js for React development

Installing NodeJs for React development
03:24

Learn the basics of Node Js by interacting with the node shell and how to work with the node package manager (npm) in preparation for working with React

Node basics & npm for React development
09:24

Learn how to import your own Node modules in preparing for working with React

Node module exports
06:01

Master the basics of working with multiple files in Node so you can build robust React apps

Exercise: Working with multiple files in Node
00:23

We will cover the tools we will be using and what each tool does - namely Node NPM packages react, react-dom, babelify, babelify-react-preset, browserify, watchify, and babel.

React tooling overview
08:03

We are going to build a skeleton project template using Watchify, Babelify, Node, React, React DOM, and React Babelify Preset. This is called the CommonJS method in React and is the project setup that Facebook uses and recommends.

Preview 33:28

Build your very own React skeleton app

Exercise: Your own skeleton app
00:08

We briefly cover how you should start designing and thinking about your web apps in the "React Way" by using Components and modularization.

Designing your React app with Components
08:26

Learn how to build a simple list application with React, HTML, Javascript, and the CommonJS method with Node. You could consider this React for beginners.

React App: Your first React application - Ingredients
38:03

Learn how Bootstrap works and what you'll need to use it for React development. We also talk about some of the Bootstrap basics.

Bootstrap Overview
11:04

Get down and dirty with the Bootstrap grid system. I go in-depth on how to to properly lay out web apps with the Bootstrap grid system. We also talk about how to support phones and tablets with Bootstrap - responsive web design.

Bootstrap Grid System
23:23

You will learn how to use CSS and Bootstrap with React

React App: Ingredients - CSS & React Inline Styling Part 1
20:02

We talk about how to use React's inline styling to style your components in Javascript without having to write any CSS! This is especially important if you are creating reusable React components.

React App: Ingredients - CSS & React Inline Styling Part 2
11:22

You will use Components, In-line styling, Bootstrap Panels, and the Bootstrap grid system to build a simple website. If you don't want to use Bootstrap use your favorite framework or your own CSS

Exercise: Components, panels, and the grid
00:25

Student solution for the exercise.

Exercise Student Solution
00:05

Learn how to write JSX & React code inline in your HTML files

Using React without NPM
09:30

Let's change the way we think about approaching web development. If we want to use React we need to start thinking in the React way. In this video we talk about how to approach a React project.

How react works & thinking in React
09:12

Let's get setting up React burned into your brain permanently.

Exercise: React project skeleton from memory with Node
00:09

Learn how to use the official React developer tools for Chrome and Firefox

React Chrome developer tools
08:35

Important notes about React
00:18

A quiz that covers the basics of React that we covered in this section

Quiz: React Basics
7 questions
+
Moving Forward With React
10 Lectures 01:37:58

Learn about how events work in React and what events are available for you to use

Event system in React
04:24

Learn how to use React Router to have multiple pages within a single page application

Multiple pages with React Router
23:13

Learn how url hashing works with React Router

React Router hash
07:08

Build a website about the news going on in your country with React and React Router

Exercise: Country News
01:00

Learn about some of the issues that might spring up when using React with other frameworks and how to solve them

Problems mixing React and other frameworks (like Angular)
09:20

Learn how to write comments inside of your JSX for your React apps

Comments in JSX & React
03:43

Learn how to build reusable forms in React with validation built-in

Forms in React
28:37

Continue working on your form and learn about using refs to get your container components to talk to their children components

Forms in React Part 2 - Working with refs
20:05

Lets build a calculator with React

Exercise: Simple React calculator
00:21

Fantastic Student Solution using Material Design

Exercise React Student Solution
00:06
+
HTTP Requests, React Flux & Reflux
13 Lectures 02:36:08

Learn how to set up a Node and Express server that can provide mock data for your React application

Setting up a simple Node & Express test server for React
09:35

Learn how the Internet works with Clients and Servers and HTTP requests for your React and Flux apps

How web requests work
18:02

Learn how to use the Postman tool to hit APIs so you don't have to write a bunch of code first in your React applications

Using Postman to test APIs
06:06

Learn the importance of Bind and when and when not to use it. This is especially important when working with promises in React

Javascript Bind
08:32

You'll learn how to use the Fetch framework to make HTTP requests with React. We also play around with our Node and Express server.

HTTP Requests with Fetch
24:42

You are going to use an online API service to build a Weather component/app

Exercise: Weather App API With React
00:27

Student Solution to the Weather App API

Exercise React Student Solution
00:05

An in-depth look into the Flux architecture. Flux can be highly complex so I break it down into simple terms and show you some example code so you can see the benefit of using Flux in your React applications.

Preview 25:30

Get an insight and overview into how React and Reflux work together to reduce the complexity of manually implementing Flux

A better way with React Reflux
06:05

Learn how to implement Actions & Stores with React and Reflux making Flux much easier to digest

React & Reflux - Actions & Stores
21:12

Learn how to set listeners in your React components so data automatically updates when it changes via Reflux trigger

React & Reflux: Stores, Listeners & Triggers
15:33

In this lesson we'll add an input field and make a post request to the server. You'll learn how to trigger data changes in your React app

React & Reflux: Modifying data
19:06

You are going to create a Pokedex with React and Flux. This exercise will be time consuming and will not be easy. It will help you master thinking in React.

CONTEST

The student who delivers to me the best implementation of this project will receive an official shout out from me an have their React course permanently displayed/referenced in the Devslopes React Course.

React Pokedex
01:12
+
Putting Theory Into Practice - A Better React Developer
6 Lectures 02:10:28

Time to set up our React web app for development

Setting up the React project
05:41

Learn how to make a reuseable navigation bar with Bootstrap and React

Building a reuseable navigation bar with React
38:19

Learn how to use React state to handle hovering on navigation bar links

Creating a link hover effect on the navigation bar with State
12:01

We implement React Router into our project. You also learn a few new things such as React Router Index Route and how to use route parameter to pass data through a url. Lastly we'll talk about componentWillReceiveProps and when to use it

React Router, route params, getting updated props
33:18

In this video we demonstrate the power of reuseability and React when we drop in our previously built lead capture form. We also make some modifications in preparation for implementing the Flux and Reflux architecture.

React Lead capture form with dynamic UI
18:03

We will add Reflux to our project. Then we will create a server with Node and Express that has an endpoint to take email subscribers. We then connect our lead capture form to the server.

Flux, Reflux, and connecting the lead capture form in React
23:06
About the Instructor
Mark Price
4.5 Average rating
20,691 Reviews
104,159 Students
15 Courses
Unity 3D Android iOS 10 Swift 3 & React Teacher

I am a veteran mobile developer having built over 57 mobile apps for iOS and Android, and I've also build multiple Unity 3D games, including Call of Duty Ghosts mobile. 

I also spend most of my days now as a professional engineering instructor - changing the lives of students throughout the world - helping them make amazing salaries as engineers.

My passion is helping people reveal hidden talents and guide them into the world of startups and programming. I currently am teaching iOS 10, Apple TV & tvOS, React & Flux web development, Objective-C, Swift 3, Android, Javascript, Node, and Java. I also teach Unity 3D game development.