🚀 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.
Anybody can submit a course or a tutorial
Community upvotes the useful tutorials
The best tutorials rise to the top
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:
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.
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.
You can find the entire source code in the e-book attached in the last section of the course.
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
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"
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.