DEV Community

loading...
Cover image for #7 of 100DaysOfCode

#7 of 100DaysOfCode

icecoffee profile image atulit023 Updated on ・2 min read

Seventh Day,
😄 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.
  • Components styling
    • 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.🌼

Discussion (2)

Collapse
pracoon profile image
Prasham Ashesh

Hey! I am doing 100daysofcode as well 🙌 keep it up! 😄

Collapse
icecoffee profile image
Forem Open with the Forem app