Menon

Render Multiple Elements in React | The Complete React Course | Ep.08

React.js Full Course in Hindi | Zero to Advanced in 28 Hours

Source Code: https://github.com/procodrr/react-course/tree/main/08_rendering-list-of-elements 📖 Chapters 00:00 - Introduction 00:22 - Setup the Node project 00:47 - Start Parcel Server 03:02 - Let's understand the existing code 05:08 - Card component on Udemy 05:52 - How to know if any website is built in React or not using React Developer Tools? 06:51 - Let's create a Card similar to Udemy's card section 08:10 - How to import CSS file? 10:37 - Continue creating the Card 15:30 - How to render same card multiple times? 16:48 - Let's fix few styling 19:08 - How to give unique key to each Card using function? 24:04 - Let's fetch some data and build subsequent Cards! 33:59 - Fix few styles! 36:30 - Quick Recap - Unleash the Power of React 40:36 - Learn React Component in Next Video 42:44 - Conclusion Introducing Fetch API: https://youtu.be/CNwb02vgsmc Map, Filter, Reduce in JavaScript: https://youtu.be/Kc3kSIpL6x8 In this video tutorial, I'll show you how to set up a Node project swiftly. Following that, I'll demonstrate how to initiate the Parcel Server, an essential tool in the React ecosystem. We'll understand the existing code and we'll try to create a Card component similar to Udemy's layout. Along the way, I'll share how can you recognize React-built websites using the React Developer Tools - a chrome extension. You'll also learn how to import CSS files into your project. As we delve deeper, I'll walk you through building the Card. We'll cover everything from rendering it multiple times to fixing its styling. We'll tackle crucial aspects like providing unique keys to each Card using functions and dynamically fetching data to construct subsequent Cards. Towards the end, I'll wrap up with a quick recap and noticing how React helps! As a teaser for what's to come, we'll be on our way to learn React components in our next video. 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: https://www.linkedin.com/in/anurag-singh-web-developer/ 🌐 Instagram: https://www.instagram.com/procodrr/ 🌐 Twitter: https://twitter.com/anuragsinghbam 🌐 Portfolio: https://anuragsinghbam.com/ Music by geoffharvey from Pixabay #react #procodrr #webdevelopment

About the course

If you want to master React.js right from scratch, you have come to the right place. In this course, we'll cover everything about React. We'll see how React works behind the scenes and much more. By the end of this course, you’ll become a React expert which will help you land your dream job of web development.