Learning React.js with Flux

Course

Online

£ 150 VAT inc.

Description

  • Type

    Course

  • Methodology

    Online

  • Start date

    Different dates available

Create modern cutting-edge reactive applications with Flux.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 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 U.S. 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

Facilities

Location

Start date

Online

Start date

Different dates availableEnrolment now open

About this course

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

Questions & Answers

Add your question

Our advisors and other users will be able to reply to you

Who would you like to address this question to?

Fill in your details to get a reply

We will only publish your name and question

Emagister S.L. (data controller) will process your data to carry out promotional activities (via email and/or phone), publish reviews, or manage incidents. You can learn about your rights and manage your preferences in the privacy policy.

Reviews

This centre's achievements

2021

All courses are up to date

The average rating is higher than 3.7

More than 50 reviews in the last 12 months

This centre has featured on Emagister for 6 years

Subjects

  • Server
  • Works
  • Database
  • Database training
  • Teaching
  • Web
  • Project
  • Systems
  • Install
  • IT

Course programme

Starting To Do a To-Do list 5 lectures 33:10 Building an Express/Node Server 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.
  • Start the NPM
  • Install packages with NPM
  • Start an Express/Node Server
Automatically Restarting Server with Nodemon 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.
  • Add scripts to NPM
  • Set up the Nodemon
Adding a View Engine(EJS) 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.
  • Install EJS
  • Understand the basics of view engines/template systems
  • Setup an EJS view
Understanding the Basics of MongoDB 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.
  • Start up the MongoD service
  • Explore the basics of database, collection and documents
Installing and Configuring Mongoose 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.
  • Set up the Mongoose
  • Connect to mongod with Mongoose
  • Learn how to deal with connections
Starting To Do a To-Do list 5 lectures 33:10 Building an Express/Node Server 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.
  • Start the NPM
  • Install packages with NPM
  • Start an Express/Node Server
Automatically Restarting Server with Nodemon 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.
  • Add scripts to NPM
  • Set up the Nodemon
Adding a View Engine(EJS) 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.
  • Install EJS
  • Understand the basics of view engines/template systems
  • Setup an EJS view
Understanding the Basics of MongoDB 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.
  • Start up the MongoD service
  • Explore the basics of database, collection and documents
Installing and Configuring Mongoose 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.
  • Set up the Mongoose
  • Connect to mongod with Mongoose
  • Learn how to deal with connections
Building an Express/Node Server 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.
  • Start the NPM
  • Install packages with NPM
  • Start an Express/Node Server
Building an Express/Node Server 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.
  • Start the NPM
  • Install packages with NPM
  • Start an Express/Node Server
Building an Express/Node Server 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.
  • Start the NPM
  • Install packages with NPM
  • Start an Express/Node Server
Building an Express/Node Server 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.
  • Start the NPM
  • Install packages with NPM
  • Start an Express/Node Server
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.
  • Start the NPM
  • Install packages with NPM
  • Start an Express/Node Server
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.
  • Start the NPM
  • Install packages with NPM
  • Start an Express/Node Server
Automatically Restarting Server with Nodemon 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.
  • Add scripts to NPM
  • Set up the Nodemon
Automatically Restarting Server with Nodemon 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.
  • Add scripts to NPM
  • Set up the Nodemon
Automatically Restarting Server with Nodemon 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.
  • Add scripts to NPM
  • Set up the Nodemon
Automatically Restarting Server with Nodemon 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.
  • Add scripts to NPM
  • Set up the Nodemon
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.
  • Add scripts to NPM
  • Set up the Nodemon
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.
  • Add scripts to NPM
  • Set up the Nodemon
Adding a View Engine(EJS) 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.
  • Install EJS
  • Understand the basics of view engines/template systems
  • Setup an EJS view
Adding a View Engine(EJS) 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.
  • Install EJS
  • Understand the basics of view engines/template systems
  • Setup an EJS view
Adding a View Engine(EJS) 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.
  • Install EJS
  • Understand the basics of view engines/template systems
  • Setup an EJS view
Adding a View Engine(EJS) 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.
  • Install EJS
  • Understand the basics of view engines/template systems
  • Setup an EJS view
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.
  • Install EJS
  • Understand the basics of view engines/template systems
  • Setup an EJS view
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.
  • Install EJS
  • Understand the basics of view engines/template systems
  • Setup an EJS view
Understanding the Basics of MongoDB 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.
  • Start up the MongoD service
  • Explore the basics of database, collection and documents
Understanding the Basics of MongoDB 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.
  • Start up the MongoD service
  • Explore the basics of database, collection and documents
Understanding the Basics of MongoDB 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.
  • Start up the MongoD service
  • Explore the basics of database, collection and documents
Understanding the Basics of MongoDB 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.
  • Start up the MongoD service
  • Explore the basics of database, collection and documents
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.
  • Start up the MongoD service
  • Explore the basics of database, collection and documents
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.
  • Start up the MongoD service
  • Explore the basics of database, collection and documents
Installing and Configuring Mongoose 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.
  • Set up the Mongoose
  • Connect to mongod with Mongoose
  • Learn how to deal with connections
Installing and Configuring Mongoose 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.
  • Set up the Mongoose
  • Connect to mongod with Mongoose
  • Learn how to deal with connections
Installing and Configuring Mongoose 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.
  • Set up the Mongoose
  • Connect to mongod with Mongoose
  • Learn how to deal with connections
Installing and Configuring Mongoose 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.
  • Set up the Mongoose
  • Connect to mongod with Mongoose
  • Learn how to deal with connections
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.
  • Set up the Mongoose
  • Connect to mongod with Mongoose
  • Learn how to deal with connections
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.
  • Set up the Mongoose
  • Connect to mongod with Mongoose
  • Learn how to deal with connections
Integrating React as a Visual Layer 5 lectures 35:23 Packing the Client- Side Code 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.
  • Discover Webpack
  • Configure Webpack
  • Bundle with Webpack
Exposing Our Deploy Folder 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.
  • Leverage an Express feature
  • Expand the features in Express by adding different middlewares
  • Understand more about the static middleware
Transcribing Our Code to ES5 with BabeLJS The aim of this video is make webpack transcribe down our code to be ES5 with the help of Babel.
  • Make React itself build the JSX to create React applications
  • Set this up using BabelJS
Our First Render with React DOM In this video, we will render our first content from react onto our site and by that complete our setup for our react project.
  • Explore more about React, react-dom
  • Take a brief overview on JSX
Creating a React Component In this video, we build out our first react component.
  • Expand into TSX
  • Build a component
  • Bundle all the tasks that the user has submitted
Integrating React as a Visual Layer. 5 lectures 35:23 Packing the Client- Side Code 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.
  • Discover Webpack
  • Configure Webpack
  • Bundle with Webpack
Exposing Our Deploy Folder 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.
  • Leverage an Express feature
  • Expand the features in Express by adding different middlewares
  • Understand more about the static middleware
Transcribing Our Code to ES5 with BabeLJS The aim of this video is make webpack transcribe down our code to be ES5 with the help of Babel.
  • Make React itself build the JSX to create React applications
  • Set this up using BabelJS
Our First Render with React DOM In this video, we will render our first content from react onto our site and by that complete our setup for our react project 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....

Additional information

This course is targeted at JavaScript ES5/ES6 developers. In order to take this course, you should have some familiarity with React, Node.js, and NPM

Learning React.js with Flux

£ 150 VAT inc.