Understand the react flow and structure
HTML-код
- Опубликовано: 10 сен 2024
- Visit chaicode.com for all related materials, community help, source code etc.
Sara code yaha milta h
github.com/hit...
Discord pe yaha paaye jaate h:
""/discord
Instagram pe yaha paaye jaate h:
/ hiteshchoudharyofficial
I request every single visitor to this channel, Please appreciate his hard efforts by subscribing to this channel as you can't get such precious tutorials even by paying high feeses in institutes. ❤🙏
Sahi baat, sirf JS n react ke hi 1.5-2 lakh lagte h n fir b ye level mushkil h
@@chaiaurcode Certainly sir, We are truly grateful to you for this phenomenal content.
agree@@chaiaurcode
@@chaiaurcode maine kara hai aapka channel subscribe kaafi dino se. Aap heera ho heera😃😃😃😃
No doubt. You are 100% true
learning:
1. when making components, always capitalize name(function).
2. file extension .jsx , bcz some libraries force us for that
3. return only 1 components
Calm, To the Point and Quality Content . Thank you for these amazing videos.
Glad you like them!
No content on RUclips matches your in-depth teaching skills sir ❤🔥
not even Udemy ones
@@nawaz_haider +1
@@AnishS-cp+2
Code with Harry Bhai is in progress...😃😃😃
+3
Hitesh Sir, after being 7 years in the industry, following your content is still contributing to my growth. Thank you for being there whenever i needed help.
Akshay Saini sir, Hitesh sir and Sheriyans coding school have made frontend and backend stuff so damn easy that too with depth.. Thankyou so much... We genuinely respect your efforts and knowledge... Please don't ever stop giving us these kohinoor level content...
😊🙏☕️
@@chaiaurcode sir can you bring videos where you use django and react together to build projects ?
*🚀Simple one rule:*
👉 Filename: Capitalize e.g. _Chai_
👉 File Extension: Always _.jsx_
🦉It doesn't matter if I return JSX or only Vanilla JS. It simplifies my coding life a bit.
👌🏻
It's function name bruh
i can't write h1 tag in chai.js,it shows property assignment expected
@@harshsharma0409bro just change in the file (in chai.jsx ) at return syntax use bracket () instead of curly bracket { }
File *******@@mrlord8519
React ⚛flow and structure
Intro 0:00
Start 2:01
React app project
Project structure/ file structure 2:04
public/index.html 4:42
src/index.js 6:37
package.json 12:50
(important lines 11:30 to 14:48)
React Vite project
Project structure/ file structure 14:51
React app Project VS React Vite Project 16:36
Discussion React with Vite Project 17:55
Important byte for JSX 23:19
Discussion React with React app Project 24:40
Best practices in naming React component 29:57
(One Shortcut for reloading in VS code => in search bar type => '>reload' => select 'Developer: Reload Window' 31:19)
Outro 33:18
conclude 35:23
Thank you.
appreciable
very nice thanks :)
😍😍😍😍😍
Mai bhaut sare react course se pad chuka hu in youtube but itna detail me kisi ne bhi nahi smjaya bhaiya so thankyou very much❤❤❤❤❤❤❤❤
Abhi to next video dekho
No youtuber has ever provided such a quality content for free like Hitesh sir. Hats off to you sir. This is nothing less than a social service. I hope every student gets a mentor like you. You have proved that enjoying and learning can be done together. Completed the javascript course, made projects, struggled, watched videos again, struggled again, failed better and in last 3 months have made a lot of progress because of you. This channel is heaven for enthusiasts of computer science.
Best wishes to you sir.
Let me share my experience recently I purchased a paid course but I can say that this course can beat any paid course out there in the market.
I love the way you teach sir .
Your teaching method is just amazing loved it !!
I request every single visitor to this channel, Please appreciate his hard efforts by subscribing to this channel as you can't get such precious tutorials even by paying high feeses in institutes.
To be very honest , I start learning Frontend web dev back in january 2023 , I watch so many tutorials Paid Udemy courses , and much more I feel stuck at some point , i was like no this is not for me am not gonna be so good in this field, after discovering your channel on youtube , I followed your tutorials only a week ago , Atlest that feeling that i cant code is no more , Hats off to your content and your teaching style as well, thankyou so much for such a outstanding content ,
This is really amazing. Even though I've been working with React for many years, I've never found this level of detailed information anywhere else.
The most valuable lesson I learned from this video, Hitesh Sir, is that even when code is properly exported, imported, and used, it may still not work due to issues like the import being blacked out or other unexpected problems. Today, I realized that following best practices can save a lot of time and stress. Thank you for sharing such insightful content!
Thank you so much hitesh sir❤.
Here is my video summary
=> In react we will make our own custom tags (Eg )
=> In vite it will directly inject main.jsx in index.html file
=> Vite is lightweight.
=> Remember that components name start from capital letters which is best practices❤.
I am also try to help new one who start react from this series please like this comment so it will be on the top😊❤.
Thank you so much Sir G for this incredible tutorial!
Your step-by-step explanation made it so easy for me to follow along and learn. I really appreciate the time and effort you put into creating this video. Keep up the fantastic work! ❤
#cfbr
sir how beautifully you manage your job and 2 channels without compromise the the quality of anything, do everything consistently,....your are one my inspiration sir
Sir no one can match your teaching skills mastery. Never learn to react in such a great manner. Thank you sir 🎉🎉🎉🎉🎉🙏🙏
Sir I was in class 12 with zero knowledge of coding , You are the first youtuber whose video I saw. I have downloaded you app back then. I regretted that time you didn't teach free . Now you are giving us these courses free of cost . Just one thing I want to say to you, Love you sir.
May Allah reward you for this favour which you have made to us respected sir g
mere mein chai.jsx wali file k output nhi aa rha browser pe...Can you help me?
I found an amazing and wonderful series, a good start, Highly Appreciated, Love from Pakistan ❤
Wow, I'm truly impressed by your teaching style and depth of knowledge when it comes to React.js and JavaScript. Your explanations are clear and concise, making it easier for me to understand complex concepts. Your dedication to teaching and your passion for the subject shine through in every video. Thank you for sharing your expertise with the community; it's been incredibly helpful in my learning journey.
this series is and the content hitesh sir is delivering is far better then paid courses.
Sir, I think you are the most exceptional IT tutor I have ever come across. Your technical knowledge and explanation style are unmatched, and even paid tutors aren't able to deliver such valuable information. 🙏🙏
वाह क्या Teaching Method है।
ऐसे गुरू को मेरा कोटि कोटि प्रणाम 🙏🙏
Thank you sir, this course is the best one on the internet. I hope your motivation to help us for free with such quality remain as it is. Learning a lot from you, thanks.
I started learning react from code with harry He was teaching well but tutorial was very old there was various syntax which is already updated in react. Then I purchased course on udemy by Jonas Schmedtmann He is also a great teacher But chai wala or Hindi bhasa ka comfort Ritesh sir ke pas mila. Thanlyou
Thank you, Improving my skills with the series
Best explanation man, today I got the clarification about how that script injected in the index.html file, I always had a question about that but no one clear that before
Thank you
thnku so much sir . ab lagta h react samajh aahijayega❤jaise javascript aagyi in a simple way❤ sir u are the best mentor in whole yt community😊😊
React smjh b aayegi n project b bnenge
one of the finest lecture i have ever seen ,last time i have liked any of your lecture was that of array in which you have explained each and everything along with spread operator
How beautifully everything was broken and simplified you are Great best content of react
Completed this lecture. Sir you way of teaching is very fab. Currently I am in 4th year of clg and you become my one of the bestest mentor of life.....
the way you explain the inner engineering is what makes you different from others. Thank you
One of the best playlist and simple to understand the concepts. Teaching Speciality of Hitesh Bhai ❤...
Best Quality Videos, Amazing Lectures Easy to Understand Love From Pakistan💚
Sir , I am student whole really loves Java but after following you i really fall in love with Javascript and completed the whole "Chai aur Javascript" Series in just One Week and now I just started this React Playlist.I don't know about other channels aur paid course but whatever I understand that is now I love JavaScript and ReactJS and I have the full confident that I can build projects on my own.
Your effors are truly appreciated by me and my college friends.
Thanks A Lot Sir.
Using a capital letter to start file names and the .jsx extension for React components are common conventions that help make your codebase more understandable to others and to yourself in the future.
Bas sir ruka nhi jaraha hai for the next video...itne acche explanation shayed paid course mein v na milta hoga...you are a gem sir for us ❤
Sir , I know react but learning from you gives a new perspective
One of the best content i found on youtube thanku so much sir ,
i request to all my friends please subscribe and share this playlist to every needy student .
Extremely high standard of keeping things to its build block only...basic inner working first. kudos 🙏🏼🙏🏼
Sir iss speed se chaloge tho react jald hi pura ho jata hai js itna time nahi lagega aur ham bi consistently pad the jayenge thank you sir for your effort
Amazing course with high quality content Thanks to you sir for this all the contents in free of cost
Not everyone makes attempts to explain deeply, coz most of them fear if it's difficult to make them students understand (that will affect their channels reach)... But ur doing great.. keep up this ❤️
thanks! I finally cleared my confusion about vite and just a normal react app.
Amazing, what a way of explaining. Love the teaching style.
Learned About Some Best Practices Using React
-> Name the component capitalize e.g App.js
-> We can name both App.js & App.jsx but in vite development environment we have to use jsx
-> We can return only one component by a jsx function so it's good to wrap in or
-> Created our own component Chai.jsx rendered successfully
This react series is recomended to visit and learn. Thanks
Haan jee❤...I love this line ...Thank you Hitesh sir , for providing such in-depth series
Teachers like you can create new tech-skilled enthusiasts, great lecture to understand how react code flows from different files and it's file structure!❤
In this video, we have seen basic react application created by two different methods:
1. npx create-react-app
2. Vite Library
and their Folder structure, how Javascript loads in index.html file, react-scripts - (on load, this adds a script into main index.html file, and imports main js file), File extension, capitalize component name, create your own component, render multiple components, react-fragments
Your teaching style in depth is absolutely gorgeous. actually I confused many things in react which is solved in this lecture . thank you so much .
thankyou sir apne padhne ka tareeka samjha diya aab samjh aagaya h ratne me or samjhne me kya difference hota h !! Thankyou so much
Discussing the folder structure of Create React project and comparing it with Veet project
00:03
✦
Understanding the structure of a React project
01:55
✦
Understanding the React flow and structure
05:40
✦
React creates a virtual DOM to compare with the real DOM and makes necessary changes
07:37
✦
React Up is a function that returns HTML.
11:22
✦
React scripts are automatically loaded by the browser and injected into the HTML.
13:37
✦
Understanding React flow and structure
17:15
✦
Create a new file in the source without keeping Chai and DotJS
19:04
✦
Exporting and returning elements in React
22:27
✦
Returning a single element in React
24:15
✦
Import chai.js and understand its usage
27:53
✦
Components in React can be capitalized
29:42
✦
React is a library that enforces certain conventions and capital letter naming for files
33:00
✦
Understanding React flow and structure
Click to expand
34:31
It's literally an in-depth video ,maza aagaya...
Best in depth lectures sir hatsoff to your knowledge and efforts!!
Sir ji aapka vo error kaise tackle krna hai ye part mujhe bahut unique lga kyuki hr koi errors handling pe baat nahi krta ...
So thanks to you for providing such quality content for free on .😊
Sir apke jese teacher or video mil jay to 4 year ki jarurat hi ni job ke liye ❤ your video is best in RUclips
Best Tutor of India. Love from Kashmir Sir🙂
Asslam-o-Alikum sir! You are great. I am form Pakistan. I saw your video a long time. Thank you sir for these videos!
Sorry to break to you, but you should refrain from watching videos of Kafirs!
it's like eureka moment for me when things got so crystal clear You are GOD of Coding Sir.
I have never experienced this kind of teaching.. you did a great job Sir.. respect 👏👏👍
I am really glad to learn from this series, the best thing I observe is you explain things with reason which clears basic questions. Thanks for your efforts, loved it.
Sir has Explained every thing in depth, best channel channel to start your react journey
Aapki video aise hoti ki mujh jaise poor students able to connect with you.
Completed 3rd video. Understood why and how a project is made and how to debug simple minimal error and the best standard to maintain a good project through good nomenclature.
Literally sir these videos are very informative and specially your comparison technique it is very very impressive and beneficial for me.❤❤❤
Sir bahut aatche se samaj aaya Jo Jo aapne bataya is video me. Thq sir and sorry me comment Krna bhul jata hu
i have got such immense cofidence after your videos is astounding thank you so much sir
Huge love from Pakistan. ❤
Thank you so much for the value you have provided through your videos.
I don't know how someone consumes the content without subscribing to the channel even it is free to subscribe 😊
To be very honest , I start learning Frontend web dev back in january 2020 , I watch so many tutorials Paid Udemy courses , and much more I feel stuck at some point , i was like no this is not for me am not gonna be so good in this field, after discovering your channel on youtube , I followed your tutorials only a week ago , Atlest that feeling that i cant code is no more , Hats off to your content and your teaching style as well, thankyou so much for such a outstanding content ,
0:04 I have subscribed because you make good content and you deserve it.
Wow sir a great balance of theory and practical!!!
Sir, whatever you have taught, I have understood very well, keep teaching like this sir.
Thank you so much for creating such helpful videos! Your content on React has been incredibly useful for me. Keep up the amazing work!
I like sir's video without watching them, because I know its worth watching them
coming here after JS series ..... the teaching quality has gone up and up and up 🏆
Guru ji you're great. Bhot maza aa rha hai inn tutorials ko dekhne mein.
Thank you so much Sir! Detailed Explaination.
Thank you hitesh sir for amazing content
This is next level clearing concept of react monster by Hitesh Sir
I have no words to show gratitude to you. Just Amazing Sir. Live long and Stay blessed!
thank you for prepare such a wonder full series for students...
❤❤❤ Love your teaching style... So simple.. thank you Hitesh. 🎉🎉
THANK YOU soo much sir for providing the genuine content for free...
This is the only channel where we get this such depth knowledge ... 🎉🎉❤❤
i watch ur vedios two time one time in 1.5x to learn note things down then 2x to kinda solidify what i learned earlier
Aaj se aap mere sir nahi mere bade bhai hai, kya padhate hai bhai waah
00:03 Discussing the folder structure of Create React project and comparing it with Vite project
01:55 Understanding the structure of a React project
05:40 Understanding the React flow and structure
07:37 React creates a virtual DOM to compare with the real DOM and makes necessary changes
11:22 React Up is a function that returns HTML.
13:37 React scripts are automatically loaded by the browser and injected into the HTML.
17:15 Understanding React flow and structure
19:04 Create a new file in the source without keeping Chai and DotJS
22:27 Exporting and returning elements in React
24:15 Returning a single element in React
27:53 Import chai.js and understand its usage
29:42 Components in React can be capitalized
33:00 React is a library that enforces certain conventions and capital letter naming for files
34:31 Understanding React flow and structure
Sir ap jb bhi is channel par next js ki series start krenge tw usse phele typescript please parha diye ga, and Thank you to be a great teacher ever ❤
The way you explain the concept is awesome.
Thanks a lot for this valuable react series.👌👌👋
this video literally give me insights of how react render to basic html file , I new it before but never seen this way. Thankyou sir so much.❤❤
Happy to hear that!
@@chaiaurcode Thank You Soo Much sir for this amazing serious . Aap har topic ko itna Easy way ma smjha dyty ho . Sir ek request haii Tailwind Css b start krwaye na saath ee
Hii, Hitesh Sir, It's clear my concept from REACT JS, I have subscribed and follow. Thanks Sir ji 😊
Understood about the best practices of naming, Tysm
Hitesh Sir thanks for this amazing course, Love From Pakistan💌
Kitni asaani se topic samjhate ho aap, Maza aa gaya
Very nice video, it helped me understand the foundation of React apps.
best explanation on react till now.. thank you so much sir
what a teaching skill i alwys scared of react but know i think i can learn thanku so much for such kind od content god send you to me