初めてリアクト3つの違い

ファイル構成が違う

HTMLやCSSなどの場合

ファイル構成は各々違い、自分でcssやscssの階層ディレクトリを作っていってパス指定する。
極端な話メモ帳さえあれば０から制作可能

    
基本的に自分でディレクトリを0から作っていく全て変更可能だし、認識しているもの

index.html
-----images/logo.svg
-----css/base.css
-----js/main.js

    

Reactの場合

決まっているファイル構成が既に存在し、それを使わないと開発すらできない。(Node.jsとか言われてる)
まず最初にすることは、この開発環境を用意すること。
自分はメインエディタがPHP stormだったので、幸運にもプロジェクト作成のフォーマットにはいってた。
BABELとかで検索したら

    
Reactのファイル構成(プロジェクト作成時)

node_modules
---中に800位jsのフォルダ入ってる
package-lock.json
package.json
public
--中は画像とか
src
--この中にhtmlとかcssが入っている
README.md (この中にビルドとかプレビューする時にコピペして使えるコマンドが書いてる)
    

自分は0ベースで慣れていたので、
いきなり知らないファイルがいっぱいあると不安でしょうがなかった。
こういうものと思って一旦 src 以外は無視すると楽です。

確認方法が違う

HTML+CSSなどの場合

多くの場合がファイル更新→クリックで表示とシンプルです

• ファイル更新→ローカルでダブルクリック
• ファイル更新→サーバーに上げる(または繋いでおいて更新)

Reactの場合

エディタによってリアルタイムで確認はできますが、サーバーに上げないと不安なタチです。
Reactは、まずエディタでいつも通り編集した後、コマンドを打ってファイルをビルドしないといけません。
苦手なコマンド入りの3stepになるので面倒です。
こういうものと思って感情を消しました。

• ファイル更新 → ビルドのコマンドでファイル生成 → サーバーに上げて確認

コマンドが絶必

フロントが苦手な真っ暗画面のコマンドを使用する必要があります。
今までコマンドなんざ使ってこなかったので恐怖でした。
以下の２個を使えるようになれば、
確認しながらファイル作ってサーバー上げれるので納品はできます。

    

npm start    プレビューを生成するコマンド
npm run build　できたファイルを生成するコマンド
    

まとめ

他にもたくさんありますが３つというタイトルなので終わります。

この3つを認識すれば
手探りだった作業が、確認→検証→修正という、いつものサイクルをつかえるようになります。

重要な認識

• 知らないファイルはそういうものと思って無視する
• 確認の手間はしょうがないと思う
• コマンドは最初は2個だけ使う
• あとは時間をかけるだけ、非常にイージー