- Here are three ways I’ve found to make React presentational components work as re-usable building blocks.
- Here are two stories for a text input component: the first shows the component in its valid state, and the second show the component in its invalid state.
- Instead, extract a new component and pull it up: – – Let the container decide explicitly when and where show presentational components.
- As you keep pulling presentational components up, they start looking like enhanced native elements, so you’d like to be able to pass all props you would pass to a native element, like or .
- Inside the component, extract the props you’ve defined yourself and pass the rest to the element that you’re wrapping: – – Here, we’re separating the prop from the rest, and passing the remaining props to the element.
Saturday, Feb 17 2018
Here are three ways I’ve found to make React presentational components work as re-usable building blocks.
With Storybook, you can create a gallery of examples for your components. If a component works in Storybook, chances are it will keep working no matter what else you place around it.
function. Here are two stories for a text input component: the first shows the component in its valid state, and the second show the component in its invalid state.
command line tool creates a set of webpages where you can explore your components in action:
Now you don’t need to navigate to specific pages of your application to inspect a component in different states. It’s all in the storybook.
It’s better to create small components with shallow hierarchies. Suppose we want to add an error message to our input element. You could create an
prop and an
prop to tell the
fit it finds itself in an invalid state:
But it’s not immediately clear how the props work and the relationship between the
state and the error message is hard-coded. That’s a problem: logic…