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.
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.
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.
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.
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.
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.
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.
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.
The aim of this video is make webpack transcribe down our code to be ES5 with the help of Babel.
In this video, we will render our first content from react onto our site and by that complete our setup for our react project.
In this video, we build out our first react component.
In this video, we will create our first child component and integrate it into our application.
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.
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.
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.
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.
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.
The aim of this video is build out the flux actions.
The aim of this video is to create the 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.
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.
In this video, we setup an Ajax manager so we can communicate with the server as we modify the addTask action.
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.
The aim of the video is to create a Mongoose schema.
The aim of this video is to save tasks as they are created.
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.
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.
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.