React 画面遷移用スクリプト作成 - Elsaの技術日記(徒然なるままに)

以前Reactの画面遷移方法についてまとめました。
elsammit-beginnerblg.hatenablog.com

ただ、画面遷移用にファイルを複数作成したりコード書くのが結構手間だったりするんですよね。
だからって別ファイルを持ってくると余計なコードを削除したりしなければならず、これも手間。。。

ということで、画面遷移までを簡単にセッティングできるスクリプトを作成しました！！

■スクリプト格納先
https://github.com/Elsammit/React_SettingShell.git

■使い方
前提として、yarnがインストールされていることです。

格納されているreact.shを実行すればOKです。
引数ですが、
　・第1引数：Reactプロジェクト名
　・第2引数以降：各ページ用コード
になります。
例えば、

react.sh rpg aaa bbb ccc

と実行すると、
rpgというプロジェクトが作成され、
aaaとbbb、cccというページが作成されます。
App.jsには画面遷移用のパスが格納されており、コードとしてはこちらのようになります。

import { BrowserRouter, Route } from 'react-router-dom'
import ccc from './ccc'
import bbb from './bbb'
import aaa from './aaa'

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <div>
<Route path='/ccc' component={ccc}/>
<Route path='/bbb' component={bbb}/>
<Route path='/aaa' component={aaa}/>
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

それぞれ作成されるページには、

Hello world

というメッセージが表示されます。
※全て同じページが表示されます。

■使用上の注意
App.jsを見て頂ければわかりますが、、、
ルートパスである、

<Route path='/' component={ファイル名}/>

が存在しません。
必要に応じて修正をお願いいたします！！

また、インデントも一部ズレてしまっております。
こちらも気になる方は修正お願いいたします。

■シェルスクリプト解説
シェルスクリプトですが、大きく分けて3つに分かれておりす。
　①プロジェクト作成
　②ページ用ファイルの追加・修正
　③react-router-domインストール

まずは①のプロジェクト作成です。
コードはこちらのようになっており、第1引数でプロジェクトを作成です。

create-react-app $1

次に②です。
コードはこちらになります。

rm $1/src/App.js
cp App.js ./$1/src/

base=$((6+$#))
for x in "$@"
do
    if [ $x = $1 ]; then
        echo "same var"
    else
        cp page1.js ./$1/src/$x.js
        touch ./$1/src/$x.css

        sed -i -e "2d" ./$1/src/$x.js
        sed -i -e "1a import './"$x".css'" ./$1/src/$x.js
        sed -i -e "4d" ./$1/src/$x.js
        sed -i -e "3a export default class "$x" extends Component  {" ./$1/src/$x.js

        sed -i -e "1a import "$x" from './"$x"'" ./$1/src/App.js
    fi
done

for x in "$@"
do
    if [ $x = $1 ]; then
        echo "same var"
    else
        sed -i -e $base"a           <Route path='/"$x"' component={"$x"}/>" ./$1/src/App.js
    fi
done

デフォルトのApp.jsを削除し、こちらが用意したApp.jsに置き換えます。
さらにこちらの用意したpage1.jsを引数にて指定するページ名でコピーを行います。

そしてそして、

        sed -i -e "2d" ./$1/src/$x.js
        sed -i -e "1a import './"$x".css'" ./$1/src/$x.js
        sed -i -e "4d" ./$1/src/$x.js
        sed -i -e "3a export default class "$x" extends Component  {" ./$1/src/$x.js

        sed -i -e "1a import "$x" from './"$x"'" ./$1/src/App.js

にてテキストに対する指定する行の削除と挿入を行っております。

最後に③！！react-router-domのインストール。