Zero to Hero ReactJS Mastery Course

Zero to Hero ReactJS Mastery Course

by Ranjan Pandey
Released September 2022
Publisher(s): Packt Publishing
ISBN: 9781801813419

Watch it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

Welcome to the Zero to Hero React JS mastery E-degree course.

This course will guide you with hands-on live sessions on your path to becoming a professional React JS developer. This course has no prerequisites; all material will be taught completely from the start using real-world examples.

This course is divided into four parts. In the first part, you will learn all about HTML. What HTML is, understand the structure of an HTML page, learn about different tags used in HTML, learn how to create a form in HTML, and more. The second part is all about CSS. In this part, we will understand what CSS is, learn about Inline, Embedded, and External styling; learn about different types of CSS selectors; learn about the Box model, animation, transition, transformation in CSS, and more.

In this third part, we will start with JavaScript. You will learn about different types of data types, what are variables and constants, learn various operators, understand what loops, arrays, and objects are, learn the Document Object Model (DOM), and much more. In the final part, we will cover React JS and Bootstrap. Here, you will learn how to create React apps and understand the different ReactJS concepts. You will also learn about Bootstrap, and we will work on multiple projects in order to understand the different concepts that we learn throughout the course.

Without any prior knowledge, you will graduate from this course with the skills necessary to become a professional React JS developer using a step-by-step, project-based learning methodology.

What You Will Learn

  • Learn everything about CSS3
  • Learn everything about Bootstrap 5
  • Learn everything about JavaScript and ES6
  • Learn everything about HTML5
  • Learn various debugging and troubleshooting tools and techniques
  • Learn different plugins and techniques to speed up development

Audience

Each concept in this course will be introduced from scratch, making it ideal for complete beginners.

About The Author

Ranjan Pandey: Ranjan Pandey is a full-stack DevOps software professional with over 11 years of experience in a variety of technologies ranging from web and mobile application development using HTML5, CSS3, JavaScript, jQuery, Bootstrap, Angular, React, Java, Spring, Spring Boot, Python, Flask, Django, NodeJS, Express, Android, Ionic, React Native, Flutter to artificial intelligence and cloud technologies such as Amazon Web Services and Microsoft Azure. He is a certified professional in Java, Azure Cloud, and Backbase products and has experience working with multiple MNCs and European clients. He is also a corporate trainer providing a wide range of training.

Table of contents

  1. Chapter 1 : Mastering HTML5
    1. Course Overview
    2. Introduction to Web Development
    3. Installation and Setup
    4. Html-Structure-Comments
    5. Head-Meta-Link-Script-Tags
    6. Headings-p-span-div-br-hr-text
    7. Anchor-img-tag
    8. Ordered and Unordered List
    9. Table Row Column
    10. Form Input Select textarea
    11. Inline-Block-Entities-Header-Footer-Section-Button-Article-Audio-Video-iframe
  2. Chapter 2 : Mastering CSS3
    1. Introduction to CSS
    2. Different Ways of Using CSS
    3. Selectors-in-CSS
    4. Debugging-Using-Developer-Tool
    5. Fonts-in-CSS
    6. Colors-in-CSS
    7. Border-Background-Height-Width
    8. BoxModel-Margin-Padding
    9. Float-Clear
    10. Pseudo-Selector
    11. CSS-Display-Property
    12. CSS-Position-Property
    13. CSS-Visibility-Z-Index
    14. CSS-Flexbox
    15. CSS-Responsive-Units-em-rem-vh-vw
    16. Media-Queries
    17. Advance-Pseudo-Selector
    18. nth Selector
    19. Before-After-Pseudo-Selector
    20. CSS-Box-Text-Shadow
    21. CSS-Custom-Variables
    22. CSS-Animation-Keyframes-Part-1
    23. CSS-Animation-Keyframes-Part-2
    24. Transition
    25. Transform
  3. Chapter 3 : Mastering JavaScript and ES6
    1. Introduction to the World of JavaScript
    2. JavaScript Popularity and ECMAScript Evolution
    3. Installation and Setup
    4. Writing your First JavaScript
    5. Datatype and Variables
    6. Comments in JavaScript
    7. Operators and Operands
    8. String Concatenation
    9. String Functions
    10. Scope in JavaScript
    11. If Else Switch Case
    12. Object in JavaScript
    13. Array in JavaScript
    14. Function in JavaScript
    15. Alert Prompt Confirm Parse in JavaScript
    16. Loops in JavaScript
    17. Spread Operator
    18. Ternary Operator
    19. Array Filter Function
    20. Understanding DOM
    21. Manipulating DOM with JavaScript
    22. Event and Event-Listener in JavaScript
    23. setTimeout and clearTimeout
    24. setInterval and clearInterval
    25. Date and Time Part-1
    26. Date and Time Part-2
    27. JSON Object and its Manipulation
    28. Arrow Function
    29. Window, Document, Localstorage, Sessionstorage
    30. Math Object and Various Functions
    31. Project 1
    32. Project 2
    33. Project 3
  4. Chapter 4 : Mastering ReactJS and Bootstrap 5
    1. ReactJS Introduction and Environment Setup
    2. Create React App
    3. Program Flow and Project Files Walkthrough
    4. Types of Components in React
    5. Creating and Using 1st Functional Component
    6. Creating 1st Stateful Class Component
    7. ES6 Functional Component, Export and Import
    8. Comparison Between Functional and Class Component
    9. React Hooks Introduction
    10. Jsx Explained
    11. Props in Functional and Class Component
    12. State versus Props
    13. Deep Dive into setstate
    14. Handling Form in Class Component Part 1
    15. Handling Form in Class Component Part 2
    16. componentDidMount Lifecycle Onload Method
    17. Create New React App and Understand Project Structure.
    18. Project Cleanup
    19. Installing Bootstrap and React Vscode Extension
    20. Create Home About Contact Page
    21. Creating Navbar Component
    22. Adding React-Router-Dom and Different Routes
    23. Link and NavLink to avoid Page Reload
    24. Designing About and Contact Page
    25. Page Not Found
    26. Bootstrap Versus React-Bootstrap
    27. Using Custom Styling
    28. Setting Up Backend Fake api and db
    29. useState useEffect axios api call and React Dev Tools Extension
    30. Showing All Users on Frontend UI
    31. Adding Action Buttons on Frontend
    32. Add User Navigation Routing
    33. Create Add User Form
    34. Set State Variable Data
    35. Save New User to DB Via Post api Call
    36. Another Way to Save User Data in DB Using Post api
    37. Edit User Prepopulate User Data
    38. Save Updated User in DB
    39. Delete a User
    40. View User Details
    41. View User Address and Company Info
    42. Showing Loading Spinner

Product information

  • Title: Zero to Hero ReactJS Mastery Course
  • Author(s): Ranjan Pandey
  • Release date: September 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781801813419