Learning React.js with Flux
0.0 (0 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.
7 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning React.js with Flux to your Wishlist.

Add to Wishlist

Learning React.js with Flux

Create modern cutting-edge reactive applications with Flux
0.0 (0 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.
7 students enrolled
Created by Packt Publishing
Last updated 5/2017
Curiosity Sale
Current price: $10 Original price: $125 Discount: 92% off
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand the new Dispatcher, Store, View model in Flux
  • Create applications with Flux and React
  • Take advantage of the newest performance enhancements in ES6
  • Setup Node/Express/MongoDB to store a to-do list
  • Configure and set up a server with Nodemon
  • Use mongoose to make a connection with our database
  • Explore the best place to configure our connection
  • Get React integrated into our workflow
  • Make the Flux application integrate with the backend
  • Remove entries from the database and update the clients using Flux
View Curriculum
  • In order to take this course, you should have some familiarity with React, Node.js, and NPM.

Flux is a web application development architecture created and used by Facebook. It fits seamlessly with React—in MVC terms, Flux is the Model and Controller to React’s View, but it actually goes much deeper than that. Flux is a new way of thinking compared to the old MVC model. Instead, it sets out a Dispatcher, Store, and View model for creating applications with much clearer data flow. Enabling you to create cleaner and more easily maintainable applications that scale better and are easier to debug.

This course starts by having a running server that connects to Mongo database with Mongoose. We will also explore more about Nodemon, express, EJS, MongoDB, and Mongoose. Then we proceed to add React to present the data sent from the server. After integrating React into our workflow, the course focuses on building some of the critical components required to create the To-Do list. Then we proceed to learn about data storage and management on the client. Once you get acquainted with Flux and React, finally, the course takes us through integrating the Flux application with our backend.

This course is a complete introduction to Flux, covering the new Flux paradigm and teaching how to create Flux and React web applications from the ground up.

About the Author

Ben Fhala discovered his passion for data visualization six years ago while he was working at Parsons in New York, in their data visualization department, PIIM. He enjoys spending most of his time learning and teaching and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world. He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

Who is the target audience?
  • This course is targeted at JavaScript ES5/ES6 developers.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
26 Lectures
Starting To Do a To-Do list
5 Lectures 32:56

Express is the go to mediator for building up servers in Node. In this video, we will get our project started by created a starting point for our server.

Preview 09:52

Nodemon is a huge time saver as it will restart our server every time we make changes to it. In this video, we will learn how to configure and set it up.

Automatically Restarting Server with Nodemon

As we have a server running its time for us to have a place to store our template of our site, in this video we will use a view engine – the EJS view engine.

Adding a View Engine(EJS)

MongoDB is where we will be storing our data of our application. In this video, we will learn about how mongoDB works by understanding and getting to know how databases, collections and documents work in mongo.

Understanding the Basics of MongoDB

The aim of this video is to use mongoose to make a connection with our database. We will explore and understand where the best place to configure our connection is as well.

Installing and Configuring Mongoose
Integrating React as a Visual Layer
5 Lectures 43:56

The aim of this video is to move our attention to the Client- Side but before we can start creating code on the client we need to setup a web packager to downgrade and bundle all of our script into a single web browser friendly file.

Preview 08:36

The aim of this video is to deploy files to be accessible to the web. To make them so, we will use expressJS’s static middleware to expose everything in our folder.

Exposing Our Deploy Folder

The aim of this video is make webpack transcribe down our code to be ES5 with the help of Babel.

Transcribing Our Code to ES5 with BabeLJS

In this video, we will render our first content from react onto our site and by that complete our setup for our react project.

Our First Render with React DOM

In this video, we build out our first react component.

Creating a React Component
Understanding React as the Visual Layer
5 Lectures 38:24

In this video, we will create our first child component and integrate it into our application.

Preview 08:40

For our tasks to actually work, we need them to be dynamically pulled from a server. The first step will be to make our tasks not deeply tied with our react application. In this video, we will start by moving our tasks into being a state.

Creating Dynamic Components

React is more than a smarter way to render things to the DOM. It’s a great way to change the way you think into building things out using components. In this video, we will create a reusable component based on our usage needs.

Thinking in a Reusable Way

The aim of this video is to complete the process of inputting data by the user. In the process, we will meet arrow functions, refs, and rest.

Adding User Initiated Events

The aim of this video is to take the users inputted data and convert it into a task by storing it into our state. By the end of this video, we will have an app that enables users to add new tasks.

Using State to Store New Task
Building the Model Layer with Flux
5 Lectures 41:47

A flux dispatcher is the only official flux element and its role is to validate that our store and actions do not communicate with each other directly. In this video, we will be introduced to stores, actions and the dispatcher.

Preview 11:51

The aim of this video is build out the flux actions.

Understanding the Flux Store

The aim of this video is to create the first action.

Creating Our First Action

The aim of this video is to test everything out and see if it works to tie everything to our component. In this video, we complete the circle where our component will come into the picture.

Connecting It All Together

After developing in theory for a few videos, we are bound to encounter a few bugs. In this video, we will walk through the process of debugging as we fix the errors created throughout the section.

Fixing Bugs
Building Out Tasks
6 Lectures 52:04

In this video, we setup an Ajax manager so we can communicate with the server as we modify the addTask action.

Preview 12:43

Now we are sending data to the server, it is time for our server to respond to that data. In this video, we will use body-parser as a middleware in express to enable us to access the data sent by the client and for now we will send it right back to the client without saving it on the server.

Using Body Parser in Express

The aim of the video is to create a Mongoose schema.

Creating a Mongoose Schema

The aim of this video is to save tasks as they are created.

Saving Task to Mongo

It’s time to connect all the dots again as we pull all the current tasks back into our client. In this video, we will practice more flux, react, mongo, mongoose and even some expressJS.

Getting All the Existing Task

Adding tasks was fun but it’s time for us to remove tasks as well. In this video, we will learn how to remove entries from our database and how to update our client with the updates using flux.

Removing a Task
About the Instructor
Packt Publishing
3.9 Average rating
7,297 Reviews
52,272 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.