The Complete React Bootcamp 2023 (w/ React Hooks, Firebase)
The Complete React Bootcamp 2023 (w/ React Hooks, Firebase), available at $199.99, has an average rating of 3.95, with 182 lectures, 1 quizzes, based on 87 reviews, and has 632 subscribers.
You will learn about 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 Learn and practice bleeding-edge JavaScript (ES2020) This course is ideal for individuals who are Anyone who wants to develop scalable web-apps with React or Programmers who want to increase their value as web developers or People who are eager to learn how modern web-apps are working and how everything is connected or Anyone who wants to develop applications like Facebook or Twitter or Anyone who wants to become a freelancer or an independent web app developer It is particularly useful for Anyone who wants to develop scalable web-apps with React or Programmers who want to increase their value as web developers or People who are eager to learn how modern web-apps are working and how everything is connected or Anyone who wants to develop applications like Facebook or Twitter or Anyone who wants to become a freelancer or an independent web app developer.
Enroll now: The Complete React Bootcamp 2023 (w/ React Hooks, Firebase)
Summary
Title: The Complete React Bootcamp 2023 (w/ React Hooks, Firebase)
Price: $199.99
Average Rating: 3.95
Number of Lectures: 182
Number of Quizzes: 1
Number of Published Lectures: 177
Number of Published Quizzes: 1
Number of Curriculum Items: 183
Number of Published Curriculum Objects: 178
Original Price: $199.99
Quality Status: approved
Status: Live
What You Will Learn
- 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
- Learn and practice bleeding-edge JavaScript (ES2020)
Who Should Attend
- Anyone who wants to develop scalable web-apps with React
- Programmers who want to increase their value as web developers
- People who are eager to learn how modern web-apps are working and how everything is connected
- Anyone who wants to develop applications like Facebook or Twitter
- Anyone who wants to become a freelancer or an independent web app developer
Target Audiences
- Anyone who wants to develop scalable web-apps with React
- Programmers who want to increase their value as web developers
- People who are eager to learn how modern web-apps are working and how everything is connected
- Anyone who wants to develop applications like Facebook or Twitter
- Anyone who wants to become a freelancer or an independent web app developer
Created with up-to-date versions of React, React Hooks, Node.js, JavaScript, and Firebase.
——
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.
First, we will guide you through the basics of web development before jumping into React. Here we will talk about the latest JavaScript, Node.JS, Git, APIs, and essential tools to make you feel as comfortable as possible at any stage of the development process.
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?
If …
-
… 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 …
-
… you feel that you stuck doing only HTML, CSS and some JavaScript …
… then this course is definitely for you!
What do you need to succeed in this course?
-
HTML and CSS is absolutely required
-
General/basic understanding of programming or JavaScript
-
No prior experience with React or JavaScript frameworks
-
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
-
Latest and modern JavaScript (ES6 – ES2020)
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!
Course Curriculum
Chapter 1: Introduction
Lecture 1: What is This Course All About?
Lecture 2: Requirements
Chapter 2: Before We Start
Lecture 1: Introduction
Lecture 2: Installing Git + Git Bash (Windows)
Lecture 3: Change Git Bash Appearance (Windows only)
Lecture 4: Installing Git (MacOS)
Lecture 5: Installing VSCode (Windows)
Lecture 6: Installing VSCode (MacOS)
Lecture 7: VSCode Configuration & Extensions
Lecture 8: Working With Git – Part 1
Lecture 9: Working With Git – Part 2
Lecture 10: Working With Git – Part 3
Lecture 11: Installing Node.js (Windows)
Lecture 12: Installing Node.js (MacOS)
Lecture 13: Node.js & NPM – Part 1
Lecture 14: Node.js & NPM – Part 2
Lecture 15: What are ESLint and Prettier?
Lecture 16: What are Server, JSON, REST API and GraphQL?
Lecture 17: Client Side Rendering (SPA) VS. Server Side Rendering (dynamic and static)
Lecture 18: Future notes
Chapter 3: Look Through Modern JavaScript
Lecture 1: Introduction
Lecture 2: Var VS. Let VS. Const
Lecture 3: What is Array.map used for?
Lecture 4: What is Array.reduce used for?
Lecture 5: Function Declaration VS. Expression
Lecture 6: Arrow Functions and Default Function Arguments
Lecture 7: String Interpolation
Lecture 8: Object and Array Destructuring
Lecture 9: Spread and Rest Operators
Lecture 10: Async Code, Callstack, and Event Loop
Lecture 11: Async and Sync Code – Promises and Async Await
Lecture 12: ECMAScript Modules
Lecture 13: ECMAScript or JavaScript
Chapter 4: What is React Exactly?
Lecture 1: What is React?
Lecture 2: Component-based Approach
Lecture 3: Functions vs. Classes
Lecture 4: React Under the Hood
Lecture 5: Boilerplates and Project Bundlers
Chapter 5: Starting up With React (Vite) Tic Tac Toe Game
Lecture 1: Introduction
Lecture 2: Link to Assets and Github repository
Lecture 3: Creating and configuring new project with Vite
Lecture 4: Eslint and Prettier extensions
Lecture 5: What are React components and props
Lecture 6: How to apply CSS styles. Configuring SASS
Lecture 7: React State with useState hook, React events
Lecture 8: Creating game board state
Lecture 9: Add players X and O
Lecture 10: Show next player and winner messages
Lecture 11: Showing game draw
Lecture 12: Implementing game history
Lecture 13: Adding game reset button
Lecture 14: Highlighting game winner (winning combination)
Lecture 15: Final Touch. Correcting styles, adding font, inline styling
Lecture 16: Deployment to surge
Lecture 17: Summary
Lecture 18: Extra. Adding CSS background circles.
Chapter 6: Box Office Project – CRA
Lecture 1: Box Office app overview
Lecture 2: Links to assets and repository
Lecture 3: Creating the project with Create React App
Lecture 4: Cleaning up redundant files
Lecture 5: React Router v6 introduction. Creating pages
Lecture 6: Layouts and Navigation between pages
Lecture 7: Inputs. One-way and two-way data binding
Lecture 8: Form submission. Getting shows data from TV Maze API
Lecture 9: Rendering show data from TV Maze API
Lecture 10: Fix Prettier not working
Lecture 11: Radio buttons. Add search for actors
Lecture 12: Moving search form logic to its own component
Lecture 13: Displaying cards for both shows and actors
Lecture 14: Pages with dynamic content. Creating Show page
Lecture 15: Introduction to useEffect hook
Lecture 16: Fetching TV Maze API data with useEffect
Lecture 17: Custom react hooks. Extracting and reusing hook logic
Lecture 18: Data fetching with libraries. React Query
Lecture 19: Assignment. React Query on Home page
Lecture 20: Using React Query to search data on Home page
Lecture 21: Displaying information on Show page
Lecture 22: Adding Go Back button on Show page
Lecture 23: Introduction to useReducer as alternative to useState
Lecture 24: Starred shows p1. Creating state with useReducer
Lecture 25: Starred shows p2. Extract starred shows logic in a custom hook
Lecture 26: Starred shows p3. Fetch shows from the API on Starred page
Lecture 27: Assignment. Custom hook usePersistedState on top of useState
Lecture 28: Implementing custom hook usePersistedState
Lecture 29: Introduction to Styled Components. CSS-IN-JS as alternative for styling
Lecture 30: Styling the app p1. Global styles, theme, React router active link
Lecture 31: Styling the app p2. Styled Components dynamic styles based on props
Lecture 32: Styling the app p3. FlexGrid animation and useRef hook
Lecture 33: Deployment to Github Pages
Lecture 34: PWA (Progressive Web App). Service worker
Lecture 35: Fixing base URL to correctly resolve images on Github Pages
Lecture 36: Final touch. Creating favicons
Lecture 37: Summary. Gained knowledge
Instructors
-
Arash Ahadzadeh
iOS Developer & UI Designer -
Andrii Hulenko
Software Engineer
Rating Distribution
- 1 stars: 2 votes
- 2 stars: 2 votes
- 3 stars: 9 votes
- 4 stars: 21 votes
- 5 stars: 53 votes
Frequently Asked Questions
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!
You may also like
- Top 10 Video Editing Courses to Learn in November 2024
- Top 10 Music Production Courses to Learn in November 2024
- Top 10 Animation Courses to Learn in November 2024
- Top 10 Digital Illustration Courses to Learn in November 2024
- Top 10 Renewable Energy Courses to Learn in November 2024
- Top 10 Sustainable Living Courses to Learn in November 2024
- Top 10 Ethical AI Courses to Learn in November 2024
- Top 10 Cybersecurity Fundamentals Courses to Learn in November 2024
- Top 10 Smart Home Technology Courses to Learn in November 2024
- Top 10 Holistic Health Courses to Learn in November 2024
- Top 10 Nutrition And Diet Planning Courses to Learn in November 2024
- Top 10 Yoga Instruction Courses to Learn in November 2024
- Top 10 Stress Management Courses to Learn in November 2024
- Top 10 Mindfulness Meditation Courses to Learn in November 2024
- Top 10 Life Coaching Courses to Learn in November 2024
- Top 10 Career Development Courses to Learn in November 2024
- Top 10 Relationship Building Courses to Learn in November 2024
- Top 10 Parenting Skills Courses to Learn in November 2024
- Top 10 Home Improvement Courses to Learn in November 2024
- Top 10 Gardening Courses to Learn in November 2024