Reactを書く時に気をつけたいこと

## はじめに
* Reactを使っての開発経験が約1年となったので私がコーディングする上で気をつけていること、これから気をつけていきたいことをこの記事にまとめたいと思います。

## コンポーネントのスタイリングでインラインスタイルは避ける
* style属性でコンポーネントのスタイリングを行うと小さなコンポーネントはまだ大丈夫なのですが大きなコンポーネントになってくる程、可読性が下がってくる気がしています。
    * cssに切り出す、もしくは[styled-component](https://styled-components.com/)を使うとかが良さそうな気がしています(まだ試したこと無い)。
    * プロジェクトではmaterial-uiを使っているので、試しに[makeStyles](https://material-ui.com/ja/styles/api/#makestyles-styles-options-hook)を使ってスタイリングを行ってみましたが感想は「うーん...」でした。
* Reactの[公式](https://reactjs.org/docs/dom-elements.html#style)でもstyle属性を用いた方法は推奨されていないようです。

## 不要なdivタグは避ける
* Reactでは複数タグをreturnすることはできないので、致し方なく`<div>`を使うことが多いと思います。

```react

// pタグbuttonタグの2つは返せないのでdivタグで囲わざるを得ない
const Component = () => {
  return(
    <div> 
      <p>へい</p>
      <button type='button'>ボタン</button>
    </div>
  );
};
```

* こういった時は[フラグメント](https://ja.reactjs.org/docs/fragments.html)を使います。
    * フラグメントを使うことで不要なタグがrenderされません。

```react
// <> はFlagmentの省略記法
const Component = () => {
  return(
    <> 
      <p>へい</p>
      <button type='button'>ボタン</button>
    </>
  );
};
```

## export default を使わない
* 少し前までは積極的に`export default`を使用していたのですがどうやらあまり[よろしくない](https://typescript-jp.gitbook.io/deep-dive/main-1/defaultisbad)らしいのでこれからは`export`を使っていきたいと思います。
    * `export default`と`export`が混在しているとimport文で`{}`が必要だったり要らなかったりといった細かな違いもあるので`export`で統一していきたい所存。

```typescript

// OK
export const Component = () => {
  return(
    .
    .
    .
  );
};

// NG
export default Component;
```

## .tsx(.jsx) と .ts(.js)を使い分ける
* Reactを使用しているファイルには`.tsx`を、使用していないファイルには`.ts`を付けるようにしています。
    * こうすることでコンポーネントに関するファイルかどうかを拡張子で見分けがつきやすいです。
* 拡張子の機能の違いは[stack overflow](https://stackoverflow.com/questions/34224007/is-there-any-downside-to-using-tsx-instead-of-ts-all-the-times-in-typescript)に詳しく書いてありました。

## コンポーネントのプロパティに直接ごちゃごちゃ書かない
* 例えば、以下のようなコンポーネントがあったとします。

```react

interface SubmitButtonProps {
  label: string;
  onSubmit: () => void;
};
 const SubmitButton: React.FC<SubmitButtonProps> = (props: SubmitButtonProps) => {
  return (
    <button type='submit' name='submit-button'>{props.label}</button>
  );
};

const SimpleForm: React.FC<SimpleFormProps> = (props: SimpleFormProps) => {
  return ( 
    <div className='simple-form'>
      <input type='text' name='login-id-field'/>
      <input type='password' name='password-field'/>
      <SubmitButton 
        label={送信} 
        onSubmit={() => {
        .
        . // 複数行
        .
        }}
      />
    </div>
  );
};
```

* `onSubmit`プロパティに直接書くのではなくhandlerメソッドを定義してそれを呼ぶようにする
    * こうするとプロパティ内がごちゃごちゃせずスッキリする。 

```react

const SimpleForm: React.FC<SimpleFormProps> = (props: SimpleFormProps) => {
  return ( 
    <div className='simple-form'>
      <input type='text' name='login-id-field'/>
      <input type='password' name='password-field'/>
      <SubmitButton 
        label={送信} 
        onSubmit={handleSubmit}
      />
    </div>
  );
};

const handleSubmit = () => {
 // ここにonSubmitで行いたいことを書く
};

```

## import文の順序
* import文が下のようにまとまりがなくごちゃごちゃしていると「ぬぉおおおお…」となるタイプです。

```typescript
import React from 'react';
import { hogeGetAction } from '../action/HogeAction';
import { ChildComponentA } from '../ChildComponentA';
import { Button } from 'material-ui/@core'
import { connect } from 'react-redux';
import { ChildComponentB } from '../ChildComponentB';
import { fooGetAction } from '../action/FooAction';

const SampleComponent = () => {...};
```

* 私は`サードパーティライブラリ → UIフレームワーク → 自作コンポーネント → その他`の順で書くようにしています。

```typescript
import React from 'react'
import { connect } from 'react-redux';
import { Button } from 'material-ui/@core';
import { ChildComponentA } from '../ChildComponentA';
import { ChildComponentB } from '../ChildComponentB';
import { hogeGetAction } from '../action/HogeAction';
import { fooGetAction } from '../action/FooAction';

const SampleComponent = () => {...};
```
* スッキリ。自己満。:open_hands:

## その他
* React Hooks APIをふんだんに使って何か作りたい。