React Summary Day-4
Heyyy Everyone! This is Day 4 of learning React from Hitesh Sir(Chai Aur Code). Today i learned about props and some basic Tailwind. This is my first time with Tailwind, i only know css, i have never tried tailwind, but hitesh sir introduced to day me to tailwind. After working a little with tailwind, configuring it, playing around it a little bit, i understand the importance of tailwind and why it is used. Its so easy to style the page using tailwind. Its Super useful, dont need to take the reference of class and then give all the css and all, instead just write className and inside it write the tailwind, and its easy, like if i want to use flex box, then i just need to write “Flex justify center“ thats it! See, how easy is that compare to writing the vanilla css. This is it for tailwind.
The main thing i learned today is PROPS, i created my own component today. Like basically its a function returning html. So what props are, props are nothing but properties that can be passes as a parameter to the function that we define, that returns the html. It is used to inject variable inside the component we are returning. Like for example i made a component of a Card. Now in card there is name, job title and a button. So once i created the Card component, i can use it multiple times, but the problem is that i want the name and job title as variable, but here, it is hard coded. Here comes the important of PROPS! We can give parameter to the function that returns the Card component, this is called PROPS, and inside the Main file that is inside Main.jsx, when we call the card inside the render method that is <Card />, here we can give the properties like, <Card username = “John Doe“ /> The username will pass to parameter to the function where Card is defined as variable, then we can use this variable to dynamically change the name on the card.
This is what i learned for today. Furthermore, i tried to create the basic project of background color changer with react and tailwind. I faced several problems with tailwind, as i didnt know the properties, i have to give much time to the documentation of tailwind, to know what and when to use, how to use, what are the properties.And talking about react, its comparatively easy, its doable, and i enjoyed cause i learned new things. Like why i cant directly execute function inside onClick, it is because, that the onClick excepts the function itself and not the return value of function, so either we have to give reference of the function or write a callback, executing the function directly didnt works. And i also learned how to write inline css inside react, its actually simple. Just write style = {{backgroundColor: “red”}} thats it.
This is all i learned today, thanks Hitesh sir for making react easy and thanks for tailwind.
