reactの基本構造やざっくりした書き方を初心者でも分かるように説明してみた

想定読者

本記事は下記のような方を対象にしています。
・reactって調べたら学習コスト高いって言うし勉強するか悩むな。
・react勉強し始めたけど書き方がよくわからない
・reactの書き方の全体像をざっくりと知りたい

※私も現時点ではreact一年目となりますので、ご意見アドバイスいただからと幸いです。
筆者が関数型の記述しか知らないためクラス型記事が読みたい方は他の方の記事を参照ください。

reactの基本構造

reactはざっくり言うと以下の構造で書いていきます。

1️⃣インポートエリア

他のファイルやライブラリを読み込むエリア（外部から使いたいものを持ってくるイメージ）

2️⃣関数エリア

次の表示エリアで使用する関数をまとめたエリア。ユーザーの動きによって行う処理やAPI処理などを記述する。（例:ボタンを押された時に行う処理　等）

3️⃣表示層

ユーザに実際に表示される箇所を記述する。HTMLで書けるのはreactの特徴（詳しくはJSX記法で検索）

ざっくりな全体の処理の流れ

あくまで例ですが先ほどの3つのエリアがどのような流れで処理されるかを書きます。

🔸例:初回ロード時のデータ取得処理
・1️⃣インポートエリアで外部と通信（例:天気サイトとか）出来るライブラリをインポート
・2️⃣関数エリアで1️⃣のライブラリを使用し初回ロード時に通信する事を設定する
・3️⃣表示エリアで実際に表示する時に2️⃣で取得してきたデータをテーブルで表示する。

🔸例:入力エリアとグラフ
・1️⃣インポートエリアでグラフ表示ができるライブラリをインポート
・2️⃣関数エリアでユーザーが入力エリアに入力した数字に比例して1️⃣のグラフ表示が切り替わるように設定（関数を作り処理を書くこと）
・3️⃣表示エリアで入力エリアとグラフ表示エリアを作る（HTMLや1️⃣ライブラリを使用）

最後に

本当に雑にざっくり説明したので違う点や他にも知りたい点があればコメント欄によろしくお願いします。
最後まで読んでくださりありがとうございました。