3 Ways to Fine-tune Presentational Components

Three ways to fine-tune your React presentational components  #reactjs #javascript

  • 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

in

javascript

react

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.

Storybook calls each example a ‘story’. Once you’ve got Storybook installed, you add stories in JavaScript with the help of the Storybook

storiesOf

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.

The

storybook

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

errorMessage

prop and an

invalid

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

invalid

state and the error message is hard-coded. That’s a problem: logic…

3 Ways to Fine-tune Presentational Components