Markcce Eros Markcce Eros - 29 days ago 6
Javascript Question

React making components out of elements

I am currently putting together elements of my website but making react components out of them.
Here's a button for example:

import React from 'react';

class Button extends React.Component {
render() {

return <button className={this.props.bStyle}>{this.props.title}</button>;

}
}

export default Button;


I have lots of other elements to put into react components so there's going to be a large list of them.

The problem is that what you have lots of them and you need to import all the list can really grow too big.

Just imagine 50 of these:

import Element from './Element.component'; // x50 ?


My question is...Is their a better approach to importing large lists of components in React?

Answer

You can import all of your elements to one file and export all individually. Then you are able to import all as elements and use as elements.someComponent.

// common.js because you ll commonly use them
import Element from './Element.component'; 
import Element2 from './Element.component2'; // x50 ?
/* ... */
export { Element, Element2 /* ... */ };

// in someOtherFile.js
import * as Elements from './common';
/* 
   now you are able to use these common elements as 
   <Elements.Element /> 
   <Elements.Element2 />
   ... 
*/ 
Comments