Source Code: github.com/procodrr/react-cou...
📖 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: • Introducing Fetch API ...
Map, Filter, Reduce in JavaScript: • Map, Filter, Reduce in...
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 : 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
7 июл 2024
