React Js Tutorial for beginners in Tamil 2024 |Full Course for Beginners |Basic to Advanced concepts
Вставка
- Опубліковано 17 лип 2024
- More Free Courses: balachandra.in #reactjsfullcourse #tamil #tamilprogramming #webdevelopmenttraining #webdevelopmentforbeginners #javascript #frontendwebdevelopment #tamilprogrammer #educationalvideo #2024
React Js complete course for beginners in #tamil is a complete beginner tutorial with full of live coding. Two apps developed from scratch to teach the concepts clearly.
Website: balachandra.in/
Whatsapp group : chat.whatsapp.com/IUMRZiuvnow...
LinkedIn: / berin-balachandar-77aa...
Email us: contactdhuddu@gmail.com
JavaScript Full Course in Tamil: • JavaScript Tutorial fo...
CSS Full Course in Tamil : • CSS Tutorial for begin...
Html Full Course in Tamil: • HTML Tutorial for begi...
Resources:
Official: react.dev/learn
React Router: reactrouter.com/en/main
Styled Components: styled-components.com/
Dave Grey's source code:
CSS code for social media app: github.com/gitdagray/react_co...
CSS code for to do list app: github.com/gitdagray/react_fe...
(00:00:00) Intro
(00:07:19) Why React?
(00:24:12) Setup
(00:43:07) JSX
(01:05:00) React_Functional Components
(01:20:35) React_Applying CSS Styles
(01:32:05) React_Click Events
(01:46:40) React_useState Hook
(02:15:32) React_List and Keys
(02:32:15) React_Icons.
(03:13:35) React_Props & Prop Drilling
(03:42:33) React_Controlled Inputs
(04:28:53) React_Project Challenge 1
(04:45:19) React_UseRef Hook.
(04:50:31) React_UseEffect Hook.
(04:59:33) React_Local Storage.
(05:03:27) React_Fetch API DATA.
(05:44:22) React_CRUD Operations.
(06:16:26) React_Project Challenge 2 Fetch Data
(06:42:24) React_Router_V6.
(08:21:56) React_CSS.
(08:29:34) React_Axios API Requests
(09:10:17) React_Custom Hooks.
(09:38:35) React_Context API & useContext Hook.
(10:05:58) Deploy Your React Apps
Just now i got completed this 10hrs course. I have learned lot from this tutorial. The man who has innocent face with pure heart❤ Thanks Bala
How many hours you take to do complete this?
@@ilangoselvan2346 6days
@@ilangoselvan2346 2 days
@@ilangoselvan2346 have taken one week to complete this course.
Introduction.
4:29-Why_React?
26:13-React_Dev_Tools_Extension.
28:04-React_E7+_Snippets.
43:10-React_JSX.
45:16-React_DOM.
48:18-React_Components.
1:05:05-React_Functional_Components.
1:07:37-React_Snippets_ShortCut_Keys.
1:20:39-React_Applying_CSS_Styles.
1:32:05-React_Click_Events.
1:46:44-React_UseState_Hook.
2:15:35-React_List_And_Keys.
2:32:15-React_Icons.
3:42:33-React_Controlled_inputs.
4:28:53-React_Project_Challenge-1
4:45:19-React_UseRef_Hook.
4:50:31-React_UseEffect_Hook.
4:59:33-React_LocalStorage.
5:03:27-React_Fetch_API_DATA.
5:44:22-React_CRUD_Operations.
6:16:26-React_Project_Challenge-2_Fetch_DATA.
6:42:24-React_Router_V6.
8:21:56-React_CSS.
8:29:34-React_Axios_API_Requests.
9:10:17-React_Custom_Hooks.
9:38:35-React_Context_API & Usecontext_Hook.
10:05:58-React_Deploy_App
தான் கற்ற கல்வியை... பலரும் கற்க வேண்டும் என்று தாங்கள் எடுத்த முயற்சி மிகவும் பாராட்டக்குறியது.. Thanks bala sir💙🎉🙏🏻
As already you said, No one can explain React JS like you .. Marvelous.... 🎉
Thank you so much ❤️
@@Balachandra_in Bro romba thanks...naa oru mechanical department... But ipa oru IT company la web developer aa join paniruka.... Na from the basics to react varaikum unga chennaltha kathukita.... Romba thanks .. Apudiye react-native course um potigana nala erukum🙏🙏🙏🙏
@@jeevansathish7166 epdi bro job search paniga na pakura jobs lam 2to4yrs experice kakuraga fresher eh eduka marturaga I'm trying for 1mon but no job pls help bro
Bro please make bootstrap video
@@jeevansathish7166 hi bro, I'm also looking for web developer job. Html, css and js therium self learned than. Ipa react intha course pathu than padichitu iruken. Ninga epdi job eduthinganu solunga bro, nanum try pani pakren.
Hello Bala, This is THE BEST tutorial in any technology that I have gone thru in my 17+ years in IT carrier. Awesome job. While in the process of watching your video and trying the code in parallel, lots of time in the middle of the night I couldn’t refrain watch/practicing, this is only because the way you took this course to the core which reminding me of reading “Ponniyin Selvan” novel , which let you not stop reading it as it keeps curious to know what is next, what is next. Now going to check all your other videos as well. Keep posting the great content. All the very best for your endeavors - “Together let’s make education free” “Let’s Earn Money, Let’s Grow Money and Let’s Give Money”
Sir, I have one doubt. You're in IT field. Then why do you need these kinds of tutorials.
@@naveen_nb7 vechaan paaru aapu😂
@@naveen_nb7 Revision kaaga irrukkalaam
@@naveen_nb7 True software engineers will always update their knowledge and not afraid of new technology bro. So IT industry la irukanumnah, niraiya earn pannanumnah then padichittae irukka ready ah irukanum :)
may be avaru angular use panitu irundhurklam,ipa new project react.js la
assign aairkum@@ganesh186
Awesome tutorial. I'm new to react. I feel really effortless when I'm watching this. Thanks a lot 👍
OMG Awesome clarity in the tutorial, really helped a lot in learning React, try to do more courses in React like complete web application development end to end. Even though tons video available in internet when we hear it in Tamil that makes a difference,,, 👏🙏🤝
I have been going through many React courses, but I really wanted to know how React simplifies Js code, many videos didn't provide that. But got that clarity in first 10 mins ! Thank you!
Thanks a lot bro! I am happy to read this
The way you explain the concepts is very well understanding and interesting to watch continuously... Thank you..
After First one hour : I found a gem 💎tutorial of react 🥰🥰🥰🥰
Thanks 🙏🏼 🙏🏼🙏🏼🙏🏼 kindly finish the full course 👍🏻
Finished next 3 hours
@@productivitypro-wk1mb bro course epdi bro nalla puriyudha... React learn panna easy ah iruka??
Yes bro
Bro JavaScript learn pandrathuku maths therinji erukanuma bro
Hi Bro, This is really awesome. Any one can become Master in React after watching and doing all the exercises you have created. Please do video for Redux as well. It will be more helpful for most of us. This s the best React video I have ever seen. My heartful thanks to you🤩🤩🤩
Jus now completed. Well explained.. react puriama irunthathu course join panium purila ipo clear huh iruku😊
Hi, Bala i watched your complete react video it was awesome. Thanks for providing/sharing the wisdom. I'm expecting more React videos or FSD related full video in Future, I'm eagerly waiting ..
Thanks a lot for this course. You are explaining everything clearly.
Nejamavae great teaching sir thanku so much sir
Really wonderfull.Now, I added React to my carrier professional and profile also. Thanks Bala!.Pls continue your service..🤩''dhudduu"🤩
such a wonderful tutorial bro. i have learned more from your videos.keep rocking.
Thanks . I am a java developer for 15 years . I work somewhere fulltime and also do freelancing . I always wanted to learn react . Some freelance client asked me to debug a react project . After going thru this tutorial i will start that freelance project 😂😂
How to be freelancer?
@@subrmaninanchenniappan4059 is there scope for freshers in java ?
Really Super bro...
Need complete typescript & Next JS topic wise playlist ...
Thank you so much ..........
Hi Bala, Thank you very much Bala for making this worderful learning tutorial! Not only for beginners, this is much helpful to even experienced people who do not know how to start and where to start to learn the react. Much confident now. Next step is "Practice makes perfect" as you said. Also, the way you teach is something feels like brotherhood feeling. Thanks again and congratulations for your Vision!
Encouragement like this make me believe more in the vision! Thanks for the support bro
@Balachandra_in also bro, expecting complete Typescript tutorials from you as it will lead to strongly typed, clean, readable code standards. Bcaz, i am using typescript in SharePoint Framework webparts (SPFx). But, need to learn typescipt deeply. Also, do you have any idea to plan for doing M365 & Azure development & admin videos? It will be much expected from me and ofcourse every tech people. Thanks bro again.! Cheers!❤
Thanks Bala, I learned a lot in React. this video very useful to me
Just now completed this REACT course and its really extraordinary course, and I have learned lot from this valuable course. Thanks so much for this pleasant way of teaching.
Thank you so much bro. I really enjoyed to learn. This video really helpful for my career. Once agan thank you so much
❤
That goal you told "To reach education free for everyone in the world" makes me to like the video❤...
Thanks @bala for learn the technology in our own language. Thanks again
Successfully completed the course!! Thank you so much bro 🙏
Hello Bala, just got inspired by your way of teaching. Your efforts in explaining each and every concept is phenomenal. Thanks a ton for uploading this video. This is the best tech video tutorial I've ever seen. Expecting a lot more valuable content from you sir!
Thanks for the motivation bro! Sure I am updating the playlist. Kindly forward the videos to ur friends, juniors etc
Amazing tutorial ever. Thanks a lot for your hardwork and effort in helping us learn. It helps a lot..
Yaaruyaa neee , sema sema The great man thanks thala❤❤❤❤
Finally I successfully completed your HTML, CSS, JS and React Full course videos brother.. You are really great man💎 have ever am not seen.. I have no money for updating my career.. You are miracle for many like me.. Your words are boosting , encouraging us.. Definitely we will win.. Thank you is not enough to say you brother.. But really thnx a lottttt Anna❤... After many months, I got hope to get a good job❤... Stay blessed ✨ brother... Once again நன்றி அண்ணா💚
do i need to install anything to learn react or vs code is enought
Vs code is enough
You're such a great tutor bro. Keep teaching! ❤
hi bro,Thanks you very much for making react concepts easier to me. Completion of this video gives me confidence to become front end developer.👋
Super Thalaiva....Nice Teaching✌
Hats of for your dedcation,and Admirable commitment
(00:00:00) Intro
(00:07:19) Why React?
(00:24:12) Setup
(00:43:07) JSX
(01:05:00) React_Functional Components
(01:20:35) React_Applying CSS Styles
(01:32:05) React_Click Events
(01:46:40) React_useState Hook
(02:15:32) React_List and Keys
(02:32:15) React_Icons.
(03:13:35) React_Props & Prop Drilling
(03:42:33) React_Controlled Inputs
(04:28:53) React_Project Challenge 1
(04:45:19) React_UseRef Hook.
(04:50:31) React_UseEffect Hook.
(04:59:33) React_Local Storage.
(05:03:27) React_Fetch API DATA.
(05:44:22) React_CRUD Operations.
(06:16:26) React_Project Challenge 2 Fetch Data
(06:42:24) React_Router_V6.
(08:21:56) React_CSS.
(08:29:34) React_Axios API Requests
(09:10:17) React_Custom Hooks.
(09:38:35) React_Context API & useContext Hook.
(10:05:58) Deploy Your React Apps
0:00-Introduction.
4:29-Why_React?
26:13-React_Dev_Tools_Extension.
28:04-React_E7+_Snippets.
43:10-React_JSX.
45:16-React_DOM.
48:18-React_Components.
1:05:05-React_Functional_Components.
1:07:37-React_Snippets_ShortCut_Keys.
1:20:39-React_Applying_CSS_Styles.
1:32:05-React_Click_Events.
1:46:44-React_UseState_Hook.
2:15:35-React_List_And_Keys.
2:32:15-React_Icons.
3:42:33-React_Controlled_inputs.
4:28:53-React_Project_Challenge-1
4:45:19-React_UseRef_Hook.
4:50:31-React_UseEffect_Hook.
4:59:33-React_LocalStorage.
5:03:27-React_Fetch_API_DATA.
5:44:22-React_CRUD_Operations.
6:16:26-React_Project_Challenge-2_Fetch_DATA.
6:42:24-React_Router_V6.
8:21:56-React_CSS.
8:29:34-React_Axios_API_Requests.
9:10:17-React_Custom_Hooks.
9:38:35-React_Context_API & Usecontext_Hook.
10:05:58-React_Deploy_Apps.
Thanks for effort bro!
React native tutorial upload pannuga bro
Bro... Recording kku yena software use panuringa.?
Thank you for the wonderful way of teaching ReactJs. Its just awesome . Please make a video of react redux..
Wonderful ❤loved your teaching
Thanks a lot bro..🤩🤩 just learn REACT .🎉🎉
Super Bro.. Clear Explanation.. congrats..
Completed sir...thank you so much sir🙏🙏🙏🙏🙏
Nice video bro 🔥
we need another (video) for more concepts in ( ReactJS) 🙂
I completed this full course. Your are explained very well.
Thanks Bala
Thank you very much Bro ❤🙏. It's very useful to me 😊
Sir,, you saved my Career ,, Thank You Soo Much
Crystal Clear explanations, Thank you sir.
Doubt: Sir some are using .jsx instead of .js , which you will prefer sir to use and why?
Anna😍Romba Romba thanks anna......✨For this video And your explaination😍😍
Hello Balachandra, myself vadhiraj and i am a backend developer , but want to become a full stack. The concepts are very well explained here. Thanks for the tutorial. i got the concepts but the syntax are bit confusing for me.
Hi Bala I have completed your tutorial simple superb. I learned React JS Thankyou so much. Waiting for your React JS with redux videos.
Super bro good....(02:15:32) React_List and Keys
long live bro plz upload more videos I will pray to god increase your health and wealth
Thanks for your wonderful tutorial. ❤
@Balachandra_in Bro romba thanks...naa oru mechanical department... But ipa oru IT company la web developer aa join paniruka.... Na from the basics to react varaikum unga chennaltha kathukita.... Romba thanks .. Apudiye react-native course um potigana nala erukum🙏🙏🙏🙏
Im your big fan and after seeing ur vides i like to change my career and learning
Awesome explanation .👏
It's nice Annan, i found that you wouldn't used that map function while update the todolist app which cause if you deleted the items it shows some err , then I'm thinking,and cleared that in next app 😅 . Thankyou for the good source (video) anna
Thank you so much sir❤ respect you lots
Ur free video on you tube is always greater than paid institute hat's off bro
Fantastic tutorial❤️
Thanks you ❤
For teaching bro
fully Completed 💯
I saw dave gray react course but i'm not understand. but same course in tamil language very clear understand. one of the best react course in tamil. thank you bro👍🙏👏
Thanks for mentioning original course. Will watch now.
Awesome Bala. I am 63 years old and am trying to learn the new technologies. In fact your explanation motivates me to watch and learn.. God bless. Please continue your good work
63 ah, oh my god , I am 22 years old but I face many struggles to learn new technology , you are great sir!
Best material. All the best to you... Keep rocking. Can you post the Photoshop tutorial.
Hi bro such a great teaching 😮 hat's off for u man 😇
Thank U Boss, ur easy to understand way of explanation is awesome and this material can bring positive change in the lives of many people.
Thank U
God Bless U
வாழ்க வளத்துடன் 🎉🎉🎉
எல்லா நலத்துடன் 🙏🙏🙏
Hope this video helps me.. going to start to see this video today.. thanks man..
this is the best react video ever
Together we make education free❤❤❤
Yep 👍🏻 if we all join hands then we can achieve 👍🏻
Hi Bala,
(04:00 hrs)For add item while typing the value in "Add Item" input box all the components are reloading. May I know how to avoid all the components reloading? Kindly assist.
Thanks & Regards,
S.Shankar
Hi Bala, Super Good Teaching👍
Bro really superb and clear explanation bro... If neenga full stack developer na full stack tutorial podunga bro..... Illana udemy maari paid ah kooda try pannunga.... engaluku rombavae use ah irukum....
Next course Node JS bro. Thanks for the support bro
@@Balachandra_in Soon pls
Full stack Java course video poduga bro. Your teaching style is soo understandable.
Hey bala,
In (04:50:31) React_UseEffect Hook and (04:59:33) React_Local Storage modules you missed to set the values to the prop from local storage, So it will not work as expected.
Super thank u so much sir❤❤❤❤❤
Excellent lecture sir, hugely helpful
Thanks a lot bro
In 10:22
Babel vanthu Entha version la athavathu next generation or recent version la code eluthinalum , browser puriyira mathiri older version ku code convert pannuuthu..
Neenga solrathu conflict aguthu
I have enrolled for many udemy to get good understanding on react basics but your way of explaining every concept with patience is really appreciable. I am eagerly waiting for your next tutorial
Thanks a lot for the wonderful comment bro
While addItem function for to do list project having bug on that line when ever adding some data need to add the id as integer then only correctly it will add and also sequentially not added so there I bug so I'm fixed for that below the code is mentioned kindly refer and fix it:-
Const inputInteger= items.length? parseInt(items[items.lenght-1].id,10) + 1: 1;
Const id=String(inputInteger);
I am listening to my first technical course for more than an hour in Tamil , Awesome work :)
Excellent Bro, Thanks lot
Excellent course. could you please post any AI related for a full stack developer to enhance their skills
You are my Inspiration, Anne
Its Really useful .Thank u Bala
Thanks a lot Bala. I have learnt a lot from this tutorial.
You have a good heart. All the best for your growth.
You have a good heart too
Great effort for 10hrs..Thank you bro..! Create video react testing..
Sure 👍
Thank you so much anna for this course. Really I learned more and more about React. 😊
Happy to hear that sis! Kindly forward to your friends 💐🙏🏼
@@Balachandra_in Sure Anna, if I having any doubts in react, how to ask you
spr bro ninka sollitharathu rompa nalla puriuthu bro tq so much anna
Thanks for the encouragement bro ❤️
Best Tutorial Ever!Never came across someone who teaches this patiently and with so much clarity!! Thank you for this video and wishing you the best!!
Thanks a lot for the encouragement. Hope you will finish the entire web dev playlist. Kindly forward to your friends, juniors etc 🙏🏼💐
@@Balachandra_in will definitely share this with others🙏
@@nandhinimani515 Thanks :)
@@Balachandra_inbrother enaku to do list la List item count 3 show aaguthu but enaku interface la list is empty show aaguthu ena pandrathu pls sollunga🙏🙏🙏
hi i can start my react tutorial by this youtube video..plzzz suggest me
Sir,
i'm following your grow money tutorial videos...very interesting...!!!
I
super bro rmba naal waiting bro
Nandri annnovv😌🙌
Very Usefull, and understandable
Thank you!!
Thank you sis, kindly share with your friends!
Thank you so much anna for this course, Actually I have learned so many new things from this video. Gave confidence to me.💥💥
Thanks for the support bro
Nee...irrukum varai ennai yaaralum vella mudiyadhu mama🔥🗡️🪓
😂 why this?
Thalaiva you are great !!
Really helpful...worth watching..kindly upload react redux tutorials.....
Thank you, I will
Use context is very effective to store all the data, we can access any child to child without using props.
hi anna, i am from AP. I have used object key and value method to do project 1 but i have completed as corrct but after inputing value .....i need to click backspace to change the color why and what is the problem
import React from 'react';
import { useState } from 'react';
import './color.css';
import ClearIcon from '@mui/icons-material/Clear';
function App() {
const [vvalue,setvalue]=useState("");
const [code,setcode]=useState("");
const colours = {aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",
beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",
cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",
darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",
darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkturquoise:"#00ced1",
darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dodgerblue:"#1e90ff",
firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",
gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",
honeydew:"#f0fff0",hotpink:"#ff69b4",
indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",
lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",
lightgrey:"#d3d3d3",lightgreen:"#90ee90",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightsteelblue:"#b0c4de",
lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",
magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370d8",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",
mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",
navajowhite:"#ffdead",navy:"#000080",
oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",
palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#d87093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",
rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",
saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",
tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",
violet:"#ee82ee",
wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",
yellow:"#ffff00",yellowgreen:"#9acd32"};
const texthandle=(e)=>{
e.preventDefault()
console.log(e.target.value)
setvalue(e.target.value)
setcode(colours[vvalue])
}
return (
{vvalue}
{colours[vvalue]}
{texthandle(e)}}/>
{setvalue(" ");setcode(" ")}}/>
);
}
export default App;
good explanation bro....
Hi bro, Thanks I have completed above videos and task, Please provide react native tutorial videos