React Patterns — Documentation and Reusability
By: John Au-Yeung
Tags: JavaScript, Software Development, Programming, Technology, Web Development

Photo by James Sutton on Unsplash

React is a popular library for creating web apps and mobile apps.

In this article, we’ll look at how to document components automatically.

React Docgen

The React Docgen package helps us create documentation of our component automatically.

We can install it by running:

npm install --global react-docgen

Then we can run:

react-docgen App.js

if we have a button stored in App.js .

Then we get a JSON object that has the prop types as the output.

If we add a component to the top of our component, we also get a description field with that comment as the value.

Reusable Components

To create reusable components, we pull parts that are reusable outside a component.

For instance, if we’re getting something from an API, we can write:

import React, { useState, useEffect } from "react"; const fetchPerson = async name => {

const res = await fetch(`https://api.agify.io/?name=${name}`);

return await res.json();

}; export default function App() {

const [data, setData] = useState({}); const onLoad = async name => {

const personData = await fetchPerson(name);

setData(personData);

}; useEffect(() => {

onLoad("michael");

}, []);

return <p>{data.name}</p>;

}

We moved the parts that can be shared between components into its own function.

The fetchPerson function lets us get fetch data.

Then the parts that have to be in the component are in App .

We have the onLoad function to set the data state.

useEffect has the state.

If we remember not to repeat ourselves, then we’ll divide our code into reusable pieces.

If we create a list, then we should divide our list entries into separate components.

For instance, we can write:

import React, { useState } from "react"; const Item = ({ name }) => <p>{name}</p>; export default function App() {

const [data] = useState(["foo", "bar"]); return (

<div>

{data.map((d, i) => (

<Item name={d} key={i} />

))}

</div>

);

}

We have an Item component that renders the entries’ data.

Then we called map and return the Item in the callback to render the list with Item .

We pass in the name prop with our value.

Also, we have the key prop so React can keep track of the values properly.

This way, we can change the Item component as necessary without affecting App .

We can add logic, states, etc. as we need to.

We can also use Item for other purposes if we wish.

Living Style Guides

If we create a style guide, then there’s less chance that a new developer will duplicate what already exists.

They can find out what’s available and then use the components that are already built instead of building a new one.

Creating a style guide manually is hard, so there are apps that let us do it easier.

We can do it with apps like Bit or Storybooks.

React Storybook lets us extract components and put them in a dynamic style guide.

With Bit, we can upload components to the Bit web app and import them as a package to other apps.

Also, we can preview the components that are uploaded.

Photo by Andrew Umansky on Unsplash

Conclusion

We can use the React Docgen package to create documentation for our React components.

To make reusable components, we should extract them into small pieces and pass data via props from parent to child.

The logic that doesn’t change the state can also be extracted.

To prevent accidental duplication, we can create a style guide with apps like Bit or Storybook.

JavaScript In Plain English

Did you know that we have four publications? Find them all via plainenglish.io — show some love by following our publications and subscribing to our YouTube channel!