Summary
Keywords
Full Transcript
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
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
