😄 Today I learned some really nice features that React provides and I learned how to include Tailwind CSS in a Next.js application.
Anyway here are my today's learnings:
Render props method
In the continuation of the HOC that I learned yesterday, today I learned more about the render prop method that can be used to optimize our code.
- It's a pretty long concept so here is a gist: A component with a render prop takes a function that returns a React element and calls it instead of implementing its own rendering logic.
- In layman's terms Think of render props as a component that surrounds our existing component and provides our existing component property and values it can use.
Context and useContext() hooks
- This API was designed to share data across the multiple layers of child components without using props drilling.
- This API contains a Provider to which we can pass a value that can be accessed by all its child components.
- we also need a reference to this Context that we created that we need to pass in useContext() as an argument to access the values given to the provider.
- I haven't used it by myself at all till now but I learned how to include Tailwind CSS in a Next js project.
- I learned about "dev dependencies" inside the package.json file.
- @apply directive offered by Tailwind CSS to combine lots of different small classes to make a big usable class.
You can check out HOC (Higher Order Components) in my yesterday's post if you wanna know more.😄
If anyone would like to suggest me something since I'm new to React and Next.js or if there are some mistakes in the post, please let me know.
I'll really appreciate that.
Thanks for reading it.😊
Have a beautiful day.🌼