React Compound Components Design Pattern | Tabs and Accordion Components | Hindi | Part-4

React Compound Components Design Pattern | Tabs and Accordion Components | Hindi | Part-4

In this video, I have explained compound component design patterns with the help of examples. I have taken Tabs and Accordion examples to explain this topic.

⏰ Timecodes ⏰
0:00 Introduction
0:27 Add bootstrap to the project
1:27 Maintain state with Context
4:27 Create Tab context
10:07 Conclusion

Github project: https://github.com/anujsingla/react_design_pattern

Compound components design pattern:

The compound component is an advanced React design pattern that helps to communicate between UI components and share states between components.
It helps to build flexible APIs to share state and logic between parent
and child components.
We will use React Context API for this.

In simple words:
Multiple components work together to share state and handle logic together.

How it Works:
1. The Parent component has some states.
2. Using React Context API, we share states between child components.
3. Child component uses the share method and state to communicate between components.

Example:
Tabs onChange={onChangeFun}
TabList
TabTab1/Tab
TabTab2/Tab
TabList
TabPanels
TabPanel Panel 1 /TabPanel
TabPanel Panel 2 /TabPanel
TabPanels
/Tabs

Example:
select
option value="option1"option1option
option value="option2" option2 /option
/select

Here select tag works together with the option tag. Select tag manage the state
of the UI and share state with option element.

Task:
Accordion example same like this - https://reach.tech/accordion
Toggle button with show text on/off

Reference:
https://reach.tech/tabs/
https://reactjs.org/docs/context.html
https://github.com/reach/reach-ui/blob/develop/packages/accordion/src/index.tsx
https://getbootstrap.com/docs/5.1/components/accordion/

Support my channel:
https://www.buymeacoffee.com/anujsingla

(Free Courses)
React course :- https://bit.ly/3qXnSYU
Javascript course :- https://bit.ly/3qYCG9u
Typescript course :- https://bit.ly/3qY9Fe6
Frontend Interview Questions and Answer - https://www.youtube.com/playlist?list=PLEtjGa9VEukMRyitRx0nitoCD8u2XEYiz
HTML Tutorial for Beginners to advance - https://www.youtube.com/playlist?list=PLEtjGa9VEukMJvP4Z8O01LvkCB7-1myXu
NPM - https://www.youtube.com/playlist?list=PLEtjGa9VEukO4Ud2SGoHhuFYCPfDAzFjd
Remix run React framework Tutorial in Hindi - https://www.youtube.com/playlist?list=PLEtjGa9VEukMKVhD0GKHthRmwVMFWjaeW

(Social Media Links)
Twitter : https://twitter.com/singla387
Facebook page : https://bit.ly/3nZlyyx
Telegram : https://bit.ly/3nX2v8f
LinkedIn : https://bit.ly/3rIMt2A



About Me:-
I am Anuj Singla, and working as a Senior Software Engineer at Redhat. At Redhat, I spend most of my days writing code. I am working on different technologies like React, Angular, JavaScript, NodeJs, Typescript. I want to teach web development to everybody.

Tags :-
#reactdesignpattern #react #compoundcomponent #anujsingla #typescript #hindi #html #css