reactとは。

rikuです。
久しぶりです。
今回はとある、案件でreact(フレームワーク)を触る機会があったので
行ったことや、そもそもそれは何？って思うことを紹介して行きます。

【前提】

• dockerを使っている
• cakephp3を使用している

説明手順

1. reactとは？
2. reactによって現在起こっている現象とやりたい事
3. 解決策

今回は、上記の3本立てで行きます。

1.
まず、そもそもreactとは？
こちらはですね、JavaScriptというプログラミング言語あるんですが、これを使った
フレームワークになります。

具体的には？というと
一般的にWEBページっていうのは、header・body・footer・sidebar(ない事もある)みたいな感じで
構成されています。
この各部分ごとに、jsファイルを分けてbuildというものを行うタイミングで、全てのJSファイルを
ガッチャンコして１つの静的ファイルを作れるよっていうものになります。
(分かりやすくいうと。。。)
reactを使うためには、Node.jsを入れないといけないので、下記のコマンドで入れました。

nvm install 14

上記のコマンドでNode.jsを入れて下記のコマンドで確認します。
既存のものと合わせるために14を入れています。

node -v

上記のコマンドで入っている、Node.jsのバージョンを確認します。

2.
reactによって、現在の改修対象のページが構成されているんですが
やりたい事としては、
headerの下に新しくhtmlを追加したい！という内容です。

どうしたら、それを実現できるのか調べました。
大体、headerの部分に当たるファイルの中身を特定して
変更・追加を行いbuildしたらいけるんじゃないか？と
予測は立てたものの、いまいちやり方がわかりません。

というのも、これは一体どこでやるんだ？

どこでやる？というのは、何かというと
コマンドでbuildするんだろうと、思うんだけどdockerのコンテナ内でするのか
reactのフォルダ内で行うのか、ルール？とかそーゆーのがわかりません

社長に聞いたところ、dockerのコンテナ内のreactフォルダで行うそうです。

3.
これでほとんどの情報が集まりました。
対象となるheaderファイを編集し、下記のコマンドでbuildして行きます。

yarn build

当然、yarn何て使うのは初めてですから
こちらもインストールして行きます。
僕は下記の方法でインストールしました。

brew install yarn

他の方法もあります。
buildしてから、ローカルにサーバーを立てて見ることもできるそうですが
今回はそれは行わないので、既存のページで確認します。

なぜかできていません。

これも社長に確認したところ、シェルコマンドを直打ちする必要があるそうでこれです。
詳しくは知りません。

ここまでの工程で、react(フレームワーク)によって作られた静的コードを
特定のファイルを編集し、buildすることで変更することができました。本日もお疲れ様です。
明日も頑張ります。