Yogesh Chauhan's Blog

Composing and Extracting Components in React

in React on April 25, 2021

Composing Components

One your create React components, you can refer them in other components too. That way you can divide a component when it gets complex and make smaller components.

You can have a complete form component with smaller components like buttons, textboxes, etc.

For e.g. here’s one component referring another component.

Extracting Components

As I mentioned, if you think your React component is getting too big and complex that it’s hard to keep track of everything then you can just divide it in smaller components for simplicity.

Take a look at this example:



The same example with extracted Avatar component:


amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
How to create a secure random number using JavaScript?JavaScriptCheck if mixin is being called in a style rule or not in SCSSSCSSWhat’s a Log File and What are Log File Monitors?Miscellaneoussubstring() Method in JavaScriptJavaScriptIs monitoring an employee’s work on a computer a desirable or undesirable activity?MiscellaneousWhat is Host Hardening and What are some Important Hardening Steps?MiscellaneousSQL ANY OperatorSQL/MySQL@mixin and @include in SCSS (Sass)SCSSClearwater Seafoods – B2C in ChinaMiscellaneousHow to add onclick event to html elements dynamically using JavaScript?JavaScriptAlternate Style Sheets in CSSCSS10 Usability Blunders to AvoidUI/UX