Brochure
Enquire
- What is React?
- Goals
- Structure
- Course Requirements
- Dev Environment Setup
- Text Editor Setup
- Video Blur Fix
- Course Review
Complete React, Next.js & TypeScript Projects Course
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
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
Web Developer
Udemy
Articles
Popular Articles
prev
next
Latest Articles
prev
next
