Master Next.JS with TypeScript👉 Build an Advanced TODO App with Local Storage in Hindi
24.8 هزار بار بازدید -
پارسال
-
Welcome, to Next.JS & TypeScript
Welcome, to Next.JS & TypeScript Tutorial in Hindi. Learn how to build a feature-rich TODO app with TypeScript, and Next.js in Hindi.
👉 Student License - https://jb.gg/JetBrainsStudentLicenses
👉 1 Month WebStorm Free - https://jb.gg/WebStorm_Download
👉 3 Month WebStorm License - https://jb.gg/3Months_WebStormFree
( Coupon - 8JCYX-2P7FT-N3XKW-G77AX-UEAX5 ) Valid Till Sep 15th 2023
💖💖 Get Source Code Here: https://www.thapatechnical.com/2023/0... 💖💖
Learn how to build a feature-rich TODO app with React, TypeScript, and Next.js using WebStorm IDE. This YouTube tutorial covers local storage, React hooks, TypeScript data types, and efficient state management with Context API. Discover WebStorm powerful features, including refactoring and UI customization. Enhance your app with React icons, CSS styling, and even GitHub integration. Whether you're a beginner or experienced developer, this video provides step-by-step guidance for creating a polished TODO app. Subscribe for more exciting content and start building amazing apps today!
😊 Become Member, get access to perks, free Source code, & more..
@thapatechnical
😍 Check my Instagram to Connect with me: Instagram: thapatechnical
👩💻 Discord Server Link for Programmer to Hangout: Discord: discord
✌ Website Link: https://www.thapatechnical.com
⌚TIMELINE ⌚
0:00 - TODO APP REVIEW
1:40 - Demo of Localstorage & React Hooks
3:10 - WebStorm IDE offerings
6:00 - WebStorm Installation
6:38 - WebStorm Toolbox
8:00 - WebStorm Overview
8:30 - WebStorm default Web Technologies support
9:25 - Installing Next.js & TypeScript in WebStorm
10:30 - Working with the package.json file for versioning
11:14 - Overview of the APP design
11:30 - Creating the home page
12:30 - Personalizing WebStorm UI theme & fonts
14:19 - Creating a form to add data to the app
15:12 - Utilizing WebStorm powerful refactoring capabilities
16:19 - Creating a TSX file and input field
17:36 - CSS updates
18:00 - Creating a form button to add data
18:30 - State management using useState hook
21:05 - React server vs. client components
22:30 - Passing data on form submit to the Context API
23:30 - Defining TypeScript data types
25:10 - State management using the Context API
27:45 - Creating a Provider in the Context API
29:00 - Defining the handleTodo function to add data to the state variable
32:30 - Important TypeScript feature: Defining object types
34:50 - Addressing warnings
36:00 - Passing data type to the Provider state & returning data
38:00 - Creating the createContext object type
40:30 - Creating the useContext custom hook
43:00 - Importing the handleTodo function using the custom hook
44:00 - Writing crucial code
45:50 - Resolving an error
46:20 - Displaying user data when the user clicks the add button
47:20 - WebStorm awesome feature updates
48:15 - Creating a page to show user todo data
57:45 - Implementing task completion logic
1:03:00 - Deleting a task when the user clicks the delete button
1:06:45 - Creating a navbar with All, Active, Completed states
1:09:00 - Retrieving URL string data in Next.js
1:11:40 - Filtering tasks based on All, Active, Completed states
1:17:00 - Localstorage functionality
1:23:00 - Adding React icons
1:24:30 - Styling the app using CSS
1:34:35 - Adding code to GitHub using WebStorm
1:38:00 - Free Source Code
************ 😍 Must Watch Videos For Web Development 😍 ************
➡️ Complete Reactjs in One video here ReactJS For Beginners in One Video in...
➡️ HTML in One Video: Learn HTML in One Video in Hindi from...
➡️ CSS in One video: Learn Complete CSS In One Video In Hindi
➡️ CSS FlexBox in 30 Minutes: CSS FlexBox in 30 Minutes in Hindi 2022
➡️ JavaScript in One video: JavaScript in One Video in Hindi
➡️ ECMAScript 6 in One Video: ES5 & ES6 | ECMAScript 6 in One Video...
➡️ HTML5 in one video: HTML5 Tutorial in One Video in Hindi ...
➡️ CSS3 in one video: Learn Complete CSS3 In One Video In H...
➡️ Bootstrap4 in One video: Bootstrap 4 in One Video in HINDI 2019
➡️ Jquery in One video: jQuery in One Video in Hindi 2019
➡️ JSON in one video: JSON in One Video in Hindi 2018
➡️ ReactJS in one video: ReactJS For Beginners in One Video in...
➡️ PHP in One Video: PHP TUTORIAL IN ONE VIDEO IN HINDI 2019
➡️ NodeJS in one video: ipnwakoibt
➡️ MySQL in one video: Complete SQL & MySQL in One Video in ...
➡️ Advanced JavaScript in Hindi Playlist: Advanced JavaScript Tutorial in Hindi...
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: ES5 & ES6 | ECMAScript 6 in One Video...
➡️ JavaScript Game Development Series in 2020: JavaScript Game Development Hindi 2020
👉 Student License - https://jb.gg/JetBrainsStudentLicenses
👉 1 Month WebStorm Free - https://jb.gg/WebStorm_Download
👉 3 Month WebStorm License - https://jb.gg/3Months_WebStormFree
( Coupon - 8JCYX-2P7FT-N3XKW-G77AX-UEAX5 ) Valid Till Sep 15th 2023
💖💖 Get Source Code Here: https://www.thapatechnical.com/2023/0... 💖💖
Learn how to build a feature-rich TODO app with React, TypeScript, and Next.js using WebStorm IDE. This YouTube tutorial covers local storage, React hooks, TypeScript data types, and efficient state management with Context API. Discover WebStorm powerful features, including refactoring and UI customization. Enhance your app with React icons, CSS styling, and even GitHub integration. Whether you're a beginner or experienced developer, this video provides step-by-step guidance for creating a polished TODO app. Subscribe for more exciting content and start building amazing apps today!
😊 Become Member, get access to perks, free Source code, & more..
@thapatechnical
😍 Check my Instagram to Connect with me: Instagram: thapatechnical
👩💻 Discord Server Link for Programmer to Hangout: Discord: discord
✌ Website Link: https://www.thapatechnical.com
⌚TIMELINE ⌚
0:00 - TODO APP REVIEW
1:40 - Demo of Localstorage & React Hooks
3:10 - WebStorm IDE offerings
6:00 - WebStorm Installation
6:38 - WebStorm Toolbox
8:00 - WebStorm Overview
8:30 - WebStorm default Web Technologies support
9:25 - Installing Next.js & TypeScript in WebStorm
10:30 - Working with the package.json file for versioning
11:14 - Overview of the APP design
11:30 - Creating the home page
12:30 - Personalizing WebStorm UI theme & fonts
14:19 - Creating a form to add data to the app
15:12 - Utilizing WebStorm powerful refactoring capabilities
16:19 - Creating a TSX file and input field
17:36 - CSS updates
18:00 - Creating a form button to add data
18:30 - State management using useState hook
21:05 - React server vs. client components
22:30 - Passing data on form submit to the Context API
23:30 - Defining TypeScript data types
25:10 - State management using the Context API
27:45 - Creating a Provider in the Context API
29:00 - Defining the handleTodo function to add data to the state variable
32:30 - Important TypeScript feature: Defining object types
34:50 - Addressing warnings
36:00 - Passing data type to the Provider state & returning data
38:00 - Creating the createContext object type
40:30 - Creating the useContext custom hook
43:00 - Importing the handleTodo function using the custom hook
44:00 - Writing crucial code
45:50 - Resolving an error
46:20 - Displaying user data when the user clicks the add button
47:20 - WebStorm awesome feature updates
48:15 - Creating a page to show user todo data
57:45 - Implementing task completion logic
1:03:00 - Deleting a task when the user clicks the delete button
1:06:45 - Creating a navbar with All, Active, Completed states
1:09:00 - Retrieving URL string data in Next.js
1:11:40 - Filtering tasks based on All, Active, Completed states
1:17:00 - Localstorage functionality
1:23:00 - Adding React icons
1:24:30 - Styling the app using CSS
1:34:35 - Adding code to GitHub using WebStorm
1:38:00 - Free Source Code
************ 😍 Must Watch Videos For Web Development 😍 ************
➡️ Complete Reactjs in One video here ReactJS For Beginners in One Video in...
➡️ HTML in One Video: Learn HTML in One Video in Hindi from...
➡️ CSS in One video: Learn Complete CSS In One Video In Hindi
➡️ CSS FlexBox in 30 Minutes: CSS FlexBox in 30 Minutes in Hindi 2022
➡️ JavaScript in One video: JavaScript in One Video in Hindi
➡️ ECMAScript 6 in One Video: ES5 & ES6 | ECMAScript 6 in One Video...
➡️ HTML5 in one video: HTML5 Tutorial in One Video in Hindi ...
➡️ CSS3 in one video: Learn Complete CSS3 In One Video In H...
➡️ Bootstrap4 in One video: Bootstrap 4 in One Video in HINDI 2019
➡️ Jquery in One video: jQuery in One Video in Hindi 2019
➡️ JSON in one video: JSON in One Video in Hindi 2018
➡️ ReactJS in one video: ReactJS For Beginners in One Video in...
➡️ PHP in One Video: PHP TUTORIAL IN ONE VIDEO IN HINDI 2019
➡️ NodeJS in one video: ipnwakoibt
➡️ MySQL in one video: Complete SQL & MySQL in One Video in ...
➡️ Advanced JavaScript in Hindi Playlist: Advanced JavaScript Tutorial in Hindi...
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: ES5 & ES6 | ECMAScript 6 in One Video...
➡️ JavaScript Game Development Series in 2020: JavaScript Game Development Hindi 2020
پارسال
در تاریخ 1402/04/07 منتشر شده
است.
24,892
بـار بازدید شده