🚀  We just launched hackr for designers. Visit it here

Hackr.io is a programming community to find and share the best online programming courses & tutorials. Join them, it only takes 30 seconds.

Here's how it works:

share-icon

Anybody can submit a course or a tutorial

thumbs-up

Community upvotes the useful tutorials

upwards-graph

The best tutorials rise to the top

Full Stack Universal React with Redux, Node js and MongoDB (udemy.com)

Visit Tutorial
Paid Video
#8 out of total 35 React tutorials & courses

Why developers like this tutorial (one-liner reviews):

Content quality

Qualified Instructor

Video quality

Course Pace

Course depth and Coverage

Add your one-liner review here:

Tutorial Info

Session:
Self Paced
Video:
5 hours on-demand video
Certificate:
Available On Completion
Taught by:
Submitted by:
Visit Tutorial

Tutorial Details

What you'll learn

  • To develop entire "client" and "universal" web applications in React js and Redux.
  • To implement server-side rendering in React js and mantaining state in Redux
  • To build your own API in Nodejs Express and MongoDB
  • To build your own MongoDB database
  • To deploy your React App to Amazon Web Services (AWS) and to Heroku
  • To develop a Universal Shopping-cart application in React, Redux Express and MongoDB
  • To manage user sessions in Express
  • To learn how all parts in full stack javascript applications fits together
  • To use React-router to develop Single Page Applications

Requirements

  • Basic knowledge of NodeJs-Express
  • Basic knowledge of HTML
  • Basic knowledge of Javascript
  • Understanding of "state" and "props" in React

About

Description

Did you start learning React but you are struggling to grasp the most import concepts such as: Redux, server-side rendering in React or how to build your own API?

In this course you will learn:

  • how to develop scalable web applications by managing the "state" in Redux
  • how to implement Universal or Isomorphic React applications to maximise performance and SEO compliancy
  • how to build APIs with Node Express js and MongoDB
  • How to deploy your app to AWS (Amazon Web Services) or to Heroku.

Bonus material:

  • in the course you will find an eBook with all code & changes lecture by lecture!

If you want to become a professional React web developer, it is critical to master Redux and server-side rendering.

Redux allows you to manage the state in React in a convenient and flexible fashion. Without Redux, you will never be able to develop scalable apps.
Server-side rendering, it is critical for performances and SEO compliancy. Without understanding server-side rendering, you will never be able to develop commercially valuable web applications.

Initially, I will be focusing on explaining the concepts and patters in React js (MERN stack) and writing the bear minimum code to make easier for you to absorb all new notions without distraction, but later in the course you will write an entire React js Shopping-cart application from scratch.

It will give you the opportunity to consolidate all your learnings in a challenging project!

By developing an entire shopping-cart, you will be exposed to the most critical patterns in React js web development allowing you to build complex and scalable web application on your own after the course.

THIS COURSE IS NOT FOR ABSOLUTE BEGINNERS. Beside a basic knowledge of html and javascript the students must have a good understanding of “state” and “props” in React.

In principle, if you are able to write a basic “To-do” app in React, you will not encounter any problem on understanding the lectures and benefit from the course.

THE CODE IS ES6 WITHOUT SYNTACTIC SUGAR to make the code less cryptic and more readable and transparent to those who don't have much experience in javascript. If you are an experienced javascript developer, you will have no issue to adopt any syntactic sugar you wish on the fly.

You can find the entire source code in the e-book attached in the last section of the course.

Who is the target audience?
  • Someone who started learning React but finds difficult to grasp some of the critical topics to build an entire app independently
  • Someone who wants to learn server-side rendering and build Universal or Isomorphic React app
  • Someone who wants to understand most critical patterns involved on building an e-commerce application

Syllabus

Learn Redux

Goal of this course & Source Code

Why do you need Redux?

What Redux is and How React-Redux work together

Set-up a small project

Your first app in Redux

How to make CRUD operations in Redux

Immutable State and Pure Functions

How to Update and Delete in Redux

How to Combine Reducers

Create action and reducer for the Cart

How to split actions in multiple files

How to use Redux Middleware

Learn React by building a Shopping-cart

Create the first React application

Connect React Application to the Redux Store

Dispatch Actions from React

Styling the App

Shopping-cart App Structure

Create the BookItem component

Create the Books Form component

Connect Books Form component to the Store

Create the Cart - part 1

Create the Cart - part 2

Delete an item from the cart

Update quantities in the cart

Add Modal Window component to confirm purchase

How to calculate totals in the cart

Create the Form to delete books

Add the Navbar and Footer

React-router

Display a dynamic Badge on the cart

Learn how to build an API service

Set-up Node-Express to run a complex architecture

Introduction to NoSQL databases

Install MongoDB and Robomongo

CRUD Operation in MongoDB

Create Books API - POST method

Create Books API - GET method

Create Books API - DELETE method

Create Books API - UPDATE method

Connecting the Client App to the API - part 1

Connecting the Client App to the API - part 2

Connecting the Client App to the API - part 3

Set up a Reverse Proxy

How to create a persistent shopping-cart - Intro

How to create a persistent shopping-cart - part 1

How to create a persistent shopping-cart - part 2

IMPORTANT CORRECTION - connect-mongo code

Create the API to get images from the server

Create the image selector for the form

BooksForm - Button with Feedback

Complete the Client app

Capture server exceptions

How to achieve 100% SPA applcation

Learn how to make a React app Universal

Introduction to React Universal and server-side rendering

Implement Server-side rendering

Implement Universal rendering

Deploy online the local Mongo database

Set up Git for the project

Deploy the app to Heroku

AWS set up

Deploy the app to AWS

React-Router V4 Migration guidelines

Guidelines How to migrate to React-Router V4 - Client side version

Guidelines How to migrate to React-Router V4 - Universal version

E-book with full version of code "lecture by lecture"

E-book

Wanna find a programming buddy?

Learning a new programming language can be tough especially if you are a beginner in programming. Find a programming buddy and learn this tutorial in a more engaged & fun way.

Discuss this tutorial:

Ask a question or write your feedback/review of this course or tell anything to the people taking this course.

Andrew A
6 months ago

Must do course, to understand redux and how develop full stack in react. Recommended!

Pawan Kumar
5 months ago

Thanks for sharing.