Skip to content

sujshr/lab-react-hoc-render-props-boilerplate

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Logo-nav

Learning Goals:

In this lab the aim is to understand and use the following concepts in order to Share stateful logic between components:

  1. Higher Order Components
  2. Render Props

Steps to follow:

  1. Clone this repository - as it have some boilerplate already for you.
  2. Insall all the dependancies used in this project by using the following command -> npx i or npx install.
  3. Run the application by using npm run dev. You should be able to see the application running as shown below:

Task:

If you observe, LikeImage.jsx and LikePost.jsx -> you will notice that, most of logical part is quite similar in both the files. Only the variable names are different, rest everything is similar. This obviously is not a good practice.

Your task is to solve this code duplicacy issue by using the following two concepts:

  1. Higher Order Components
  2. Render Props

Create two different projects -

  1. In the first project -> solve the issue by HOC.
  2. In the second project -> solve the issue by Render props.

You can use any method ( class component or functional component ) - in order to implement the above two concepts.

Happy Coding ❤️!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 49.4%
  • HTML 43.1%
  • CSS 7.5%