━目次━
よくReactで開発するのですが、毎回初期セットアップするのが面倒だったので
「もう初期セットアップ済みのプロジェクト作ってしまえ！」
ということで作りました。
せっかくなので共有します。ご自由にお使いください。
create-react-appベースでOK
TypeScriptを使用
VSCodeを使用(もちろん他のエディタでも大丈夫ですが、説明はVSCodeの前提で書いてます)
本テンプレートは以下の機能を提供します。
エディタで保存時に自動でフォーマット(ESLint/Prettier)
React Routerによる簡易的な画面遷移テンプレート
わざわざcreate-react-appで1から設定していくよりも断然に楽なので是非！
リポジトリ(react-template)
リポジトリは以下です。
https://github.com/freelance-jak/react-template
READMEにも説明を書いてあるので、長ったらしい解説が不要な人はそちらを参考にしてくださいb
使い方
クローンする
まずは適当なフォルダを作成し以下のコマンドでプロジェクトをクローンします。
|
1 2 3 |
git clone https://github.com/freelance-jak/react-template.git |
※もしプロジェクト名が決まっている場合は下記のようにすることでその名前でクローンできます。
(プロジェクト名がproject1の場合)
|
1 2 3 |
git clone https://github.com/freelance-jak/react-template.git project1 |
クローンが完了したらフォルダを移動します。
|
1 2 3 |
cd react-template |
または(project1 の場合)
|
1 2 3 |
cd project1 |
パッケージをインストールする
以下のコマンドでパッケージをインストールしましょう。
|
1 2 3 |
yarn install |
または
|
1 2 3 |
npm install |
VSCode拡張機能(ESLint)をインストールする
VSCodeにESLintの拡張をインストールしていない人はしましょう。
※Prettierの拡張は不要です！(ESLintでPrettierの設定も読み込むように設定しているため)
VSCodeでワークスペースを作成する(推奨)
setting.jsonを編集するため、他のプロジェクトに影響を与えないためにもVSCodeのワークスペースを作成することをオススメします。
そんなこと気にしねぇて人は飛ばしてください。
ファイル > 名前をつけてワークスペースを保存 を選択
適当な名前をつけて適当な場所に保存(プロジェクトフォルダ内には保存しない)
setting.jsonを編集する
ワークスペースのsetting.jsonを編集します。
エディタ自体の自動フォーマットが有効になっていると意図しないフォーマットが適用されることがあるため、ESLint(Prettier)の設定に基づいて保存時に自動でフォーマットするための設定です。
Code > 基本設定 > 設定 を選択
「ワークスペース」タブを選択した後、右上のアイコンを押下しsetting.jsonを開きます
settingsの箇所に以下を追記します。
|
1 2 3 4 |
"editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } |
追記前
追記後
自動フォーマットの動作確認
以上で設定が完了しました！
以下のようにESLintのエラーで赤波線が表示されたり、コード補完時に自動でフォーマットされることが確認できると思います。
※うまくいかない場合はVSCodeの再起動を試してください
慣れないうちは自力でやるとこの設定にたどり着くまでにものすごく時間を使うと思います…
画面遷移の動作確認
React Routerを使用しての簡単な画面遷移も実装済みなので動作確認をしてみましょう。
以下のコマンドで起動します。
|
1 2 3 |
yarn start |
または
|
1 2 3 |
npm run start |
http://localhost:3000にアクセスすると以下のように
・Linkでの画面遷移
・buttonでの画面遷移
・戻る
の動作を確認できると思います。
以上です！Reactでの快適開発を楽しんでください！
※各ライブラリの設定に関する説明を以下に記載していきます
ESLintとPrettierの設定
ESLintは静的構文チェックツールであり、Prettierはコード整形ツールなので役割は異なります。
上記２点を合わせて使用する場合、ベストプラクティスとしてはESLintにプラグインという形でPrettierを噛ませることです。
ここらへんのやり方が微妙な記事も多く最初の頃はけっこう困った…
このあたりの設定は.eslintrc.jsonファイルを参照してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "extends": [ "react-app", "plugin:prettier/recommended" ], "plugins": [ "prettier" ], "rules": { "prettier/prettier": "error" } } |
Prettierのルールは.prettierrc.jsonに書いてあります。
本プロジェクトは自分がいつも使う以下の設定が記載してあります。
・改行しない限界120文字
・文末のカンマ有り
・シングルクォートを使用
・セミコロン使用
|
1 2 3 4 5 6 |
{ "printWidth": 120, "trailingComma": "all", "singleQuote": true, "semi": true } |
このあたりは好みなので公式サイトを参考に各自設定してください。
React Routerの設定
create-react-appでプロジェクトを作成する場合はほとんどの場合React Routerを使用すると思うので設定しています。
App.tsx、Page1.tsx、Page2.tsxの３ページを用意しており、各ページのルーティング設定を以下のようにRouter.tsxに記載しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from 'react'; import { BrowserRouter, Switch, Route } from 'react-router-dom'; import { App } from './App'; import { Page1 } from './Page1'; import { Page2 } from './Page2'; export const Router = () => { return ( <BrowserRouter> <Switch> <Route path="/" exact children={<App />} /> <Route path="/page1" children={<Page1 />} /> <Route path="/page2" children={<Page2 />} /> </Switch> </BrowserRouter> ); }; |
その他細かい設定方法等は公式サイトを参照してください。
TypeSciptの設定
tsconfig.jsonにTypeScriptに関する設定が記載してあります。
と言ってもこれはcreate-react-appで作成されたままの状態なので特別な設定はしていません。
プロジェクトに応じて設定を変更しましょう。
さいごに
React開発、初速アップのために是非お使いください！
クローンして使用した際はstarいただけると喜びます(´`)
それでは！また！！
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
