What is React Element? | The Complete React Course | Ep.03
28.8 هزار بار بازدید -
پارسال
-
Starter Code:
Starter Code: https://github.com/procodrr/react-cou...
Final Code: https://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 : https://t.me/procodrr
Sunday QnA Link: https://meet.google.com/vbp-hqnm-eiq
Social Media
🌐 Telegram: https://t.me/procodrr
🌐 Linkedin: LinkedIn: anurag-singh-web-developer
🌐 Instagram: Instagram: procodrr
🌐 Twitter: Twitter: anuragsinghbam
🌐 Portfolio: https://anuragsinghbam.com/
Music by geoffharvey from Pixabay
#react #procodrr #webdevelopment
Final Code: https://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 : https://t.me/procodrr
Sunday QnA Link: https://meet.google.com/vbp-hqnm-eiq
Social Media
🌐 Telegram: https://t.me/procodrr
🌐 Linkedin: LinkedIn: anurag-singh-web-developer
🌐 Instagram: Instagram: procodrr
🌐 Twitter: Twitter: anuragsinghbam
🌐 Portfolio: https://anuragsinghbam.com/
Music by geoffharvey from Pixabay
#react #procodrr #webdevelopment
پارسال
در تاریخ 1402/01/06 منتشر شده
است.
28,886
بـار بازدید شده