What is React Element? | The Complete React Course | Ep.03
ฝัง
- เผยแพร่เมื่อ 12 ก.ค. 2024
- Starter Code: github.com/procodrr/react-cou...
Final Code: github.com/procodrr/react-cou...
📖 Chapters
00:00 - Introduction
00:18 - Download the Starter Code
00:44 - How to import React in our project using CDN links?
03:33 - Install React Developer Tools
04:09 - How does React Library and React DOM looks like?
07:44 - How to create a React Element?
15:41 - How can we show that React Element on our web page?
18:56 - Are there different outcomes with 'document.createElement' and 'React.createElement'?
27:13 - Let's debug ReactDOM's code!
32:04 - What's inside a React Element?
37:12 - Why Do React Elements Have "$$typeof: Symbol(react.element)"?
39:19 - Let's render a React Element using the React Object!
43:32 - How to work with React.createElement()?
51:35 - How to add an image and style it using React.createElement()?
01:02:08 - How to create a form using React.createElement()?
01:11:32 - Next video - JSX and Babel!
01:15:54 - Is that a Virtual DOM in React?
01:19:33 - Conclusion
In this video, I'll be diving into the fundamentals of React and exploring how to import React into our project using CDN links. If you're new to React or looking for a quick and easy way to get started, you're in the right place.
I'll explain the role of both the React library and the React DOM and showcase what they look like when included in your project.
Next, we'll explore how to create a React element. We'll cover the syntax and demonstrate how to build a simple React element from scratch. You'll gain a clear understanding of the structure of a React element and how they contribute to building dynamic user interfaces.
Ever wondered why React elements have the "$$typeof: Symbol(react.element)" property? I've got you covered. In this video, I'll explain the significance of this property and how it helps React identify and manage elements efficiently. Understanding this concept will give you a deeper insight into the inner workings of React.
Finally, we'll dive into working with the React.createElement() function. I'll show you how to utilize this function to create React elements dynamically, passing in the necessary attributes and content. You'll discover the flexibility and power of React.createElement() and how it contributes to building dynamic and interactive applications.
Whether you're a beginner or an experienced developer, this tutorial will provide you with a solid foundation in React. By the end of the video, you'll have the knowledge and skills necessary to import React into your project, create React elements, and utilize React.createElement() effectively.
I'm excited to see how you harness the power of React and create incredible user interfaces. Let's get started on this React journey together!
Have any doubts? Join this Telegram group and ask your question. You can also share the projects that you make in this group.
Telegram Group : t.me/procodrr
Sunday QnA Link: meet.google.com/vbp-hqnm-eiq
Social Media
🌐 Telegram: t.me/procodrr
🌐 Linkedin: / anurag-singh-web-devel...
🌐 Instagram: / procodrr
🌐 Twitter: / anuragsinghbam
🌐 Portfolio: anuragsinghbam.com/
Music by geoffharvey from Pixabay
#react #procodrr #webdevelopment
this react course will be going to next level
Yes bro, we'll make this the best React course.
Keep Learning and Sharing 😊
Summary:
Q. What is a React element?
Ans. A React element is a plain JavaScript object that represents a DOM node or a component. It is lightweight and forms the building blocks of a React application's user interface. You can create React elements using React.createElement or JSX syntax, and they are essential for the declarative nature of React.
Q. Why $$typeof is Used?
Ans. Identify React elements.
Ensure security and tamper resistance.
Note: From what I understood from this video.
Sir aap ka fan ho gaiya hu
Bhot acha padha rahi ho sach me bhot help milti hai aap se 🙇❤️
The way you shared practical deep insights in library truly amazing and something rare among all Tuts out there. This makes it gem 💎. ❤
Nice explaination: I have watched some of your videos and you seem quite genuine. I believe you will never turn into Tech Motivational guru. On you tube there are really very less developers who are pure techy and not motivational gurus. App core techy hi rahe motivate karna hi mat chaahe apne koi bhi struggle jhele ho like 0 to SE or farmer to SE.
i have searched so many yt channels but i cant get relevant react react course or js course later i found your course i cant express my words sir i salute you and soon i will be a mernstack developer i will meet you definately and give your guru dakshina....
I'm glad that your stopped at my channel. For sure we'll meet.
Sir I have humble request to you PLZZ bring node js And express js complete course just like react and js...plz sir..bring this course asap❤️
Anurag bhai, such mein gajab ho aap 🔥, muje bhi apke jaisa coding mein master bnaa hai ...kitna deep knowledge hai yaar apko 😯
DevTools ko apna Ghar bana lo, JavaScript ke master ban jaoge 😃
Next level information...thx for explaining in such deep manner...
Bhai tum sach me procodrr ho. Aur hum ko bhi procodrr bana rahe ho 🔥
Zaroor Bhai, ham sab log ek saath Procodrr banenge 😊
@@procodrrdiamond heart of my anurag sir 😊😅🎉
Quality content, better than any good paid course, playlist, one of the best tutor, Anurag sir, thankyou for your help ❤,
Thank you so much. Keep learning and sharing 😊
After watching this video , feeling like a mechanic of JS and React .🤣🤣Thanks for the video sir . This will be one of the best course on TH-cam for the Self Taught People.
Thank you 😊
Thanks sir. It's eye opener for me. I have learned react before from thapa technical. But apne bahut ache se samjha ye hey. Sab log khali virtual dom theory bataye hey.
I'm glad you liked my teaching style, thank you 😊
@@procodrr sir after watching this video i debug how virtual dom works. It's really surprised. I am learning react from last 1 yr and write lot of react code and created some project using react. But never encountered console.log container which you have creating using reactdom. Now i clear understanding key prop is so important. It basically for virtual dom to differentiate nodes
amazing knowledge and amzing explanation
Keep learning and sharing 😊
😮 gajab 🔥 even ye sab experienced react developers ko b nai pta honga 😂
😃😃
sir you just blew my mind 🤯like CHAPAK. Btw the explanation is tooo gooooddddddd thanks sir for this gem content
Your way of teaching is on next level,sir
Awesome, Keep Learning and Sharing 😊
waiting for redux because you create a need before using it this method of teaching 🎉❤
We'll start Redux once React is completed.
Till then keep learning and sharing 😊
Watching your video from Nepal .
Osm explained ..thanku
❤️
The duration of is perfect its like paid class in free with quality
Thanks bro, it means a lot ❤️
Keep learning, sharing, and supporting just like this we'll make more awesome courses just like this.
Very helpful video Anurag Bhai 💖💖💖💖
Awesome, keep learning and sharing 😊
very good and very details deep explain .
thanks for your course bro
Great video 🎉
I have created file index.html and script.js in a folder "D:/ReactApp/". and in terminal of VS Code when i run the command "npm start" it gives error that no package.json file found. and if i write React in Developer Tools Console screen then it also give Error. How to fix it?
best ever react course
Thanks bro 😊
thanks for sharing this video
thnku bhaiya
summary of th video
00:02 Learning about importing and rendering React element.
02:39 React Native allows creating iOS and Android applications.
08:06 Creating React elements with type and props
10:31 Creating and using basic React elements
15:24 Creating and rendering React elements
18:55 Creating an HTML element
26:59 Understanding owner document and importing the entire file directly
29:44 Understanding innerHTML and text content in React Element
36:54 The type of React Element is crucial for security.
39:22 Understanding React Element rendering process
46:42 Creating complex HTML structures using React Element.
49:36 Understanding the structure of React elements and creating them
59:03 Styling in JavaScript using objects
1:06:11 Connecting React elements to HTML using JavaScript
1:13:56 React Element simplifies writing HTML inside JavaScript.
1:16:36 Understanding the nested structure of React elements.
what is the difference between using the method you have shown in the video and other directly installing react in our system using vite and npm??
I have done namaste react from akshay saini this course is better than that
Thank you 😊
Nice video😊🎉
❤️
Thanks sir
❤️
Wowwwwwww 🤯🤯 mindblown
Variables,Array, String, Function, Arrow function,Loops, if else condition,event listeners, setTimeout, setInterval Concepts are done,
Sir, Can you please Tell, which which Concept Now i should ?, Would be much helpful 🙏
Complete this video 😊
Awesome, keep learning and sharing 😊
Sir I know basic JS like data types , operator ,loop , condition, array, function, little bit understanding about DOM event handling and know arrow function spread operator modules know how about promises and async await can I start learning react?
Yes you can, this is more than enough to start learning React.
Ap Guru ji ho sir...Possible ho to React Native v liaga ...
Thank You Sir
React Native to abhi nahi aayega, maybe next year.
Till then keep learning and sharing 😊
It will be helpful for other language people also if there is an option of subtitles in English
but why i will write the same html code in jsx instead of html file if i need to do same in both
Keep following the course you'll soon get to know why.
ReferenceError: React is not defined
at Script.js:1:11 showing error. Sir please guide .
Day1 :9/1/2024 lecture 3 complete 💯✅
"Amazing! You have put your hands inside React's brain."
You are making it so simple to understand 👏👏
Thanks bro 😊
In the next video we'll put our hands and feet together 😃
sir maine pahle ek react ka course kiya hua hai toh ye basics mujhe pata hai toh mai exact konsi video se start karu taki time bache
Tum starting se episode 9 tak dekho, ismein tumhe kaafi kuchh naya seekhne ko milega. Uske baad tum aage ke videos skip kar sakte ho, wo tumhe already pata hoga. Agar koi topic naa pata ho ya usmein doubt ho to wo video dekh lo
Is it okay
if i explain this (ur teaching) in my interview without using npx create-react-app?
Yes
sir js interv most ask Question ki playlist bnao na plz
ans DSa with js bhi chahiye for frontend label
sir react native ka course bi bnao
React Dom is not defined, I am getting this error can anyone help me please 😢
Sir file me koi bhi word search krne ka shortcut kya h?
Control+F
Now create next js and react native course with projects
Next js will take time and React Native I'll have to learn first 😄
Hi
Hello Hitesh, How are you?
This is research series on react .....
😀😀
Sir aap kon se company me job karte hain, fang?
Main remote job karta hoon, UK ki company mein.
Zordar
InsertAdjecentHTML bhi toh kr sakhte hai SIR 🤣
start your lecture, aap javascript and reactjs ke physics wallah ho,,
Thanks Bhai, it means a lot to me.
Main bhi Alakh Sir ko dekhta hoon.
Wo physics ke best teacher hain.
Waise tumne JavaScript aur React kaha tak padha hai?
@@procodrr mene kal rat ko start Kiya apka react course and subh 6 bje se fir uth kr Kiya multiple handle fetch kr rha hu ( I know that's topic but fir b dek rha hu ki ky pta kuch Naya sikhne ko mil jaaye aapse ) &&, me react js developer hu with having 2.2 years of experience mid size start up
But 1 issue ye hota he mere sath ki me logic build nhi kr pata aj b thodi help lgti he senior ki
And also my question is that how I improve my coding skills logic building
Ye personal question tha
12 May 24 | 5:12
Bohot confure kr rhe ho sir aap.
Abhi JavaScript ke practice project banao.
Uske baad React karna.
@@procodrr bna liye kafi tbhi react start Kiya h
Achha, araam se karo samajh aayega. Agar tab bhi naa samjh aaye to Sunday Live mein aakar directly apna doubt pooch lena sab clear ho jayega.
Bhaiya need aajatii h apka video dekhe ky kree smjh nhi aarhaa h ,content kafii sahii h but nind
itni jada bakchodi react.element pr krdi bhai psnd ni aya thoda bohot sahi h pr ye jada ho gya