Create Website using React with Typescript Tutorial in Hindi 👉 Free Hosting & Source Code💖
Channel: Thapa Technical
Date: 2023-07-05

Welcome, Master React with TypeScript Tutorial for Beginners in Hindi👉 Create an Advanced Todo Website with Local storage Integration, Free Hosting, and GitHub Deployment all in One Video. 

In this React and TypeScript project tutorial video, you will learn how to harness the power of React combined with TypeScript to build a sophisticated todo website. Gain a deep understanding of React's core concepts while leveraging the benefits of TypeScript's static typing system.

👉 Source Code: https://www.thapatechnical.com/2023/07/create-website-using-react-with.html

😊 Become Member, get access to perks, free Source code, & more..
https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA/join

😍 Check my Instagram to Connect with me:     https://www.instagram.com/thapatechnical

👩‍💻 Discord Server Link for Programmer to Hangout: https://discord.gg/MdScmCsua6

Here's what you can expect to learn in this tutorial👇

Supercharge Your Development with React and TypeScript: Discover how React, a popular JavaScript library for building user interfaces, can be enhanced with the static typing capabilities of TypeScript to create more reliable and maintainable code.

Explore step-by-step React with TypeScript code instructions, practical examples, Localstrorage integration, and valuable source code for Free for hands-on learning. Discover how to host react with typescript website for free on vercel too. 

By the end of this tutorial, you will have a solid grasp of React and TypeScript, enabling you to create advanced web applications with confidence. Join us on this exciting journey and take your React and TypeScript skills to new heights!


⌚ TIMELINE ⌚
0:00 - Introduction
1:10 - Explaining the difference between Next.js and React
1:35 - Overview of the Todo App
2:30 - Integrating LocalStorage and discussing free hosting options
3:05 - Free Python Classes
3:40 - Installation of Visual Studio Code
4:00 - Installation of React and TypeScript
5:52 - Understanding the package.json file
6:15 - Git and hosting setup
6:50 - Running the application
7:05 - Verifying TypeScript integration
8:00 - Reviewing the app.tsx file
9:25 - Creating a form to add tasks and a button
13:50 - Exploring React component inspection
14:30 - Adding user data to a state variable
15:55 - TypeScript types
18:40 - Understanding the Context API
20:55 - Calling a function to add user data to the state variable
27:45 - Creating a createContext type
32:00 - Implementing the handletodo function to add data
35:30 - Creating a useContext hook
38:15 - Logging the todo data and previous data
40:00 - Displaying tasks in the UI when the user clicks the add button
47:40 - Implementing checkbox toggle for task completion
51:00 - Handling errors
52:25 - Implementing the delete button
56:40 - Creating a Navbar with active and completed states
58:15 - Using React Router Dom and the Link component
1:02:00 - Retrieving URL data with useSearchParams
1:04:30 - Filtering active and completed data
1:06:10 - Implementing LocalStorage functionality
1:11:10 - Adding CSS styles
1:14:05 - Hover effects for active and completed tasks
1:16:40 - Discussing differences between React and Next.js code
1:18:00 - Github Deployment
1:21:00 - Hosting the website for free on Vercel
1:23:00 - Free Python Class
1:24:00 - Conclusion and outro


************* 😍 Must Watch Videos For Web Development 😍 *************

➡️ Complete Reactjs in One video here  https://youtu.be/43IbFDSVdB0

➡️ HTML in One Video: https://youtu.be/pN7BFLfSjFw


➡️ CSS in One video:  https://youtu.be/hkQv0NIxKQY


➡️ CSS FlexBox in 30 Minutes: https://youtu.be/6L-PAmZajfA


➡️ JavaScript in One video:   https://youtu.be/PODgPW-hbfU


➡️  ECMAScript 6 in One Video:  https://youtu.be/Iek4DtRobLA


➡️ HTML5 in one video:  https://youtu.be/4V0-YpO-KZo


➡️ CSS3 in one video:  https://youtu.be/TFrFx7H5ZI8


➡️ Bootstrap4 in One video:   https://youtu.be/yZnNnvXO8HI


➡️ Jquery in One video:  https://youtu.be/PNvyPEQ0y-I


➡️ JSON in one video:  https://youtu.be/bMqevPKAPD4


➡️ ReactJS in one video:  https://youtu.be/43IbFDSVdB0


➡️ PHP in One Video:  https://youtu.be/3024Kc6SDJ0


➡️ NodeJS in one video:  https://youtu.be/ipnWAKoiBt


➡️ MySQL in one video:   https://youtu.be/5bFxbwjN-Gk


 ➡️ Advanced JavaScript in Hindi Playlist: https://www.youtube.com/playlist?list=PLwGdqUZWnOp0hSGwasCjbrWSPrEKqB_kz&disable_polymer=true


➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: https://youtu.be/Iek4DtRobLA


➡️ JavaScript Game Development Series in 2020: https://www.youtube.com/playlist?list=PLwGdqUZWnOp1Ub0K1CBuLxLOEN6wTq2bg