React JS and Flux Web Development for Beginners

The comprehensive guide to building professional web apps with Facebook's React & Flux

4.5
(675 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.

How taking a course works

Discover

Learn

Master

About This Course

Published 12/2015
English

Course 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

What are the requirements?

This React course can be taken on Windows, Linux, or OSX (Mac)

What am I going to get from this course?

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)

What 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

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.

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.

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.

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.

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.

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

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.