はじめに
初めまして、キモオタエンジニアのTonosakiです！この記事を開いてくれてありがとうございます！
Reactについて一通り知見を得たので、まずは基本的な概要について自分なりにまとめてみました！
僕の周りにはReactエンジニアが一人もいないので正直寂しいです…なのでこの記事を見て少しでもReactに興味を持ってくれる方、あるいは「こいつ友達居なくて可哀そうだから仲良くしてやるか～」っていう方が出てきてくれる事を願います。
ちなみに、今回の記事が初投稿となりますので、どうか暖かい目でご覧下さい。
※ここではJavaScript(ES6)の構文をベースに記載をしております。
Reactとは？
ReactとはMeta社（旧Facebook社）が開発元のユーザーインターフェース（UI）を構築する為のJavaScript用ライブラリ です。
UIをコンポーネント（部品）と呼ばれるもので作成するのが特徴で、複雑なUIを柔軟に作成出来ます。
Reactプロジェクト作成方法
Reactプロジェクトは、コマンドプロンプトや、ターミナルでコマンドを実行する事で作成出来ます。
以下のコマンドを実行します。（お手持ちのパソコンにNode.jsがインストールされている前提とします）
npx create-react-app ここに新規プロジェクト名を入力
これでReactプロジェクト作成は完了です。次に以下のスタートコマンドを実行する事でローカル環境でReactを立ち上げる事が出来ます。
cd ここに先ほど作成したプロジェクト名を入力
npm start
すると以下のような画面がブラウザで表示されます。ここからWebアプリケーションを作っていきます。
「コマンドいじれるとかSF感あってかっこいい！ボク、ワタシもSFっぽい事したい！」って思ったそこの中二病のあなた、今すぐReactをやりましょう！（Reactじゃなくてもコマンドいじれるけどネ）
コンポーネントについて
コンポーネントとは、UIの構成要素（パーツ）のことです。その構成要素（パーツ）を組み合わせて一つのページを作成していきます。例に挙げると、webページはヘッダーやフッター、メニューなど様々なパーツがあると思います。そのパーツを一つのファイルにまとめて構築するのではなく、一つ一つをパーツ単位で構築したものになります（大体はパーツ毎にファイルを分けます）。そうする事でパーツ（プログラム）を再利用する事ができ、複雑なUIを柔軟に作成出来ます。
以前はClassで定義されていたクラスコンポーネントというものが使われていましたが、現在では関数で定義された関数コンポーネントというものが主流になっています。
const 関数名 = () => {
return (
//ここに処理を書く
);
};
上記でも述べたように、Reactプロジェクトでは様々なパーツをパーツ毎にファイルに分けます。その上で、他のファイルでもコンポーネントを使えるようにexportする必要があります。
export const 関数名 = () => {
return (
//ここに処理を書く
);
};
exportされたものはimportする事で他のファイルでも使用します。importしたいファイルの頭に以下のようなコードを入力します。
import { 関数名 } from "ファイル名";
余談になりますが、ReactはJavaScriptのライブラリですので拡張子が.jsでも問題はありませんが、ファイルが多い分管理も大変になる為、コンポーネントファイルの拡張子は.jsxとするのが一般的です。拡張子が.jsxとなっているとエディタの便利な補完機能等も働くのでとても便利です。
※exportには種類がある
上記で扱っていたのはnormal exportと呼ばれます。
その他にも、default exportと呼ばれるものも存在します。
default exportを使用する際は以下のような書き方をします。
const 関数名 = () => {};
export default 関数名;
import 任意の名称 from "ファイル名";
上記のコードでもわかるように、default exportの場合はimport時に任意の名前を付けることができます。しかし、一つのファイルで一回しか任意の名前を使うことができないので注意する必要があります。
基本的にはどちらを使用しても問題はありません。
JSX記法、ルール
JSX記法
ReactではJSX記法と呼ばれる書き方を使用しています。簡単に言うと、JavaScriptファイルの中でHTMLの様なタグを書けるという事です。
Reactでは関数名をHTMLの様なタグで囲むことでコンポーネントとして扱う事が出来ます。
例） </ 関数名 >
JSXルール
JSXの重要なルールとして、return以降は一つのタグで囲われている必要があるというルールがあります。例えば以下のような書き方だとエラーが表示されます。
export const App = () => {
return (
<h1>今日は俺ガイルを見ました。</h1>
<p>材木座が面白かったです。</p>
);
};
そこで、以下のようにreturn以降を<div>or<Fragment>or<>（空タグ）で囲んであげるとエラーは表示されなくなります。
/*divタグ*/
export const App = () => {
return (
<div>
<h1>今日は俺ガイルを見ました。</h1>
<p>材木座が面白かったです。</p>
</div>
);
};
/*空タグ*/
export const App = () => {
return (
<>
<h1>今日は俺ガイルを見ました。</h1>
<p>材木座が面白かったです。</p>
</>
);
};
<Fragment>を使用する場合のみ、ファイルの頭に以下のコードをimportする必要があります。
import { Fragment } from "react";
export const App = () => {
return (
<Fragment>
<h1>今日は俺ガイルを見ました。</h1>
<p>材木座が面白かったです。</p>
</Fragment>
);
};
<div>とは異なり、上記の<Fragment>の場合は、不要なDOMは生成されないのでエラーを回避する為だけに外側を囲みたい場合は有効な手段になります。
そして、JSXの重要なルールはもう一つあります。それがキャメルケースです。キャメルケースとは単語のつなぎ部分を大文字にする記法になります。イベントに限らず、関数名などもこの記法になります。
良い例）onClick onChage onError onClickButton
悪い例）onclick onchage onerror onclickbutton
スタイル（CSS）の当て方
Reactでは通常のCSSの当て方ではなく、JavaScriptオブジェクトとして記述します。文字に色を付けたい場合は以下のように書きます。
※追記：CSSの当て方の種類は沢山あるので別途記事でまとめました！→ 【React】CSSの当て方の種類
export const App = () => {
return (
<>
<h1 style={{ color: "pink" }}>昨日はソードアートオンラインを見ました。</h1>
<p style={{ color: "blue" }}>キリトと同じく僕もソロです。（友達がいません）</p>
</>
);
};
すると以下の様になります。
他にもJavaScriptオブジェクトで指定も出来るので、以下のように変数を定義しておいてスタイルを割り当てる事も出来ます。ついでに文字の大きさも指定してみます。
export const App = () => {
//CSSオブジェクト
const styleColor = {
color: "blue",
fontSize: "30px"
};
return (
<>
<h1 style={{ color: "pink" }}>昨日はソードアートオンラインを見ました。</h1>
<p style={ styleColor }>キリトと同じく僕もソロです。（友達がいません）</p>
</>
);
};
すると以下のようになります。
ここでの気を付ける点としては、CSSプロパティもキャメルケースで書くという事です。
良い例）fontSize
悪い例）font-size fontsize
最後に
ここまで読んでくれてありがとうございます！初歩の中の初歩の内容について触れました。実際、自分自身のアウトプットの一環であり、メモとして書きました。Reactの基本的なところでいうと、PropsやState等にも触れたかったのですが記事のボリュームとしてちょっとアレ（めんどいのもあったけど分けた方が読みやすいやろ）だったので次の記事でまとめていきたいと思います。これを読んでReact仲間が少しでも増える事を願います。