Learning React.js with Flux [Video]

Preview in Mapt

Code Files

Learning React.js with Flux [Video]

Ben Fhala
Friday, March 31, 2017

Create modern cutting-edge reactive applications with Flux

Quick links: > Table of contents > What will you learn?

Mapt Subscription

FREE

€29.73/m after trial

Video

€9.66

RRP €141.59

Save 93%

What do I get with a Mapt Pro subscription?

Unlimited access to all Packt’s 5,000+ eBooks and Videos
Early Access content, Progress Tracking, and Assessments
1 Free eBook or Video to download and keep every month after trial

What do I get with an eBook?

Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the Mapt reader

What do I get with Print & eBook?

Get a paperback copy of the book delivered to you
Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the Mapt reader

What do I get with a Video?

Download this Video course in MP4 format
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the Mapt reader

€0.00

€9.66

€29.74 p/m after trial

RRP €141.59

Subscription

Video

Start 14 Day Trial

Frequently bought together

Learning React.js with Flux [Video]

€ 141.59

€ 9.66

Learning React.js with Flux [Video]

Mar 2017

3 hours and 29 minutes

€ 9.66

ReactJS and Flux: Learn By Building 10 Projects [Video]

€ 66.62

€ 9.66

ReactJS and Flux: Learn By Building 10 Projects [Video]

Nov 2017

11 hours and 2 minutes

€ 9.66

Buy 2 for €19.32
Save €158.74

Add to Cart

Video Details

ISBN 139781787284449

Course Length3 hours and 29 minutes

Video Description

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.

Style and Approach

This very carefully modulated course will take you every step of the way through building modern web applications using Flux and React. It is a thorough and methodical course, not skipping over technologies or assuming knowledge. It is also very practical, with full examples of the technologies used along the way.

Starting To Do a To-Do list

Building an Express/Node Server

Automatically Restarting Server with Nodemon

Adding a View Engine(EJS)

Understanding the Basics of MongoDB

Installing and Configuring Mongoose

Integrating React as a Visual Layer

Packing the Client-Side Code

Exposing Our Deploy Folder

Transcribing Our Code to ES5 with BabeLJS

Our First Render with React DOM

Creating a React Component

Understanding React as the Visual Layer

Building a Baseline Task Component

Creating Dynamic Components

Thinking in a Reusable Way

Adding User Initiated Events

Using State to Store New Task

Building the Model Layer with Flux

Starting with a Dispatcher

Understanding the Flux Store

Creating Our First Action

Connecting It All Together

Fixing Bugs

Building Out Tasks

Making Our Actions Async

Using Body Parser in Express

Creating a Mongoose Schema

Saving Task to Mongo

Getting All the Existing Task

Removing a Task

What You Will 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

Authors

Ben Fhala

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 is the owner of the online video training school, 02geek.com, and an Adobe ACP. 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.

Starting To Do a To-Do list

Building an Express/Node Server

Automatically Restarting Server with Nodemon

Adding a View Engine(EJS)

Understanding the Basics of MongoDB

Installing and Configuring Mongoose

Integrating React as a Visual Layer

Packing the Client-Side Code

Exposing Our Deploy Folder

Transcribing Our Code to ES5 with BabeLJS

Our First Render with React DOM

Creating a React Component