PAPA React presents.. Zero to Full Stack Hero. It's NOT just another COURSE. It's the world's BEST COMMUNITY. From learning the Basics of Web Development to Mastering React!
Zero to Full Stack Hero
101h 29m 59s
English
Paid
REACT BASICS 101
Its what you all have been asking for!
WEB DEV ESSENTIALS
If you're starting from absolute ZERO, we got you! We are going to cover HTML, CSS, Javascript and a tonne of extra's that will propel you into the world of web development!
CSS MASTERY
Flexbox, CSS Grid, Bootstrap, Material-UI + SO MUCH MORE to make your website a looker and the next big hit!
THE COMPLETE REACT GUIDE
EVERYTHING in React. We got you covered. Even TESTING!
REDUX FOR DUMMIES
If there is one skill you NEED to land the frontend job, it's REDUX.
SERVER SIDE RENDERING FOR NOOBS
SSR made simple!
THE FIREBASE GUIDE
Think of the power of the Sun... Yep Firebase is THAT powerful and I'm going to teach you how to not get burnt and succeed with it!
REACT NATIVE 101
Building iOS & Android apps?
We got you covered!
NODE.JS & EXPRESS
The ultimate backend bromance. We teach it all. EVEN STRIPE!
TYPESCRIPT FOR DUMMIES
Languages like Java, C#, Swift are all considered strongly-typed languages, now Javascript can be one too. Master the superset and drastically reduce the bugs in your app today!
THE GRAPHQL GUIDE
Mastering GraphQL will let you tap into you data like never before... oh, and it'll most likely result in a sweet pay rise!
THE MERN GUIDE
The Number 1 stack for a reason!
BONUS CONTENT!
My mission is to deliver an UNFAIR amount of value... YES you can expect more and more content for the foreseeable future!
About the Author: PAPA React (Sonny Sangha)
PAPA React (papareact.com) is the paid course platform of Sonny Sangha, a UK developer behind the popular Sonny Sangha YouTube channel — known for long-form project-based clones of well-known applications using the modern React / Next.js stack with Firebase and the surrounding tooling.
The CourseFlix listing carries Zero to Full Stack Hero — a comprehensive full-stack curriculum covering the modern React / Next.js stack, Firebase as the back-end, the styling layer (Tailwind CSS), and the deployment workflow for shipping real applications.
Material is paid and aimed at developers learning the full-stack JavaScript ecosystem through complete project builds. For broader content, see CourseFlix's Full-Stack Web Development and Firebase category pages.
Watch Online 63 lessons
0:00
/ #1: Introduction to React
All Course Lessons (63)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction to React Demo | 10:42 | |
| 2 | Component Based Design | 09:05 | |
| 3 | Create React App | 10:10 | |
| 4 | VS Code Extensions | 11:21 | |
| 5 | JSX Introduction | 11:04 | |
| 6 | BEM Naming Convention | 12:41 | |
| 7 | Class Based vs Functional Based Components | 09:35 | |
| 8 | Introduction to State | 17:22 | |
| 9 | Introduction to Props | 17:01 | |
| 10 | Styling Components | 15:32 | |
| 11 | Creating Our First Input Form | 13:45 | |
| 12 | Rules of Hooks | 18:22 | |
| 13 | The useEffect Hook | 22:20 | |
| 14 | Building Our First Custom Hook & How to use a useRef! | 21:43 | |
| 15 | Introduction to Web Dev Essentials | 05:59 | |
| 16 | Extensions you NEED to install right now! | 11:07 | |
| 17 | HTML Introduction and Document Layout | 14:14 | |
| 18 | Tags and Attributes | 11:33 | |
| 19 | Adding Links and Images | 16:39 | |
| 20 | Lists & Tables | 16:40 | |
| 21 | An Introduction to Divs | 06:59 | |
| 22 | Classes & ID's | 10:28 | |
| 23 | Span & Inline | 06:38 | |
| 24 | Introduction to Storybook - Image Optimization in Next.js | 02:33:37 | |
| 25 | Getting Started with Tailwind CSS - Tailwind JIT - Dark Mode with Local Storage | 03:15:48 | |
| 26 | Introduction to CSS and Using Dribble Design with Tailwind CSS by AVNEESH AGARWAL | 02:19:41 | |
| 27 | JavaScript: Difference between const, var and let - Loops: while and for | 19:51 | |
| 28 | JavaScript: Creating A Console Game (Thinking Outside The Box) by Ben Elferink | 16:04 | |
| 29 | JavaScript: Having Fun With Math to Animate | 42:15 | |
| 30 | JavaScript: JavaScript Interview Questions | 45:25 | |
| 31 | Props & State - Class and Functional Components | 04:25:15 | |
| 32 | React Hooks Fundamentals - React Hook Forms - CSS Modules | 04:10:14 | |
| 33 | Recoil Mastery - Atoms / Selectors - Recoil vs Redux - | 03:11:01 | |
| 34 | Built a Weather App - APIs - String Manipulation - useRef | 03:30:15 | |
| 35 | Google Sheets API + React - React-hook-form - Form Validation | 03:02:59 | |
| 36 | Intro to Framer Motion - JS Animations - Portfolio Ideas | 03:06:21 | |
| 37 | Using Charts in React (ApexCharts) - react-firebase-hooks | 03:03:11 | |
| 38 | Creating a React app with Webpack and Babel by LUKA RESETAR | 02:09:54 | |
| 39 | Tasty Recipes of React by SHRADDHA HINGE | 02:10:03 | |
| 40 | 2D Game named Breakout made in React: Implementing 3rd Party Library called Phaser | 01:19:25 | |
| 41 | Using State - Add & Edit State Items - Toggle Favourite (Boolean) and Render Filtered Lists | 01:05:57 | |
| 42 | Async functions (with a TRY/CATCH instead of a promise) - Fetching Data | 14:27 | |
| 43 | Responsive Navbar - Router, Switch, React-router-dom - NavLink - useState | 46:31 | |
| 44 | Video Bookmark App in React: useRef Hook - Spread Operator - Event Binding | 26:03 | |
| 45 | Introduction to useRef Hook in React - Document Selector in VanillaJS vs useRef by Asad Memon | 04:39 | |
| 46 | Building an E-Commerce Site with Redux - Basket Implementation - Actions | 02:59:40 | |
| 47 | Redux Basic Concepts - Building a TODO App with Redux Implementation by PEDRO GONCALVES | 02:20:45 | |
| 48 | Introduction to React Native & Expo - Testing Suggestions - React Native Lifecycle Focus | 03:35:27 | |
| 49 | Building a REST API with Express and MongoDB - Testing API with POSTMAN - Deploying | 02:49:54 | |
| 50 | Firebase Hosting 101 (Images & Videos) - Media Types - Progress Indicators | 03:01:39 | |
| 51 | Firebase Cloud Functions - Using Express on a Cloud Function - CORS | 02:56:04 | |
| 52 | Drag and Drop it like it's HOT! (dnd) - Typescript introduction - Portfolio 101 | 04:23:32 | |
| 53 | Typescript Introduction with Next.js - Building a Menu the right way with Headless UI - Tailwind CSS | 02:48:23 | |
| 54 | Building a Translation App with Firebase Extensions - Next.JS | 02:51:54 | |
| 55 | Handling Different Authentication methods in Next.js - NextAuth | 02:57:32 | |
| 56 | Stripe Session Checkout & Next.js backend - Nvm node version control | 03:57:36 | |
| 57 | Next.js SSR vs SSG In Practice - API's - useRouter - How to Deploy a Next.js App to Vercel | 03:01:35 | |
| 58 | Intro to GraphQL - Apollo Client & Server Setup - Next.JS - SSR with GQL - Queries | 03:27:59 | |
| 59 | Productivity & Life Hacks 101 - Time Management - Beginner to Entrepreneur Roadmap | 03:06:30 | |
| 60 | Databases 101 and Introduction to SQL by YAP QIANG | 01:48:27 | |
| 61 | Freelancing 101 by PRIYANSHU SARAF | 01:06:16 | |
| 62 | Learning Linear Data Structures in Node.js -On Learning, Tracking, | 04:30:07 | |
| 63 | In Depth into Git Command Line Interface - Diving in Linux Bash Commands by KEVIN BARTA | 01:46:43 |
Unlock unlimited learning
Get instant access to all 62 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 2y agoNode.js CLI | Build Node.js Command-line Automation Dev-tools
By: Ahmad Awais (VSCode.pro)After building hundreds of developer automation tools used by millions of developers, I am teaching exactly how you can do it yourself with minimum effective ef9h 3m -
Updated 3y agoReact Query - Essentials (v2)
By: Tanner LinsleyIn this course, you will learn how to wield React Query as your go-to weapon of choice for defeating and overcoming the challenges and hurdles of server state.2h 54m5/5 -
Updated 3y agoMicroservices with Node JS and React
By: Udemy, Stephen GriderEvent-Based Architecture? Covered! Server side rendering with React? Yep. Scalable, production-ready code? Its here!54h 13m5/5
Frequently asked questions
What are the prerequisites for enrolling in this course?
The course is designed to take students from the basics of web development to advanced topics in React. While there are no formal prerequisites, familiarity with HTML, CSS, and JavaScript would be beneficial. Early lessons cover web development essentials, including HTML tags, attributes, and CSS styling, which can help beginners get started.
What projects will I build during the course?
Throughout the course, students will build several projects, including a weather app using APIs, a video bookmark app implementing useRef and event binding, an e-commerce site with Redux, and a 2D game using the Phaser library. These projects are designed to reinforce the concepts taught in the lessons and provide practical experience.
Who is the target audience for this course?
The course is suitable for beginners who want to learn web development from scratch, as well as for intermediate developers seeking to deepen their understanding of React and its ecosystem. It covers a wide range of topics from introductory HTML and CSS to advanced React Native and Next.js features.
How does this course compare to other web development courses?
This course stands out because it not only covers React and its ecosystem but also introduces students to a broader range of technologies, such as Next.js for server-side rendering, GraphQL with Apollo Client, and Firebase for backend services. This comprehensive approach equips students with a versatile skill set for full-stack development.
What specific tools and platforms will I learn to use?
Students will learn to use a variety of tools and platforms, including Create React App for bootstrapping React projects, VS Code with essential extensions, Tailwind CSS for styling, Firebase for hosting and cloud functions, and Next.js for building server-side rendered applications. These tools are crucial for modern web development.
What topics are not covered in this course?
While the course covers a wide range of topics in web development and React, it does not delve into backend frameworks like Node.js in detail, nor does it cover advanced database management or intricate server-side configurations beyond the basics of Firebase and MongoDB.
How much time will I need to dedicate to this course?
The course consists of 63 lessons. While the total runtime is not specified, students should expect to spend additional time on practice exercises and project work. A regular commitment of several hours a week is recommended to fully grasp the concepts and complete the projects effectively.