React.js ~Clean Code Basic~

#react #webdev #frontend #learning

The Basics

✅ Ensure that Prettier and formatter configurations are shared among developers
✅ Handle warnings and exceptions
✅ Avoid unnecessary console logs
✅ Be familiar with the minimum coding conventions

Good Code Examples
Here are seven key points I'd like you to keep in mind.

**1. The string line should be intuitively understandable.

// NG
const apiUrl = origin + '/api/v2/user/' + userId;

// Good🥴
const apiUrl = `${origin}/api/v2/user/${userId}`;

2. Abusing if statements causes too many code lines.

// NG
if (status == 'JPN') {
  return <JapaneseHeader />;
} else {
  return <EnglishHeader />;
}

// Good🥴
return status == 'JPN' ? <JapaneseHeader /> : <EnglishHeader />;

3. Whether there is a regularity about import statement

// NG
import React from 'react';
import { useState } from 'react';
import './style/logo.scss';
import logo from './image/logo.png';
import Button from '@material-ui/core/Button';
import useContext from 'react';

// Good🥴
/* Level 1: React */
import React, { useContext, useState } from 'react';

/* Level 2: UI framework, Third party library */
import Button from '@material-ui/core/Button';

/* Level 3: Original， Inner library */
import './style/logo.scss';
import logo from './image/logo.png';

4. AND/OR statements are suitable for React, but you should not use them too much

4.1 OR: In case you want to insert a value when the value exists.

if (temp) {
  text = temp;
} else {
  text = 'text doesn't exist';
}
// Good🥴
const text = temp || 'text doesn't exist';

4.2 AND: In case you want to insert a value after you check whether the value exists or not.

if (response) {
  text = response.text;
}
// Good🥴
const text = response && response.text;

// 🤔
const text = response && reponse.text || 'text doesn't exist';

5. Extract an event handler from a render

// NG
return (
  <Button
    onClick={(event) => {
      console.log(event.target);
    }}
  >
    Push
  </Button>
);

// Good🥴
const displayConsole = (e) => {
  console.log("target:", e.target);
};

return <Button onClick={displayConsole}>Push</Button>;

6. Extract a style from a render

// NG
return (
  <>
    <Box
      style={{
        height: '100%',
        color: warning,
        background: 'black',
      }}
    >
      {text1}
    </Box>
    <Box
      style={{
        height: '100%',
        color: warning,
        background: 'black',
      }}
    >
      {text2}
    </Box>
  </>
);

// Good🥴
const boxStyle = {
  height: '100%',
  color: warning,
  background: 'black',
};

return (
  <>
    <Box style={boxStyle} onClick={displayConsole}>
      {text1}
    </Box>
    <Box style={boxStyle} onClick={displayConsole}>
      {text2}
    </Box>
  </>
);

7. Make use of the object instead of the switch

// NG
switch (user.type) {
  case user:
    return <User />;
  case admin:
    return <AdminUser />;
  case host:
    return <HostUser />;
}

// Good🥴
const userView = {
  user: <User />,
  admin: <AdminUser />,
  host: <HostUser />,
};

return userView[user.type];