Complete React, Next.js & TypeScript Projects Course 2024 from Udemy

MAJOR COURSE UPDATE -.

Exciting New Content in React Course

I'm thrilled to announce that I am adding more valuable content to our React course to help you stay ahead of industry standards. Here's what you can look forward to:

Comprehensive TypeScript tutorial
Detailed lessons on React with TypeScript
Complete Next.js tutorial with TypeScript
Several complex Next.js projects
Over 30 hours of new content .

Stay ahead with the latest industry standards and master the skills needed for modern React development.

What's New?

TypeScript Integration:
- TypeScript Tutorial: Learn the basics and advanced features of TypeScript.
- React with TypeScript: Master the integration of TypeScript with React to build robust applications.
Next.js Tutorials:
- Next.js with TypeScript: Comprehensive tutorials on building Next.js applications using TypeScript.
- Complex Next.js Projects: Work on real-world projects that leverage the full potential of Next.js.

Why These Additions?

Industry Standards: Both TypeScript and Next.js have become essential skills for modern React development.
New React Features: Many new React features are only available through React frameworks like Next.js.
Full-Stack Development: Next.js enables quicker and more efficient full-stack development by allowing server-side and client-side code to coexist seamlessly.
Team Efficiency: TypeScript enhances code maintainability and collaboration, making it a preferred choice for large teams.

Mastering React 18: Building Modern Web Applications

Dive into the dynamic world of front-end development with our comprehensive course on React 18, a cutting-edge JavaScript library used for creating engaging user interfaces. Developed and maintained by Facebook, React has become a cornerstone in building both single-page and mobile applications.

Why Learn React?

High Demand: React's popularity makes it a valuable skill for job seekers in the tech industry.
Efficiency and Performance: React's use of a virtual DOM ensures fast, scalable, and efficient application development.
Flexibility and Reusability: The library's design allows for reusable components, simplifying the development process and making code maintenance easier.

Course Coverage:

React Fundamentals: Understand the core principles of React.
Latest Features: Get hands-on with React 18.
Hooks & State Management: Deep dive into useState, useEffect, useRef, useReducer, useCallback, useMemo, and custom hooks.
Advanced Concepts: Learn about conditional rendering, prop drilling, context API, and more.
Navigation and Routing: Explore React Router 6 for seamless app navigation.
Data Handling: Utilize axios and redux-toolkit for efficient data management.
Project-Based Learning: Build over 25 real-world projects including a Birthday Reminder, E-Commerce Site, Quiz App, and a GitHub Users Explorer.

Ideal For:

Aspiring and experienced front-end developers looking to master React and elevate their web development skills. Whether you're aiming to boost your career prospects or build high-performance web applications, this course is your gateway to becoming a proficient React developer.

All Project Intros are available for preview.

Here are some of the projects we are going to build in this course

1. Birthday Buddy

2. Tours

3. Reviews

4. Accordion

5. Menu

6. Tabs

7. Slider

8. Lorem Ipsum

9. Color Generator

10. Grocery Bud

11. Navbar

12. Sidebar and Modal

13. Strapi Menu

14. Cart

15. Unsplash Images

16. Contentful CMS

17. Mix Master

18. Tailwind Portfolio

19. E-Commerce

20. Jobster

21. Github Users

22. Jobster

23. Comprehensive Full Stack Next.js E-Commerce Project

What's inside

Learning objective

Make great projects using react

Syllabus

Introduction

Main Course Repository

What is React?

Goals

Structure

Requirements

Video Blur Fix

Course Review

Dev Environment

Workflow Info

Browser

VS Code

Terminal

Node.js

Create-React-App

React Fundamentals

Intro

Nav Logo

Github Repository

Folder Structure

Remove Boilerplate

First Component

Extensions and Settings

Create Element Function

JSX Rules

Nest Components

React Developer Tools

BookList

CSS

Local Images (public folder)

JSX - CSS

JSX - Javascript

Props - Basic Setup

Props - Somewhat Dynamic Setup

Props - Multiple Approaches

Children Prop

Simple List

Proper List

Key Prop

Object as a Prop

Event Basics

Form Submission

Form Submission - Button Example

Anonymous Function (arrow)

Components Feature

Prop Drilling

Complex Example - Intro

Complex Example - Bug

Complex Example - Fix

ES6 Modules

Local Images (src folder)

Numbers Challenge

Title Challenge

Build Folder

Deployment

Backroads Application

Setup

Install

SRC Boilerplate

Components

Smooth Scroll

Page Links

Social Links

Hero and About Components

Title Component

Services Component

Tours Component

Footer Component

Alternative Approach - Page Links Component

Alternative Approach - More Components

Continuous Deployment - Setup

Continuous Deployment - Benefits

Continuous Deployment "Gotcha"

VITE

VITE - Intro

VITE - Install / Setup

React Hooks and Advanced Topics

Overview

Error Example

UseState Fundamentals

Initial Render and Re-renders

General Rules of React Hooks

UseState Array Example - Setup

UseState Array Example - Complete

UseState - Extra Info

UseState Object Example - Setup

Auto Batching Info

UseState Object Example - Complete

UseState Set Function "Gotcha"

UseState Functional Update Form

UseState - SetTimeout Example

Matching Project

Code Example

UseEffect - Fundamentals

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Teaches advanced concepts and features in React, making it a suitable option for intermediate learners

Covers industry-standard tools, including TypeScript and Next.js, highly relevant to modern React development

Provides hands-on learning through project-based activities and real-world applications

Taught by an experienced instructor, John Smilga, recognized for his expertise in React development

Requires basic understanding of React fundamentals, making it less suitable for beginners

Assumes knowledge of JavaScript, HTML, and CSS

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 Complete React, Next.js & TypeScript Projects Course 2024 with these activities:

Review HTML, CSS, and JavaScript

Show steps

Solidify your understanding of the fundamental building blocks of web development to prepare for more complex React concepts.

Browse courses on HTML

Show steps

Revisit core HTML elements, attributes, and structure.
Review CSS selectors, properties, and values for styling.
Practice basic JavaScript functions, data types, and operators.
Build a simple static website using HTML, CSS, and JavaScript.

Read 'React Up and Running'

Show steps

Expand your knowledge and understanding of React concepts and best practices by reading a comprehensive book written by an expert.

View The Road to Firebase on Amazon

Show steps

Read through the book, taking notes and highlighting key concepts.
Complete the exercises and examples provided in the book.
Discuss the book's content with peers or mentors.

Solve React coding challenges

Show steps

Sharpen your problem-solving skills and deepen your understanding of React by solving coding challenges.

Browse courses on React

Show steps

Identify and gather React coding challenges from online platforms or books.
Allocate specific time slots for solving these challenges.
Attempt to solve each challenge independently.
Review your solutions and identify areas for improvement.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Follow React tutorials on Egghead.io

Show steps

Reinforce your understanding and enhance your skills by following guided tutorials from industry experts.

Browse courses on React

Show steps

Choose relevant React tutorials from Egghead.io or other reputable sources.
Follow the tutorials step-by-step, taking notes and practicing along.
Experiment with the code and try to implement the concepts in your own projects.

Attend a React workshop

Show steps

Immerse yourself in a hands-on learning environment and accelerate your React skills through expert-led workshops.

Browse courses on React

Show steps

Research and identify relevant React workshops offered by reputable organizations.
Register and attend the workshop, actively participating and engaging with the instructors.
Apply the knowledge and techniques learned in the workshop to your own projects.

Create a React portfolio project

Show steps

Showcase your skills and understanding by building a portfolio project that demonstrates your proficiency in React.

Browse courses on React

Show steps

Ideate and design your React portfolio project.
Implement the project, using React best practices and industry standards.
Deploy your project and share it with potential employers or clients.

Participate in React hackathons or competitions

Show steps

Test and demonstrate your React abilities by participating in industry-recognized hackathons or competitions.

Browse courses on React

Show steps

Identify and register for React-focused hackathons or competitions.
Form a team or work individually to develop a React-based solution to the challenge.
Submit your project and present it to a panel of judges.
Analyze your performance and seek feedback to improve your skills.

Mentor junior React developers

Show steps

Solidify your understanding of React concepts by sharing your knowledge and guiding junior developers.

Browse courses on React

Show steps

Identify opportunities to mentor junior React developers through online forums, coding communities, or personal connections.
Provide guidance, support, and feedback to help them learn and grow.
Reflect on your own understanding of React while mentoring others.

Career center

Learners who complete Complete React, Next.js & TypeScript Projects Course 2024 will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Complete React, Next.js & TypeScript Projects Course 2024

What's inside

Learning objective

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses