9 DAYS STUDY PLAN: Day 01, 00:00 - Introduction 0:02:34 - What is React? 0:10:32 - Using React in HTML 0:20:33 - Create React App Tool 0:25:11 - Running Project 0:30:36 - Understanding React Project 1:12:40 - Class Component 1:18:24 - Props 1:30:04 - Props in Class Component Day 02, 1:33:53 - React Developer Tools Browser Extension 1:38:03 - Conditional Rendering 1:50:34 - List 1:56:55 - List Keys 2:03:40 - Inline CSS Styling 2:10:27 - CSS Stylesheet 2:19:41 - Creating State 2:29:49 - Creating State in Class Components 2:37:52 - Multiple State in Hooks 2:43:49 - State with Object 2:47:35 - Updating Object in State 2:58:09 - Updating Object in Class Component 3:01:51 - Updating Arrays in State Day 03, 3:13:33 - useEffect 3:24:34 - Using useEffect in Different Ways 3:30:45 - Creating Form 3:35:28 - Getting Input value to State 3:41:09 - Submitting Form 3:46:57 - Handling Multiple Input Fields 4:00:24 - Simplifying onChange Handler 4:17:01 - Textarea in React Day 04, 4:22:17 - Creating Game Project: Guessing the number 4:43:58 - React Router Introduction 4:44:32 - React Router Setup 5:01:04 - Router Links 5:07:37 - Route Parameters 5:17:05 - Nested Routes 5:24:15 - Navigating Programmatically Day 05, Section 5: Project Setup and User Management 5:32:51 - React Hook Repo Setup 5:36:02 - Project Setup 5:41:37 - Displaying User Data 5:56:11 - Adding New User 6:20:07 - Updating User Data 6:41:24 - Deleting User Day 06, 6:52:18 - Why Testing? 7:05:21 - Creating Test Suite File 7:06:30 - Creating Test Case 7:07:47 - Running Tests 7:10:38 - Writing Test Assertions 7:18:21 - Testing: Inputs are empty Day 07 7:26:33 - Backend Setup 7:32:23 - Environment Variables Configuration 7:37:06 - Creating Routes & Controllers 7:45:00 - Testing API routes with Thunderclient 7:52:03 - Connecting Database 8:00:21 - Creating Product Model 8:04:54 - Building Get Products API 8:10:37 - Building Get Single Product API 8:17:58 - Building Order API Day 08, 8:39:08 - Create React Project 8:41:05 - Frontend Project Setup 8:45:36 - Creating HomePage 8:51:21 - Creating Header & Footer Components 8:55:04 - Breaking Page to Components 8:58:02 - Integrating Get Products API Day 09, 9:03:35 - Fixing CORS Error 9:07:47 - Showing Product Card Details 9:26:20 - Implementing Product Search 9:37:19 - Creating Product Detail Page 9:52:05 - Add To Cart Functionality
நீங்கள் செய்தது போல் node npx create-react-app NewReactApp என்று கொடுத்து வரும் result இதுதான் என்ன தவறு என்று தெரியவில்லை.but node -v ok.please என்ன செய்வது.
hi sir, i have learned lot through this vedio ,thankyou for this ,but while practicing the project setup about the list of the users in table ,after trying multiple times after adding the button the error like cannot read properties of null (useState ) is raising can you say me the possible solution sir..
HiBro, iam around lots of videos watched your channel and then Angular, react both UI FRAME WORK you Also teach is ultimate my personal opinion please you started own Institute in or online. Bcz iam BIG fan with you. ("JVL")
Great video for react. but very hard to concentrate both functional and class component , but mostly industry preferred function , so you can make seperate video for both
bro update won't work correctly, try entering multiple new users and update any one of them it will update all the new entry users.....please check and reply bro...
yes that's what I asked for example can we use xampp phpadmin sql database and make it original without using fack json. Can it? yes அதைத்தான் நான் கேட்டேன் உதாரணத்துக்கு xampp phpadmin sql database பயன்படுத்தலாமா fack json பயன்படுத்தாமல் original ஆக செய்ய வேண்டும். அது முடியுமா.
Very Nice 🎉 Great Effort bro. If possible pls make a tutorial for a full ecommerce project with a front end back end . Login register etc. Thanks in advance.
At Showing Product Card Details - I faced an issue after changing the code to this .then(res => setProducts(res.products)) and {products.map(product => )} on Home.js, broswer la irundha list of products missing, oru product kuda kamikala, ProductCard.js component la image, name, price and rating code ninga sonamari modified. indha issue epadi solve pani products list down pananum, na enga miss paniruken nu soldringala bro please.
hi bro i followed the tutorial its very nice i ever seen before...iam following the same code but my component get rendering every time while typing the number in the text pls clear my doubt bro
Hi initially thanks for making this video. And I am getting an issue when I'm trying to type or update the input field the entire page is getting refreshed. Please assist how to handle the error. Video minutes : 6:27:20 And the code is function onChangeHandler(id, key, value){ setusers((users)=>{ users.map(user=>{ user.id === id ? {...user, [key]: value } : user; }) }) }
Hi Can't you do php like sql database in react where can you save cgange data?hi react இல் php மாதிரி sql database அப்படி செய்ய முடியாதா data எங்கே save cgange செய்யலாமா.
Sir i have a suspicion sir u said without any loading it will lead to next web page using data but how the data is process to give next web page is it doesnt request?
If there is a request from a browser, React will get it and send it to the server but it will not load the entire page. React will keep the current page DOM in its memory, and then once it gets the data from the server, it will compare the current DOM to check which part of the DOM needs to make the changes. Then it only updates those DOMs (that particular component) with the new data without refreshing the entire page.
In html each and every time the page will be refresh, but react is not like that - react render and re-render the components without refreshing the page, ⚛️ thats the difference
logesh na, oru component ta touch panna odanae athoda file ku poguthae... athu epdi ? usual la antha component ta right click panni go to defintion kudutha pogum! But neega hover pannum bothae link ku maari show aaguthu and click panna antha def ku poguthu 🤔🤔 epdi nu sollunga
Chapters:
Section 1: Introduction to React
00:00 - Introduction
0:02:34 - What is React?
0:10:32 - Using React in HTML
Section 2: Getting Started with React
0:20:33 - Create React App Tool
0:25:11 - Running Project
0:30:36 - Understanding React Project
Section 3: React Basics
1:12:40 - Class Component
1:18:24 - Props
1:30:04 - Props in Class Component
1:33:53 - React Developer Tools Browser Extension
1:38:03 - Conditional Rendering
1:50:34 - List
1:56:55 - List Keys
2:03:40 - Inline CSS Styling
2:10:27 - CSS Stylesheet
2:19:41 - Creating State
2:29:49 - Creating State in Class Components
2:37:52 - Multiple State in Hooks
2:43:49 - State with Object
2:47:35 - Updating Object in State
2:58:09 - Updating Object in Class Component
3:01:51 - Updating Arrays in State
3:13:33 - useEffect
3:24:34 - Using useEffect in Different Ways
3:30:45 - Creating Form
3:35:28 - Getting Input value to State
3:41:09 - Submitting Form
3:46:57 - Handling Multiple Input Fields
4:00:24 - Simplifying onChange Handler
4:17:01 - Textarea in React
Section 4: Project Exercise
4:22:17 - Creating Game Project: Guessing the number
Section 5: React Router
4:43:58 - React Router Introduction
4:44:32 - React Router Setup
5:01:04 - Router Links
5:07:37 - Route Parameters
5:17:05 - Nested Routes
5:24:15 - Navigating Programmatically
Section 5: Project Setup and User Management
5:32:51 - React Hook Repo Setup
5:36:02 - Project Setup
5:41:37 - Displaying User Data
5:56:11 - Adding New User
6:20:07 - Updating User Data
6:41:24 - Deleting User
Section 6: Testing
6:52:18 - Why Testing?
7:05:21 - Creating Test Suite File
7:06:30 - Creating Test Case
7:07:47 - Running Tests
7:10:38 - Writing Test Assertions
7:18:21 - Testing: Inputs are empty
Section 7: Building Ecommerce Project
7:26:33 - Backend Setup
7:32:23 - Environment Variables Configuration
7:37:06 - Creating Routes & Controllers
7:45:00 - Testing API routes with Thunderclient
7:52:03 - Connecting Database
8:00:21 - Creating Product Model
8:04:54 - Building Get Products API
8:10:37 - Building Get Single Product API
8:17:58 - Building Order API
Section 8: Ecommerce Project FrontEnd
8:39:08 - Create React Project
8:41:05 - Frontend Project Setup
8:45:36 - Creating HomePage
8:51:21 - Creating Header & Footer Components
8:55:04 - Breaking Page to Components
8:58:02 - Integrating Get Products API
9:03:35 - Fixing CORS Error
9:07:47 - Showing Product Card Details
9:26:20 - Implementing Product Search
9:37:19 - Creating Product Detail Page
9:52:05 - Add To Cart Functionality
Section 7 Connecting Database use Mysql Workbench how to connect database ...
9 DAYS STUDY PLAN:
Day 01,
00:00 - Introduction
0:02:34 - What is React?
0:10:32 - Using React in HTML
0:20:33 - Create React App Tool
0:25:11 - Running Project
0:30:36 - Understanding React Project
1:12:40 - Class Component
1:18:24 - Props
1:30:04 - Props in Class Component
Day 02,
1:33:53 - React Developer Tools Browser Extension
1:38:03 - Conditional Rendering
1:50:34 - List
1:56:55 - List Keys
2:03:40 - Inline CSS Styling
2:10:27 - CSS Stylesheet
2:19:41 - Creating State
2:29:49 - Creating State in Class Components
2:37:52 - Multiple State in Hooks
2:43:49 - State with Object
2:47:35 - Updating Object in State
2:58:09 - Updating Object in Class Component
3:01:51 - Updating Arrays in State
Day 03,
3:13:33 - useEffect
3:24:34 - Using useEffect in Different Ways
3:30:45 - Creating Form
3:35:28 - Getting Input value to State
3:41:09 - Submitting Form
3:46:57 - Handling Multiple Input Fields
4:00:24 - Simplifying onChange Handler
4:17:01 - Textarea in React
Day 04,
4:22:17 - Creating Game Project: Guessing the number
4:43:58 - React Router Introduction
4:44:32 - React Router Setup
5:01:04 - Router Links
5:07:37 - Route Parameters
5:17:05 - Nested Routes
5:24:15 - Navigating Programmatically
Day 05,
Section 5: Project Setup and User Management
5:32:51 - React Hook Repo Setup
5:36:02 - Project Setup
5:41:37 - Displaying User Data
5:56:11 - Adding New User
6:20:07 - Updating User Data
6:41:24 - Deleting User
Day 06,
6:52:18 - Why Testing?
7:05:21 - Creating Test Suite File
7:06:30 - Creating Test Case
7:07:47 - Running Tests
7:10:38 - Writing Test Assertions
7:18:21 - Testing: Inputs are empty
Day 07
7:26:33 - Backend Setup
7:32:23 - Environment Variables Configuration
7:37:06 - Creating Routes & Controllers
7:45:00 - Testing API routes with Thunderclient
7:52:03 - Connecting Database
8:00:21 - Creating Product Model
8:04:54 - Building Get Products API
8:10:37 - Building Get Single Product API
8:17:58 - Building Order API
Day 08,
8:39:08 - Create React Project
8:41:05 - Frontend Project Setup
8:45:36 - Creating HomePage
8:51:21 - Creating Header & Footer Components
8:55:04 - Breaking Page to Components
8:58:02 - Integrating Get Products API
Day 09,
9:03:35 - Fixing CORS Error
9:07:47 - Showing Product Card Details
9:26:20 - Implementing Product Search
9:37:19 - Creating Product Detail Page
9:52:05 - Add To Cart Functionality
bro functional component vachi soli kudunga bro
2,3 channel pathan bro.enaku step by step ah ella topics ah order padi purira Mari solreenga . Thanks
underrated react tutorial for beginners
Timestamps please
Check the description
Excellent tutorial which I have ever seen in youtube.. keep going
நீங்கள் செய்தது போல் node npx create-react-app NewReactApp என்று கொடுத்து வரும் result இதுதான் என்ன தவறு என்று தெரியவில்லை.but node -v ok.please என்ன செய்வது.
hi sir, i have learned lot through this vedio ,thankyou for this ,but while practicing the project setup about the list of the users in table ,after trying multiple times after adding the button the error like cannot read properties of null (useState ) is raising can you say me the possible solution sir..
HiBro, iam around lots of videos watched your channel and then Angular, react both UI FRAME WORK you Also teach is ultimate my personal opinion please you started own Institute in or online. Bcz iam BIG fan with you. ("JVL")
I Hope that happens in future. Thanks
Amazing tutorial bro. Ur channel deserves 1M subs. we will always be there to support you.
Really great teaching bro
react developer aaga javascript oda data structures and algorithms (DSA) therinchikanuma bor?
23.25..react folder path eppadi vaikarathu solrigalaaa
Thalaiva vera maari panta poo, enna oru thelivu, enna oru purithal apdiye java ku oru video podu thala
Martin Donald Miller Matthew Lopez Lisa
Bro springboot advanced videos podunka
Ultimate bro🔥 Bt timestamps kodutha nalla irkum
See description bro
This is really a great Video thank you sir
I have learn top to bottom in react website sir , i have small doubt i pull the code in github ,but i dono How to run the terminals
bro the video was so great
thank you sir😍
Please do video on redux
Really you are doing a amazing job brooo. Dont stop it, Keep doing great things.
Ur videos are more useful ❤❤❤❤ thank you
Awesome tutorial, thank you for this one! ♥
im always love your videos, i learned laravel,now im going to learn react
Happy to hear that!
Great video for react. but very hard to concentrate both functional and class component , but mostly industry preferred function , so you can make seperate video for both
Lp0000😊 pp 0
Happy to see great content creators like you ❤
The effort you did will make bunch of knowledgeable crowd, Thanks a lot ❤❤❤
React and React js are different or same ?
Same dan bro, sila per react nu solvanga, sila per reactjs nu solvanga avlodan difference
Thanks bro
@@FunGinbro sql padika data base padikanuma ila sql mattum padicha pothuma sql and my sql same ah bro soluga
You've done an outstanding job. Kudos to Logesh Bro !
Nodemon file not working
Spring boot video podunga sir
Bro neenga sollitharugiradhu purigiradhu aana hack panni hack panni poduradhunala konjam understand Panna kashttama irukku.yen kitta laptop illa irundha purujirukkum.
I try your code but search function not working.any time comes only empty array
bro update won't work correctly, try entering multiple new users and update any one of them
it will update all the new entry users.....please check and reply bro...
[nodemon] app crashed - waiting for file changes before starting... but not connect mongodb
yes that's what I asked for example can we use xampp phpadmin sql database and make it original without using fack json. Can it? yes அதைத்தான் நான் கேட்டேன் உதாரணத்துக்கு xampp phpadmin sql database பயன்படுத்தலாமா fack json பயன்படுத்தாமல் original ஆக செய்ய வேண்டும். அது முடியுமா.
Very Nice 🎉 Great Effort bro. If possible pls make a tutorial for a full ecommerce project with a front end back end . Login register etc. Thanks in advance.
Anna just now i learnt html css js shall i directly start learning as a beginner or ahould i learn some pre requisite?? Pls reply i am confused
In conditional rendering there's file called gun and one button pull triggering athu en video la illa
Bro neenga enga work pandringa 🙄
Sir can you provide notes for reactjs based on this tutorial pls ?....
❤ Mass bro ..... Tharamaana video 💗💗💗💗💗
At Showing Product Card Details - I faced an issue after changing the code to this .then(res => setProducts(res.products)) and {products.map(product => )} on Home.js, broswer la irundha list of products missing, oru product kuda kamikala, ProductCard.js component la image, name, price and rating code ninga sonamari modified. indha issue epadi solve pani products list down pananum, na enga miss paniruken nu soldringala bro please.
yes i have same problem not help this men
Hi I am from Sri Lanka you are not only a developer but also the best teacher keep it up your work!
Hi I am form Eelam 🐅
Bro, React App eppudi github la update pandrathunnu sollu bro...
hi bro i followed the tutorial its very nice i ever seen before...iam following the same code but my component get rendering every time while typing the number in the text pls clear my doubt bro
Hi initially thanks for making this video.
And I am getting an issue when I'm trying to type or update the input field the entire page is getting refreshed. Please assist how to handle the error.
Video minutes : 6:27:20 And the code is
function onChangeHandler(id, key, value){
setusers((users)=>{
users.map(user=>{
user.id === id ? {...user, [key]: value } : user;
})
})
}
use preventDefault method
Hi Can't you do php like sql database in react where can you save cgange data?hi react இல் php மாதிரி sql database அப்படி செய்ய முடியாதா data எங்கே save cgange செய்யலாமா.
This is frontend library . You are asking about the backend which can be handle php, python or nodejs languages only
Pull trigger oru button gun.js laam entha timing atha sollave illa
Redux full video podunga bro
Ennum video na full mudikala, oru doubt Reactla JS ku bathiila Typescript use pannalama?
give a playlist to arrange the concepts bro we have much more better for learn
Bro also please teach about Functional Components.
Amazing tutorial thanks a lot bro❤❤❤❤
Awesome explanation...Best wishes..
Bro onnume puriyala bro yen bro react 11hrs course la irruntha ellam Details um Eduthinga na athula irrunthu start panne ippa athula irrunthu continue panrathune therla bro 🥺🥹
bro enaki api request thunderclient la varamatekidu
yaarukavudu therija solluga pls
Sir app development iku videos iruka sir from basic
bro we can stop the render setimeout afetr rendered once using [] in useffect
looking for react notes and interview questions bro..
Super bro create react app bathilaa. Vite use panni irrukalaam
How to contact you .. ? i have doubt in your video
Bro enna Inga team la sethukkonga bro ,Naa unga kuda irundhu ungalukku help panra bro one chance kudunga bro namba oru team ah irukkalam bro
Bro 1:39:52 gun component ????
I clone the project but ui not display anything fix my issue heeaser and footer visible but container and images not ahowing its empty why?
Thanks a lot bro .... keep doing this amazing work ❤🎉
Most welcome 😊
Bro react native course ku konjam poduga bro
Spring boot tutorial venum
editable text la value la kudukkiratha edit panna viduthilla bro
❤❤❤❤
UnderRated Gem nae nee❤
Folder path ku epdi porathy
🎉🎉
Is this react 19??
React hooks ku mattum thaniya video create pannunga bro.
Angular 2 full course irruka bro
Nice course but please provide a timestamp
post next js advanced course video
Super , excellent video bro
Fantastic tutorial forever.Thanks brother.
Sir i have a suspicion sir u said without any loading it will lead to next web page using data but how the data is process to give next web page is it doesnt request?
If there is a request from a browser, React will get it and send it to the server but it will not load the entire page. React will keep the current page DOM in its memory, and then once it gets the data from the server, it will compare the current DOM to check which part of the DOM needs to make the changes. Then it only updates those DOMs (that particular component) with the new data without refreshing the entire page.
Awesome bro ❤
thanks bro
How to connect with you bro
Keep Growing🤗
❤Tutorial completed 🔥🔥
Timestamp please
Bro const text = ' my values ${brant} ; is not working... Why
Const text = `my values ${brant} `
Template strings should have ` symbol
html also send request to load next and next web page? Here react also send request for data then wat is the difference sir?
In html each and every time the page will be refresh, but react is not like that - react render and re-render the components without refreshing the page, ⚛️ thats the difference
react native gu itha mathirei oru video poduga bro
logesh na, oru component ta touch panna odanae athoda file ku poguthae... athu epdi ? usual la antha component ta right click panni go to defintion kudutha pogum! But neega hover pannum bothae link ku maari show aaguthu and click panna antha def ku poguthu 🤔🤔 epdi nu sollunga
Need to install vs code extension
Bro is it from beginner to advance
4:44:00 react router
Hi
Super 🎉keep it up
Bro ellam react hooks vechi video podunga
I love all your videos. I have been learning so far through your channel. I have a request can you make socket io related videos in react
Please try to upload same for vue js