Components should be able to be reusable in different applications and therefore should not be bound to a particular store. A previous way to accomplish this was to use the container/component design pattern and create separate files for the HOC (High Order Components). A similar separation can be accomplished by exporting the component when not connected to Redux. Directly export your unconnected component alongside default export of the connected component. E.g.:
// raw, unconnected component for testing
export function HeaderLinks(props) {
...
return (
<Grid container item className={classes.nav}>
<HeaderMenu renderMenuLinks={() => menuLinks} />
</Grid>
)
}
// connected (or any other sort of HOC component, etc) for use in App
export default connect(mapStateToProps)(compose(withStyles(styles), withWidth())(HeaderLinks));
Styles (for MaterialUI JSS for CSS)
In order to create more self-contained code and to reduce the overhead of using extra HoC components. Each component should have their own styles in the same file unless that object becomes too large and it makes it harder to read. makeStyles is preferred for adding custom classes.
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
root: {
backgroundColor: 'red',
color: props => props.color,
},
});
export default function MyComponent(props) {
const classes = useStyles(props);
return <div className={classes.root} />;
}
PropTypes
PropTypes should be used on every component. The following are the ways that they should be implemented on each type of component.
Class Components and PureComponent
import React from 'react';
import PropTypes from 'prop-types';
export class MyComponent extends React.Component {
static propTypes = {
prop1: PropTypes.string.isRequired,
prop2: PropTypes.bool,
prop3: PropTypes.func
};
defaultProps = {
prop2: false,
prop3: () => {}
};
constructor() {}
render() {}
}
export default MyComponent:
Functional Component
import React from 'react';
import PropTypes from 'prop-types';
export const MyComponent = props => {
}
MyComponent.propTypes = {
prop1: PropTypes.string.isRequired,
prop2: PropTypes.bool,
prop3: PropTypes.func
};
MyComponent.defaultProps = {
prop2: false,
prop3: () => {}
};
export default MyComponent;
Top comments (2)
Thank you for the efforts & explanations, everything's is understandable except "Each component should have their own styles in the same file", can you illustrate this.
Sure, this part is when using with styled-components, but more specifically with how it is done in the Material-UI framework material-ui.com/styles/basics/#hoo....
The main take away is that with the advent of CSS in JS it is possible to create fully self-contained components. By lowering the number of dependencies in other files it makes it easier when you or another developer in your team to clearly know what code affects the component.
Hope this clears it for you