4.70 (37 reviews)
☑ Build and deploy responsive and production-ready React apps from scratch
☑ Setup and develop a React app with firebase (cloud functions, cloud messaging, realtime database, storage, auth)
☑ Master React Hooks and latest React syntax
☑ Master state management with React Hooks and Context API
What is this course all about?
This course is about React - a library that helps developers to create user interfaces on the web. But React is not limited only to user interfaces, there is much more to that.
Have you ever wondered how Facebook, Twitter, or Netflix websites are built and why they don't feel like websites at all? React can answer all of that. In this course, we show how to create mobile-feel-like websites (Single Page Apps) where React is the foundation.
Then we slightly move to React with a small portion of theory. At this point, you will get to know what React is made of and how it works.
Our first project is a Tic-Tac-Toe game. Here you will get to know React basics, hooks, and core functionality. By the end of this project, you will be able to create a simple web app that shows off your strong React basics. Here you will experience the development flow of a React app in general.
The second project is a movie search web-app called Box Office. With this project, we move towards more complex React use-cases and we start working with external APIs, dynamic layout, and pages combined with different approaches for styling a React app. Here we will work with more advanced and custom React Hooks. At the end of this project, we will analyze and optimize the app with React hooks to make it even more faster and reliable. We will even turn it into a Progressive Web App that works offline!
The final project is going to be a Chat app. It will include the following features: social media logins, account management, role-based permissions, real-time data, and lots of others. In this project, we will combine React with Firebase - a backend solution in the cloud, powered by NoSQL database. You will master global state management with Context API and sharpen your knowledge of React hooks. At the final stage, we will extend the app with a custom backend in form of serverless.
All of our projects will have a user-friendly and well-designed user interface that is responsive and optimized for all devices.
Is this course exactly what are you looking for?
... you are eager to learn front-end development with React from scratch ...
... you have some experience with React, but you don't feel confident ...
... you only started to learn web development and want to move towards modern tools and technologies ...
... then this course is definitely for you!
What do you need to succeed in this course?
HTML and CSS is absolutely required
Passion to learn new things :)
After this course, you will have:
Three real-world React projects of different complexity that can be put into your resume
Total React comprehension
Experience with popular React libraries
Knowledge of how to create and deploy React apps
Knowledge of custom serverless backend and Firebase
Topics that will be covered and explained:
React basics (syntax, core concepts, theory)
Scaffolding templates (create-react-app, nano-react-app /w Parcel)
Styling of React apps (CSS, SASS, UI components library, CSS-IN-JS /w Styled components)
Conditional rendering (dynamic content and styles)
State management, local + global (/w React Hooks, Context API)
Components analysis and optimization (/w React hooks)
Complex layout management
Dynamic pages with React Router
Progressive Web Apps and service workers
Real-time subscriptions in React
Using external APIs to fetch remote data
Deployment of React apps (github pages, surge, firebase)
Serverless backend with cloud functions in node.js
Not part of React, but included:
Git, Node.js, APIs, ESLint and Prettier quick guides
Firebase (/w NoSQL realtime database, cloud functions, cloud messaging, cloud storage)
Serverless cloud computing idea and concept + explanation about docker containers
Don't just take our word for it, see what our past students had to say about this course:
"First of all, the course is really well done and very comprehensive. It covers important real-world concepts like optimizing your code with code splitting, memoizing, useCallback." - Toni S
"Great course content & prompt response to Q&A!" - R L
"Instructors are responsive, got help quickly when I needed it." - Leigham Springer-sutton
What if you stuck during the course?
Getting stuck is the worse and inevitable. At the same time it's a common thing for a developer. We understand that and we are always ready to help you out with your questions as quickly as possible.
What if you are not satisfied with this course?
We are so confident that you will love this course that we're offering a 30-day money-back guarantee! You can sign up today with zero risks.
What are you waiting for? Enroll today!
What is This Course All About?
Before We Start
Installing Git (+ Git Bash)
VSCode Configuration & Extensions
Client Side Rendering (SPA) VS. Server Side Rendering (dynamic and static)
What are Server, JSON, REST API and GraphQL?
Working With Git - Part 1
Working With Git - Part 2
What are Node.js and NPM?
What are ESLint and Prettier?
VS Code Shortcuts
Var VS. Let VS. Const
What is Array.map used for?
What is Array.reduce used for?
Function Declaration VS. Expression
Arrow Functions and Default Function Arguments
Object and Array Destructuring
Spread and Rest Operators
Async and Sync Code - Promises and Async Await
What is React Exactly?
What is React?
Functions vs. Classes
React Under the Hood
Check how good you undestand React
Starting up With React (Parcel) Tic Tac Toe Game
Scaffolding a React App With Parcel - Installing Development Dependencies.
Installing Dev Dependencies
Creating New Components & Props
Styling React Components - Our Style Structure
Creating a Game Board State - React States and Events
Component Lifecycle & Lifecycle Events
Winner Calculation - State Sharing Across Components
Adding Game History - Part 1
Adding Game History - Part 2
Highlighting Winning Combination
Styling The Entire App
Deployment to Surge
Box Office Project - CRA
Scaffolding the Project
Creating Pages in React - React Router (Part 1)
Creating Navigation Bar & Page Components
Multiple Layout Management - Creating Main Layout
Creating Search Bar - Working With an API
Displaying API Results - Custom Render Function
Adding Actors Search With Radio Buttons
Creating Preview Cards for Show and Actors
Styled-components - An Alternative for Styling
Creating Show Page - UseEffect Hook and Dynamic URLs
Displaying Loading and Error Messages - Part 2
Reducer Concept for State Management
Creating Show Page - Part 3
Creating Show Page - Part 4
Styling Show Page - Part 5
Creating Custom Hook For Data Persistence
Dynamic Styles With Styled-Components
Displaying Starred Shows
Extract any Logic you want - Custom Hook
Styling The Entire App - Part 1
Styling The Entire App - Part 2
Add Animation to Elements
Deployment to GitHub Pages
Component Optimization With Hooks
Creating a Progressive Web App (PWA)
What is Firebase?
Overview of Firebase Services
Chat Application Project
Scaffolding the Project
Create and Configure the Firebase Project
Creating Pages - Private and Public Routes
Sign-in Page - Interaction with Firebase
Creating Profile Context - Context API and Global State Management
Global Profile State Management With Context
Start Building the Sidebar and Dashboard
Responsive Sidebar Using Media Query
Creating Dashboard - Part 1
Creating Dashboard - Reusable and Editable Components (Part 2)
Creating Dashboard - Update User Nickname (Part 3)
Creating Dashboard - Link Social Media Providers (Part 4)
Creating Dashboard - Creating Avatar (Part 5)
Creating Dashboard - Uploading the Avatar to Firebase (Part 6)
Creating Dashboard - Displaying User Avatar and Names Initials (Part 7)
Add Create-Room Button and Functionality
Creating Chat Rooms Lists - Part 1
Creating Chat Rooms List - Rooms' context (Part 2)
Creating Chat Rooms List - Show rooms and use them as links (Part 3)
Creating Nested Layout for Homepage
Creating Chat Page Layout/Component
Context API Problem and a Potential Solution
Context API Problem in Practice - Creating Current Room Context
Creating Initial Chat - Top Part
Denormalizing Data - Creating Chat Bottom
Display Last Message in Room List
Working With Denormalized Data
Displaying Chat Messages
Display User Profile Data
Adding Real-time Presence - Part 1
Adding Real-time Presence - Part 2
Adding Edit Room Drawer
Role-based Access & Security Rules
Role-based Access Management
Adding Programmatical Hover With Hooks
Creating IconControl Component - Likes (Part 1)
Likes Functionality (Part 2)
Handle Delete Operation
Adding the Upload Component - Part 1
Store Uploaded Files in Database - Part 2
Display and Download Uploaded Files - Part 3
Record and Upload Audio Messages - Part 4
Display Audio and Delete File - Part 5
Group Chat Feed by Dates
Pagination and Control of Scrolled Position
Deployment to Firebase Hosting
Custom Chat Backend
Firebase Project Plan
What are Serverless and Containers?
Cloud Messaging - How is Everything Connected?
Storing Device Tokens in the Database
Adding Service Worker
Setup Cloud Functions and Node Version Manager (NVM)
Notifications Flow in our app - Types of Cloud Functions
Creating FCM Cloud Function
Fix Cloud Function Errors
Sending and Displaying Notifications Using Cloud Functions
Managing FCM Users
Key Features of React
What is the Next Move?
Summary - Knowledge you Have Gained
Your Future Moves
A very practical approach to react instead of courses that waste time on building mini apps. The instructor nails this by getting to the point. There will be a lot of places where you might have to figure out how react works on your own so a beginner might find it difficult but that's how I learnt programming. Always choose a decently simple and complicated course and in no time you figure out how things work and the instructor responds with great effort and detail for any question posed so a must buy for any one pursuing react. Even if a beginner is stuck at a lot of places, definitely buy it so that you can come back to this course to become an expert and build using best practises.
Showing installation git, node and vs code for different OS (Mac and Linux) would have been better for beginners.
First of all, the course is really well done and very comprehensive. It covers important real-world concepts like optimizing your code with code splitting, memoizing, useCallback. This is something where other courses definitely lack behind. Additionally, the projects are really nice and especially the Chat App gives a nice "real world" feel. Moreover, if you want to learn a bit about Firebase, this course has something for you as well. However, personally, I have two points of criticism: First, speed. If you are completely unfamiliar with React, you will have a hard time following at some point. I am not completely new to React, but sometimes, it was very hard to code along, especially at sections where you went "now we do this, and now we do that". I can only give students one advice here: After finishing a section, READ the code again, just go through it and try to understand the parts you did not understand, and take your time until you get a grasp of what is going on. My advice for the instructor would be, to slow down a little bit, to make it easier to follow your thoughts :p My second minor point of criticism is that some concepts could be explained a little bit more in detail. For instance, I had a hard time grasping when it makes sense to use useCallback, memo and some of the other quirks of React. Although this may not affect everyone and could just be an issue related to me. All in all, the course is really good and, as I said, very comprehensive. It will give you a very solid foundation on making your own projects! Keep it up :)
Course is well instructed but even though I am not a total beginner in react, I found it to be a little hard at times due to a little quicker pace. Don't get me wrong, course is great but I think a total beginner might struggle. The biggest plus for me would be the understanding of some key concepts that I was struggling before taking this course, for example, children prop to name one. Instructor does try his best to explain everything in a straight forward manner and it does work most of the time which is good. Video quality suffers from 720p. In the age of 4k quality videos, 1080p should be the minimum standard. Projects are good and never boring. Recommended.