React Patterns — Clean Up Our Code

John Au-Yeung
Jun 16 · 4 min read
Image for post
Image for post
Photo by Evelyn on Unsplash

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

In this article, we’ll look at how to clean up our React code.

JSX

JSX is a programming language we use to write React apps.

We should use it to write anything but the most trivial apps.

It make s our lives way easier.

It provides us with an XML like syntax to let us tell React what to render in a familiar syntax.

For instance, we can write:

import React from "react";export default function App() {
return <p>hello world</p>;
}

to write a ‘hello world’ component.

Mixing HTML with logic may seem strange at first, but we need it to deal with complexity.

The tags make representing the DOM tree easier than with plain JavaScript.

Babel

Babel has to be installed to support ES2015.

Create React App comes with Babel so we don’t have to install anything ourselves.

We just use to run our project and it’ll take care of all the transportation for us.

Props

JSX elements and components can have props, which are analogous to attributes in HTML.

The difference is that the values don’t have to be static.

For instance, we can write:

import React from "react";const Hello = ({ greeting }) => {
return <p>{greeting}</p>;
};
export default function App() {
return <Hello greeting="hello world" />;
}

We have a component, which takes a prop.

Then we can get its value from the parameter of .

We then get on the screen.

Children

We can create child components to let us nest child components.

For instance, we can write:

import React from "react";export default function App() {
return (
<div>
<p>hello</p>
</div>
);
}

We put a p element in the div element.

Differences with HTML

There are differences with HTML, even though JSX is similar to HTML.

Attributes in JSX are camelCase instead of kebab case.

Also, the attribute in HTML is in JSX, and the HTML attribute is in JSX.

and are reserved words in JavaScript so we can’t use them.

Style

The attribute in HTML accepts a text with a style string.

The style prop takes an object.

Root

JSX code in a component must have one root element.

For instance, instead of returning:

<div />
<div />

We have to write:

<div>
<div />
<div />
</div>

or:

<>
<div />
<div />
</>

and are opening and closing tags for fragments, which can be used as a wrapper element but renders nothing.

Spaces

Spaces are a bit tricky with JSX.

If we want spaces, we’ve to write:

{' '}

Then we can separate content.

Boolean Attributes

JSX can have boolean values.

If we specify no value, then it defaults to .

For instance, if we have:

<button disabled />

Then the button will be disabled.

This is consistent with HTML.

Spread Attributes

The spread operator is important for saving us typing in our code.

For instance, we can write:

const attrs = { id: 'baz' }
return <div {...attrs} />

Then we spread the properties of as props.

Therefore, we pass the value of as a prop and set the ID of the as .

Templating

Props can take dynamic values. This is why we can use it for templating.

For instance, we can conditionally disable a button by writing:

<button disabled={errors.length} />

Then we only disable a button is have a non-zero length.

Patterns

There are some common patterns in React components. We should follow them to create components in the right way.

Image for post
Image for post
Photo by Paweł Czerwiński on Unsplash

Multiline

JSX is preferred over . This is because we can create complex components much more easily with it.

If we have nested elements, we write:

<div>
<Header />
<div>
<Content content={...} />
</div>
</div>

instead of:

<div><Header /><div><Content content={...} /></div></div>

Keeping lines short keeps us from having to scroll horizontally to read the whole line.

We should wrap our parentheses when we have multiline expressions.

Otherwise, JavaScript may insert semicolons in unexpected places.

Conclusion

We keep multiline JSX code short and wrap them parentheses.

JSX should be used except for the most trivial apps so that we can use lots of shorthands it offers.

JavaScript In Plain English

Enjoyed this article? If so, get more similar content by subscribing to our YouTube channel!

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store