get app

    Complete React, Next.js & TypeScript Projects Course

    BY
    Udemy

    Master the web development with React by taking the online React Tutorial and Projects Course course by Udemy.

    Brochure Enquire
    Mode

    Online

    Fees

    ₹ 4099

    Quick Facts

    particular details
    Medium of instructions English
    Mode of learning Self study
    Mode of Delivery Video and Text Based

    Course overview

    Complete React, Next.js & TypeScript Projects Course is a short certification created and tutored by  John Smilga to enable the students to have a solid foundation of  React.js, one of the best libraries to build modern web applications and develop the skills of creating projects using React.js. The curriculum will walk the learners through many aspects of React including NPM Basics, JSX Rules, React Router, and many more. 

    The prospective candidates who want to attend the Complete React, Next.js & TypeScript ProjectsCourse Online Programme must have a strong understanding of  HTML, CSS, and  JS to be eligible for this programme. At the end of React Tutorial and Projects Course Certification, administered by Udemy,  the students will be provided with a certification of completion opening up myriad job opportunities informing them along with a 30-day money-back guarantee. The interested folk can join the course by making the payment of a fee. 

    The highlights

    • Complete Online course
    • Downloadable resources
    • Full lifetime access
    • Access on mobile and TV
    • Certificate of completion
    • English videos
    • 30-Day Money-Back Guarantee

    Program offerings

    • 50.5 hours on-demand video
    • 20 articles
    • 10 downloadable resources
    • Full lifetime access
    • Access on mobile and tv
    • Certificate of completion

    Course and certificate fees

    Fees information
    ₹ 4,099
    certificate availability

    Yes

    certificate providing authority

    Udemy

    What you will learn

    Through the Complete React, Next.js & TypeScript Projects Course Online Certification, the students will learn Javascript, application development with React, JSX Rules, React Hooks, React Router, Lorem Ipsum, Hosting, and many more. 

    The syllabus

    Introduction and Setup

    • What is React?
    • Goals
    • Structure
    • Course Requirements
    • Dev Environment Setup
    • Text Editor Setup
    • Video Blur Fix
    • Course Review

    Install create-react-app

    • Command Line Basics
    • NPM Basics
    • What is Create-react-app, Babel, Webpack
    • Install Create-react-app
    • Folder Structure
    • Remove Boilerplate
    • Update!!!

    React Basics Tutorial

    • First Component
    • Text Editor Setup
    • First Component in Detail
    • JSX Rules
    • Nested Components and Tools
    • Mini Book Project
    • CSS
    • JSX - CSS
    • JSX - Javascript
    • Props
    • Props - Destructuring
    • Props - Children
    • Simple List
    • Proper List
    • Key Prop and Spread Operator
    • Event Basics
    • Import and Export Statements
    • Free Hosting

    React Hooks and Advanced Topics

    • Intro
    • Starter Project
    • Install Starter
    • Starter Overview
    • useState - Simple Use Case
    • useState - Basics
    • General Rules of Hooks
    • useState - Array Example
    • useState - Object Example
    • useState - Multiple State Values
    • Simple Counter
    • Functional Update Form
    • Matching Project
    • useEffect - Basics
    • useEffect - Conditional
    • useEffect - Dependency List
    • useEffect - Cleanup Function
    • useEffect - Fetch Data
    • Multiple Returns - Basics
    • Multiple Returns - Fetching Example
    • Short-Circuit Evaluation
    • Ternary Operator
    • Show/Hide Component
    • Matching Projects
    • Form Basics
    • Controlled Inputs
    • Add Item to the List
    • Multiple Inputs
    • Matching Projects
    • useRef
    • Matching Project
    • useReducer - useState Setup
    • useReducer - Refactor
    • useReducer - Add Item
    • useReducer - Remove Item
    • Prop Drilling
    • Context API / useContext
    • Matching Projects
    • Custom Hooks - useFetch
    • PropTypes - Setup
    • PropTypes - Images
    • PropTypes - Default Values
    • React Router Intro
    • React Router - Basic Setup
    • React Router - Error and Switch Component
    • React Router - Links
    • React Router - Url Params and Placeholder
    • React Optimization Warning!!!!
    • React.memo
    • useCallback
    • useMemo
    • useCallback - Fetch Example
    • Matching Project

    Basic Projects

    • Intro
    • Starter Project - Install and Overview
    • Birthday Reminder - Intro
    • Birthday Reminder - Setup
    • Birthday Reminder - Complete
    • Tours - Intro
    • Tours - Fetch Data
    • Tours - Display Tours
    • Tours - Toggle Info
    • Tours - Remove Tour
    • Reviews - Intro
    • Reviews - Info and React-Icons
    • Reviews - Basic Setup
    • Reviews - Prev and Next
    • Reviews - Random
    • Accordion - Intro
    • Accordion - Complete
    • Menu - Intro
    • Menu - Display Items
    • Menu - Buttons (manual approach)
    • Menu - "all" Button
    • Menu - Categories Buttons (dynamic approach)
    • Tabs - Intro
    • Tabs - Fetch Jobs
    • Tabs - Display First Job
    • Tabs - Display Buttons
    • Slider - Intro
    • Slider - Setup
    • Slider - CSS Overview
    • Slider - Setup Classes
    • Slider - Prev and Next Buttons
    • Slider - Autoplay
    • Slider - Alternative
    • Lorem Ipsum - Intro
    • Lorem Ipsum - Structure
    • Lorem Ipsum - Complete
    • Color Generator - Intro
    • Color Generator - Structure
    • Color Generator - Color Values and Error
    • Color Generator - Single Color
    • Additional Info!!!
    • Color Generator - Copy To Clipboard
    • Grocery Bud - Intro
    • Grocery Bud - Structure
    • Grocery Bud - Add Items
    • Grocery Bud - Alert
    • Grocery Bud - Clear Items
    • Grocery Bud - Remove Item
    • Grocery Bud - Edit Item
    • Grocery Bud - Local Storage
    • Navbar - Intro
    • Navbar - Basic Structure
    • Navbar - Data
    • Navbar - Simple Toggle
    • Navbar - Class Toggle
    • Additional Info
    • Navbar - useRef
    • Sidebar/Modal - Intro
    • Sidebar/Modal - Structure
    • Sidebar/Modal - Context
    • Sidebar/Modal - Complete
    • Stripe - Intro
    • Stripe - Context Boilerplate
    • Stripe - Navbar
    • Stripe - Hero
    • Stripe - Sidebar
    • Stripe - Submenu
    • Stripe - Location
    • Stripe - Links
    • Stripe - Hide Submenu
    • Cart - Intro
    • Cart - Setup Overview
    • Cart - useReducer Setup
    • Cart - Clear Cart
    • Cart - Remove Single Item
    • Cart - Increase
    • Cart - Decrease
    • Cart - Get Totals
    • Cart - Fetch Data
    • Cart - Toggle Amount
    • Cocktails - Intro
    • Cocktails - Additional Info
    • Cocktails - Setup Overview
    • Cocktails - React Router Setup
    • Cocktails - Navbar
    • Cocktails - About and Error
    • Cocktails - Context API Setup
    • Cocktails - API Overview
    • Cocktails - Fetch Drinks
    • Cocktails - Display List
    • Cocktails - Search Form
    • Cocktails - Single Cocktail Page
    • Hosting (Netlify) - Drag and Drop
    • Hosting (Netlify) - Continuous Deployment

    Additional Projects (API and External Libraries)

    • Intro
    • Markdown - Intro
    • Markdown - Setup
    • Markdown - Complete
    • Random Person - Intro
    • Random User - Setup
    • Random User - Fetch User
    • Random User - Buttons
    • Pagination- Intro
    • Pagination - Setup
    • Pagination - Fetch/Display List
    • Pagination - Paginate Logic
    • Pagination - Display Single Page
    • Pagination - Display Buttons
    • Pagination - Prev and Next Buttons
    • Stock Photos - Intro
    • Stock Photos - Setup
    • Stock Photos - Initial Fetch
    • Stock Photos - ENV VAR
    • Stock Photos - Display Photos
    • Stock Photos - Scroll Event
    • Stock Photos - Infinite Scroll
    • Stock Photos - Search Query
    • Stock Photos - Complete
    • Stock Photos - useEffect Warning Alternative
    • Stock Photos - Bug Fix 1
    • Stock Photos - Bug Fix 2
    • Dark Mode - Intro
    • Dark Mode - Setup
    • Dark Mode - moment.js
    • Dark Mode - Toggle Theme
    • Dark Mode - Local Storage
    • Movie DB - Intro
    • Movie DB - Setup
    • Movie DB - API KEY
    • Movie DB - React Router
    • Movie DB - Initial Fetch
    • Movie DB - Movies Component
    • Movie DB - Search Form
    • Movie DB - Single Movie
    • Movie DB - Refactor to useFetch
    • Hacker News - Intro
    • Hacker News - Setup
    • Hacker News - API Overview
    • Hacker News - Basic Structure
    • Hacker News - Fetch Stories
    • Hacker News - Display Stories
    • Hacker News - Remove Story
    • Hacker News - Search Form
    • Hacker News - Prev and Next Buttons
    • Quiz - Intro
    • Quiz - Setup
    • Quiz - API
    • Quiz - Context Setup
    • Quiz - Fetch Questions
    • Quiz - Display Question
    • Quiz - Next Question
    • Quiz - checkAnswer
    • Quiz - Show Modal
    • Quiz - Setup Form Structure
    • Quiz - HandleChange
    • Quiz - HandleSubmit
    • Quiz - Randomize Correct Answer

    Search Github Users

    • Intro
    • Starter Project Link
    • Starter Project
    • Setup Info
    • React Router Setup
    • React Router Error
    • Error Page
    • Login Page
    • Context API
    • Mock Data
    • Info Component
    • Card Component
    • Followers Component
    • Repos Setup
    • Fusion Charts Info
    • First Chart
    • Fusion Charts API
    • Fusion Charts - Configuration Options
    • Fusion Charts - Pie Chart
    • Calculate Most Used Language
    • Fusion Charts - Responsive
    • Fusion Charts - Doughnut Chart
    • Calculate Most Popular Language
    • Fusion Charts - Column and Bar Charts
    • Stars and Forks - Functionality
    • Search Component
    • Requests
    • Error
    • Search User
    • Loading Spinner
    • Repos and Followers
    • Promise.allSettled()
    • Auth0 Info
    • Auth0 Setup
    • Login - Logout
    • Private Route
    • Wrapper
    • Local Storage
    • Deploy Gotchas
    • Deploy Project
    • Finished Project

    E - Commerce Project

    • Intro
    • Info
    • Starter Install
    • Stater Overview
    • Styled Components - Basics
    • React Router - Setup
    • Navbar
    • Cart Buttons
    • Footer
    • Sidebar
    • Products Context Setup
    • Sidebar Toggle
    • Hot Reloading Fix
    • Error Page
    • About, Checkout Page
    • Home Page - Hero
    • Home Page - Services
    • Home Page - Contact
    • Formspree
    • API Info
    • Fetch Products Overview
    • Fetch Products Complete
    • Featured Products
    • Format Price
    • Fetch Single Product
    • Single Product - Loading, Error
    • Single Product - Base Return
    • Single Product - Product Images
    • Single Product - Stars (manual approach)
    • Single Product - Stars (array approach)
    • Single Product - Add To Cart - Colors
    • Single Product - Add To Cart - Amount Buttons
    • Filter Context Setup
    • Products Page - Grid View
    • Products Page - List View
    • Sort Component - Basic Setup
    • Sort Component - View Buttons
    • Sort Component - Controlled Input
    • Sort Functionality
    • Filters - Default Values
    • Filters - Text
    • Filters - Unique Values
    • Filters - Categories
    • Filters - Companies
    • Filters - Colors
    • Filters - Price
    • Filters - Shipping and Clear Filters
    • Filter Functionality - Setup and Text Input
    • Filter Functionality - Rest of the Filters
    • Cart Context Setup
    • AddToCart - Setup
    • AddToCart Reducer - New Item
    • AddToCart Reducer - Existing Item
    • Cart Page Setup
    • localStorage
    • Cart Content
    • Cart Columns
    • Cart Totals
    • Cart Item
    • Cart - Remove Item and Clear Cart
    • Cart - Toggle Amount
    • Cart - Calculate Totals
    • Switch React Version
    • Additional Auth0 Info
    • Auth0 - Setup
    • Auth0 - Provider
    • useContext Setup
    • Auth0 - Login/Logout Buttons
    • Auth0 - Toggle Values
    • Auth0 - Hide Checkout
    • Auth0 - Private Route
    • Extra Content
    • Install Extra Packages
    • AuthWrapper
    • Fix Warnings
    • Stripe and Netlify Accounts
    • Additional NETLIFY-CLI Info
    • Install and Setup netlify-cli
    • First Netlify Function
    • Stripe Checkout - Setup
    • Stripe Checkout - Imports
    • Stripe Checkout - State Variables
    • Stripe Checkout - Basic Return
    • Netlify Function - /create-payment-setup
    • Stripe Checkout - Get Client Secret
    • Stripe Checkout - Complete
    • Deploy To Netlify

    Redux

    • Redux Intro
    • Starter Files
    • Setup Project
    • Quick Redux Info
    • Store
    • Reducer
    • getState
    • First Action
    • Return and Action Bugs
    • More Actions
    • More Complicated State
    • Actions as Variables
    • Separate Reducer
    • Refactor
    • Provider Setup
    • connect Navbar
    • connect CartContainer
    • dispatch - Clear Cart
    • Switch Statement Syntax
    • Reducer Setup
    • "REMOVE" action setup
    • "REMOVE" action complete
    • "INCREASE" and "DECREASE" action setup
    • "INCREASE" complete
    • "DECREASE" complete
    • "GET_TOTALS" action
    • Refactor "DECREASE"
    • "TOGGLE_AMOUNT" action
    • Reducer Default State
    • Action Creators
    • Redux Devtools

    Old Content - Class Based Components

    • Import and Export (ES6 Modules)
    • Class Based Components in React
    • Functional VS Class Based Components
    • State
    • Alternative State Syntax
    • Book Mini Project
    • Events
    • this.setState
    • Passing Methods and "Prop Drilling"
    • Passing Methods to Children Components to Work with State
    • Conditionals in JSX

    Bonus

    • Bonus

    Instructors

    Mr John Smilga

    Mr John Smilga
    Web Developer
    Udemy

    Articles

    Popular Articles

    Top 10 Online Healthcare and Hospital Management Courses Top 10 Online Healthcare and Hospital Managemen... Updated On 19 Nov, 2024
    150+ UGC Approved Online Degree Courses by Top Universities 150+ UGC Approved Online Degree Courses by Top ... Updated On 11 Nov, 2024
    Top 12 Certification Courses Offered by IIT Bombay Top 12 Certification Courses Offered by IIT Bombay Updated On 02 Nov, 2024
    Top 10 Indian Universities Offering Online Degrees Top 10 Indian Universities Offering Online Degrees Updated On 02 Nov, 2024
    Top 16 IIT Madras Online Degree, Diploma, and Certification Courses Top 16 IIT Madras Online Degree, Diploma, and C... Updated On 11 Oct, 2024
    The Scope of Artificial Intelligence in India The Scope of Artificial Intelligence in India Updated On 14 Jul, 2024
    UGC Guidelines to Pursue Online Courses UGC Guidelines to Pursue Online Courses Updated On 13 Mar, 2024
    Reasons to Enroll for an Online Content Writing Course Reasons to Enroll for an Online Content Writing... Updated On 29 Feb, 2024
    Top 10 Online Animation Certificate Courses for a Better Career Top 10 Online Animation Certificate Courses for... Updated On 27 Feb, 2024
    Best Programming Languages to Learn in 2024 Best Programming Languages to Learn in 2024 Updated On 13 Feb, 2024

    Latest Articles

    MEAN Stack Developer Salary in India for Freshers & Experienced Updated On 07 Nov, 2024
    20 Beginner-Friendly Online Bootstrap Courses for Frontend Development Updated On 07 Nov, 2024
    Top 18+ Online Courses to Pursue for a Career in Web Development Updated On 05 Nov, 2024
    17+ Courses on HTML5 for Beginners to Become a Web Developer Updated On 05 Nov, 2024
    Top 50 MVC Interview Questions And Answers To Prepare Updated On 16 Apr, 2024
    50 Best Bootstrap Interview Questions and Answers Updated On 16 Apr, 2024
    Top 16 Online Courses on Typescript Development Updated On 07 Apr, 2024
    Top 50 Must Know Interview Questions for PHP Updated On 04 Apr, 2024
    25 Free Web Development Courses to Pursue in Online Mode Updated On 19 Mar, 2024
    Top 50 Interview Questions for Web Developer With Answers Updated On 15 Feb, 2024
    14+ GitHub Courses to Become a Skilled Web Developer Updated On 15 Feb, 2024
    Top 50 GIT Interview Questions and Answers to Know Updated On 15 Feb, 2024

    Trending Courses

    Digital Marketing Courses Fashion Design Courses Data Science Courses Interior Design Courses Graphic Designing Courses Cyber Security Courses Nursing Courses Tally Courses Data Analysis Courses Web Designing Courses Artificial Intelligence Courses Ethical Hacking Courses Free Digital Marketing Courses And certifications Free Artificial Intelligence Courses And Certifications Free Data Analysis Courses And Certifications Free Cyber Security Courses And Certifications Free Data Science Courses And Certifications Free Cloud Computing Courses And Certifications Free Python Courses And Certifications Free Fashion And Textiles Courses And Certifications Free Graphic Designing Courses And Certifications Free Web Designing Courses And Certifications

    Popular Courses

    General Management Courses Public Health Courses Teaching and Education Courses Financial Management Courses Web Development Courses Mathematics Courses Data Science Courses Cyber Security Courses Programming Courses Digital Marketing Courses Law Courses Leadership Courses Explore all courses

    Popular Platforms

    upGrad Courses Udemy Courses Edx Courses Swayam Courses Coursera Courses Futurelearn Courses Mindmajix Technologies Courses Vskills Courses IIT Kharagpur Courses Emeritus Courses IIT Kanpur Courses NPTEL Courses Explore all platforms

    Learn more about the Courses

    10 Reasons to Enrol Yourself in a Digital Marketing Course 8 Must-Have Skills for AWS Cloud Architects Planning to Upskill Yourself? Enrol for a Program in Data Science 25+ Tips for Improving Your Graphic Design Skills Top Universities in India Offering Cyber Security Courses 15+ Courses for Learning Data Mining How to Make a Career in the Field of Artificial Intelligence Top 10 Benefits Of Holding A Certification In Business Intelligence Which are the best certification courses for Photography in India A Beginner's Guide to Pursue Python Programming Want to Pursue a Career in Blockchain Technology? Here is all that you need to Know How Entrepreneurs Can Use Machine Learning to Make their Business Successful? The Scope of Artificial Intelligence in India Top 10 Online Courses for Travel Lovers 10 Best Certification Courses After Hospital and Healthcare Management
    Providers
    Close

    Download the Careers360 App on your Android phone

    Regular exam updates, QnA, Predictors, College Applications & E-books now on your Mobile

    Careers360 App
    150M+ Students
    30,000+ Colleges
    500+ Exams
    1500+ E-books