The Modern React 18 Bootcamp - A Complete Developer Guide from Udemy

In this course we will take you from a React 18 novice to a job ready engineer. This course is loaded with practical projects and examples so that you can truly understand and utilize React 18 in great depth.

We will be building five projects, each one getting more and more complex. We will end this course by building an Netflix clone with features like payments and user authentication. By the end of this course, you should have multiple practical example to show off your knowledge.

Here are a list of thing you will learn in this course:

The difference between pure Vanilla JS and React 18
How to utilize the all the different React hooks
Conditional rendering and mapping through a list of elements
Fetching data from an external API and handling the success, loading and error states
Handling user authentication
Building a Postgres database to handle complex relations
Utilizing TypeScript for bug free code
All the important ways to handle state (useState, useContext, useReducer, Redux Toolkit)
Handling subscriptions payments with Stripe
Scroll based pagination with the Observer Intersection API
Optimizing performance by preventing unnecessary re-renders

I really hope you enjoy this course and learn a ton from it.

What's inside

Learning objectives

Best practices for building a react 18 frontend application
Utilizing the hooks & redux toolkit within a react project

Identifying when to use a state management solution
Handling user authentication and payments

Best practices for building a react 18 frontend application
Utilizing the hooks & redux toolkit within a react project
Identifying when to use a state management solution
Handling user authentication and payments

Syllabus

Introduction

A Little Setup

Why We Care About React?

What is React

Building an App With Vanilla JS

Discussing the Annoyances We Faced

Building the Same App With ReactJS

The Fundamentals of React

Creating a React App

Exploring the Files and Folders

State and Event Handling

Diving Deeper into React

Project Intro

Class vs ClassName

Building the JSX Structure

Listing Out Everything We Need to Work On

Two Way Binding

Defining an Array State

Iterating Through the List to Render Elements

The Key Prop

Computing the Quantity

Conditionally Render JSX Elements

Deleting an Item

Two Way Binding a List Item

The useEffect Hook

Built it Yourself

Project Introduction

A Cleaner and DRYer Way of Two Way Binding

Input Validation and Conditional Styling

Storing Store List and Map Through List to Render Elements

Installing Dependencies

Computing a New State

Components for Maintainability and Reusability

Building the JSX Structure for the Home Page

Dividing Our JSX into Components

Passing Props to Components

Page Routing and Navigation

Understanding Routing

How React Renders Content to the Browser (CSR vs SSR)

Installing react-router-dom

Defining Our Routing Rules

Adding Another Page to Our App

Nested Routes for Common Elements

Link Based Navigation

Defining Dynamic Routes

The useParams Hook for Extracting the Params

The useNavigate Hook for Programmatic Navigation

Fetching Data From an API

Where Will the Data Come From

Fetching Data From an API With Our React App

Iterating Through the Fetched Data

Encapsulating the Fetch Logic in a Custom Hook

Handling a Loading State

Handling an Error State

Querying for Data by Keyword

A Quick Fix

Another Custom Hook

Traversing and Rendering the Data

The Children Prop

Building the Recipe Info Component

Potentials Issues With the State We Defined

The useReducer Hook

Advanced Navigation Topics

Adding Query Params

Handling Error State with an Error Message

A 404 Error Page

More Nested Pages

Passing Data to an Outlet With useOutletContext

Wrapping Things Up

Deploying the Application

Viewing Our Deployment

Other React Hooks

React Has Many Hooks

The useRef Hook

Building a Mini Project With useState

Improving Performance With useRef

Referencing Elements with useRef

The useMemo Hook

Memo and Props

The useCallback Hook

React with TypeScript

An Intro to TypeScript

Creating a TypeScript React App

A Quick TypeScript Lesson

Exploring the Starter Code

State with TypeScript

Props with TypeScript

Params with TypeScript

Installing Packages with TypeScript

Tailwind Integration with React

Major Project Introduction

Tailwind Integration

Building the NavBar

Building the Home Page

Building the Login Page

Building the Plans Page

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Well suited for beginners in React 18

Suitable for learners who aspire to be a React 18 engineer

Practical projects and examples to enhance understanding and utilization of React 18

Covers a comprehensive range of topics essential for React 18 development, including hooks, state management, and payments handling

Course by Laith Harb, a recognized expert in React 18

May require some prior programming experience to fully benefit from the course

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in The Modern React 18 Bootcamp - A Complete Developer Guide with these activities:

Review HTML

Show steps

Reinforce your understanding of HTML by revisiting the basics to prepare for the more advanced concepts covered in the React course.

Browse courses on HTML

Show steps

Review HTML syntax and structure
Create a simple web page using HTML
Explore different HTML elements and their usage

Create a Comprehensive Study Guide

Show steps

Facilitates a holistic review and synthesis of course content to enhance comprehension and retention.

Show steps

Gather all course notes, assignments, quizzes, and exams
Review the materials and identify key concepts, definitions, and examples
Organize the materials into a logical structure, such as by topic or chapter

Review JavaScript Fundamentals

Show steps

Refresh your knowledge of basic JavaScript concepts, such as variables, data types, operators, and control flow, to strengthen your foundation for learning React.

Browse courses on JavaScript

Show steps

Revisit JavaScript syntax and semantics
Create simple JavaScript programs to practice basic concepts
Explore JavaScript object-oriented features

Seven other activities

Expand to see all activities and additional details

Show all ten activities

Build a Password Strength Meter

Show steps

Builds a UI component requiring combination of UI and logic to test understanding.

Browse courses on Conditional Rendering

Show steps

Create a simple form with an input field for the password
Add a state variable to store the password strength
Implement a function to calculate the password strength based on the length, presence of uppercase, lowercase and special characters
Update the state variable based on the calculated strength
Render the password strength as a UI element

Complete React Tutorial for Beginners

Show steps

Follow a comprehensive React tutorial to grasp the core concepts and get hands-on experience building simple React applications.

Show steps

Find a reputable React tutorial or course
Work through the tutorial, completing all exercises and projects
Build a small React application on your own to apply what you've learned

Solve React Coding Challenges

Show steps

Challenge yourself by solving React coding challenges to strengthen your understanding of React concepts and improve your problem-solving skills.

Browse courses on Front-End Development

Show steps

Find a platform or repository offering React coding challenges
Attempt to solve challenges of varying difficulty levels
Review solutions and learn from your mistakes

Explore the React Router Tutorial

Show steps

Provides interactive and step-by-step guidance to reinforce concepts of navigation and routing.

Browse courses on Routing

Show steps

Go through the official React Router tutorial
Follow along with the examples and build a simple single-page application

Attend a React Workshop

Show steps

Offers hands-on practice and expert guidance to refine skills and expand knowledge.

Show steps

Find a local or online React workshop
Attend the workshop and actively participate in the exercises
Ask questions and engage with instructors and fellow participants

Contribute to an Open-Source React Project

Show steps

Enhance your learning by contributing to an open-source React project, allowing you to collaborate with others, learn from experienced developers, and deepen your understanding of the React ecosystem.

Browse courses on Front-End Development

Show steps

Find an open-source React project that aligns with your interests
Identify a feature or bug that you can contribute to
Fork the repository and make changes to the codebase
Submit a pull request and work with the maintainers

Write a Blog Post on React Best Practices

Show steps

Share your knowledge and reinforce your understanding by writing a blog post on best practices for React development, providing valuable insights to the community.

Show steps

Research and gather information on React best practices
Organize your thoughts and outline the structure of your blog post
Write the content, providing clear and concise explanations
Proofread and edit your blog post for clarity and accuracy

Career center

Learners who complete The Modern React 18 Bootcamp - A Complete Developer Guide will develop knowledge and skills that may be useful to these careers:

Front-End Web Developer

Front End Web Developers are responsible for the design, implementation and maintenance of website interfaces. This course provides a thorough foundation in React, a popular front end framework, and emphasizes the construction of complex, interactive web applications. This course can help you build a strong portfolio of practical projects to showcase your skills.

See salaries and explore the career path for Front-End Web Developer

Web Developer

As a Web Developer, you will design, create, and maintain websites and web applications. This course will help you build a strong foundation in React, a popular front end framework, and emphasizes the construction of complex, interactive web applications. This course can help you build a strong portfolio of practical projects to showcase your skills.

See salaries and explore the career path for Web Developer

React Developer

React Developers specialize in building user interfaces and components for web applications using the React framework. This course is designed to take you from a React novice to a job-ready engineer, covering essential concepts such as hooks, state management, and data fetching. By completing the projects in this course, you will gain hands-on experience in building complex, real-world React applications.

See salaries and explore the career path for React Developer

User Interface (UI) Designer

UI Designers are responsible for the visual design and user experience of websites and applications. This course provides a strong foundation in React, a popular front end framework used by many UI Designers to build interactive and visually appealing user interfaces. By completing this course, you will gain the skills and knowledge needed to design and implement beautiful and user-friendly web applications.

See salaries and explore the career path for User Interface (UI) Designer

Full-Stack Developer

Full Stack Developers are responsible for both the front end and back end of web applications. While this course focuses on the front end with React, it also touches on back end concepts such as database management and user authentication. By completing this course, you will gain a well-rounded understanding of full stack development and be able to build complete, end-to-end web applications.

See salaries and explore the career path for Full-Stack Developer

Software Engineer

Software Engineers design, develop, test, and maintain software systems. While this course focuses on front end development, it also provides a solid foundation in computer science fundamentals. By completing this course, you will gain the skills and knowledge needed to build complex, scalable software applications.

See salaries and explore the career path for Software Engineer

Product Manager

Product Managers are responsible for the overall vision and roadmap of a product. While this course focuses on the technical aspects of front end development, it also provides insights into the product development process. By completing this course, you will gain a better understanding of the role of technology in product development and be able to communicate more effectively with technical teams.

See salaries and explore the career path for Product Manager

Project Manager

Project Managers plan, execute, and close projects. While this course focuses on the technical aspects of front end development, it also covers project management skills. By completing this course, you will gain the skills and knowledge needed to manage and deliver successful projects.

See salaries and explore the career path for Project Manager

Freelancer

Freelancers work independently on a variety of projects. While this course focuses on the technical aspects of front end development, it also covers freelancing and business skills. By completing this course, you will gain the skills and knowledge needed to start and run a successful freelance business.

See salaries and explore the career path for Freelancer

Data Scientist

Data Scientists use data to solve business problems. While this course focuses on the front end, it also covers data fetching and manipulation techniques. By completing this course, you will gain a better understanding of how data is used in the real world and be able to apply this knowledge to your own work.

See salaries and explore the career path for Data Scientist

Business Analyst

Business Analysts bridge the gap between business and technology. While this course focuses on the technical aspects of front end development, it also provides insights into the business side of software development. By completing this course, you will gain a better understanding of how technology can be used to solve business problems.

See salaries and explore the career path for Business Analyst

Consultant

Consultants provide advice and expertise to businesses and organizations. While this course focuses on the technical aspects of front end development, it also covers consulting and communication skills. By completing this course, you will gain the skills and knowledge needed to start and run a successful consulting business.

See salaries and explore the career path for Consultant

Technical Writer

Technical Writers create documentation for software and other technical products. While this course focuses on the technical aspects of front end development, it also covers writing and communication skills. By completing this course, you will gain the skills and knowledge needed to create clear and concise technical documentation.

See salaries and explore the career path for Technical Writer

Entrepreneur

Entrepreneurs start and run their own businesses. While this course focuses on the technical aspects of front end development, it also provides insights into the entrepreneurial mindset. By completing this course, you will gain a better understanding of how to start and run a successful business.

See salaries and explore the career path for Entrepreneur

Teacher

Teachers educate students in a variety of subjects. While this course focuses on the technical aspects of front end development, it also covers teaching and communication skills. By completing this course, you will gain the skills and knowledge needed to teach front end development concepts to others.

See salaries and explore the career path for Teacher