React Patterns — Clean Up Our Code
By: John Au-Yeung
Tags: JavaScript, Web Development, Software Development, Technology, Programming

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 npm start 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 Hello component, which takes a greeting prop.

Then we can get its value from the parameter of Hello .

We then get hello world 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 class attribute in HTML is className in JSX, and the for HTML attribute is htmlFor in JSX.

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

Style

The style 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 true .

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 attrs as props.

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

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 errors 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.

Photo by Paweł Czerwiński on Unsplash

Multiline

JSX is preferred over createElement . 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!