はじめに

私が知っているJavaScriptってもうしかしてもう古い？！
ってことで、モダンなJavaScriptについて学んできました。
今回はReactについて学んで行きたいと思います。

React開発

Appの作り方

ReactApp自体はCLIでかんたんに作成することが出来ます。
Node.jsが動く環境であれば下記のコマンドを実行することによって作成出来ます。

◇ 作成コマンド

$ npx create-react-app [プロジェクト名]

◇ 実行例）

$ npx create-react-app myapp
$ cd myapp
$ npm start

CodeSandbox

localに環境構築をするのがめんどくさい、、、！という人はこんなサービスがあります。

簡単にReactの開発環境が立ち上がります。

サンプルコードを書くときや、お試しAppを作成するときなどはこちらでサクッとやってしまうほうが便利です。

Reactの基本

Reactでは一般的なjsの書き方ではなく、jsxという記法があります。
先程紹介したCodeSandboxでReactのプロジェクトを作ってみるとこういうファイルが置いてあります。

そして、ブラウザにはこのような文字が表示されています。
ではなぜこれが表示されているのかロジックを見ていきましょう。

SPAについて

ReactはSPA(SinglePageApp)なので、実際に表示されるhtmlはこのindex.html一つだけです。
そしてこのhtmlファイルにはブラウザで表示されている文字は書かれていません。
ここのid=rootになっている要素に対してJavaScriptで色々と操作してレンダリングをしていきます。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
	(省略)
</head>

<body>
	(省略)
	<div id="root"></div>
	(省略)
</body>

</html>

JavaScriptの動き方

では次にjsファイルを見ていきましょう。
index.jsというファイルの中でid=rootの要素に対してレンダリングをかけていることがわかります。
どのような要素をレンダリングするのかがroot.renderにかかれています。
ここで注目したいのがAppというコンポーネントを表示していることです。

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root"); // id=rootに対してレンダリングしている
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

次にApp.jsを見ていきましょう。先程Appコンポーネントという単語が出てきましたが、jsxではこのように部品(コンポーネント)を別ファイルに分けることができます。App.jsでは<div className="App">という要素の中に<H1>と<H2>のタイトルを表示しているhtmlを返しています。ここのコンポーネントがブラウザ上で表示されていたいう事です。

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

jsxのルール

Reactではjsx記法を用いる書きましたが、jsxにはいくつかルールがあります。
App.jsを下記のように修正してみると、エラーが出ます。

App.js

import "./styles.css";

export default function App() {
  return (
    <h1>React練習場</h1>
    <p>ここはみなさんが練習するReactの場所です</p>
  );
}

重要なjsxのルールとしてreturnでは1つのタグで囲われている必要があるというエラーです。
なので、このエラーを解消したい場合、例えばdivタグなどで囲んであげればエラーが解消されます。
このようにコンポーネントでは、必ず一つの要素に囲まれている必要があります。

App.js

import "./styles.css";

export default function App() {
  return (
    <div>
      <h1>React練習場</h1>
      <p>ここはみなさんが練習するReactの場所です</p>
    </div>
  );
}

もしくはdivタグでなく空タグでも大丈夫です。divタグで囲むのと異なり、不要なタグが生成されません。

App.js

import "./styles.css";

export default function App() {
  return (
    <>
      <h1>React練習場</h1>
      <p>ここはみなさんが練習するReactの場所です</p>
    </>
  );
}

イベントやスタイルの扱い方

Reactで使うjsxではすこしだけ気をつけないといけない点があります。一般的なJavaScriptの書き方やhtmlの書き方がやや違います。

イベントの扱い方

例えば、一般的なJavaScriptではボタンを押したときのイベントはonclickで取得すると思います。
Reactで使うjsxの場合はonClickのようにキャメルケースになります。

一般的な方法.html

<input type="button" value="button" onclick="test()">

Reactのjsx.jsx

<button onClick={test}>ボタン</button>

スタイルの扱い方

またスタイル(css)の適用の仕方も少し変わります。通常のcssと同様にReactでも各タグにstyle属性をあてることでスタイルを適用することができます。ただし注意点としてCSSの各要素はJavaScriptのオブジェクトとして記載します。
例えば文字を赤くしたい場合はこのような違いがあります。

一般的な方法.html

<h1 style="color: red">タイトル</h1>

Reactのjsx.jsx

<h1 style={{ color: "red" }}>タイトル</h1>

jsxではstyleを指定する時にJavaScriptを書くので。style={}のようの波括弧でかこみます。
その中にオブジェクトでcssに対応する要素を指定しています。そのため全体で見るとstyle={{ ここにCSSを記載する }}のような形になっています。そのため普通のCSSと同じ書き方をするとエラーになります。
JavaScriptのオブジェクトで指定できるので、以下のようにまとめて適用することも出来ます。

sample.jsx

const contentStyle = {
    color: "red",
    fontSize: "20px"
};

return (
    <div>
        <h1 style={{ color: "red" }}>タイトル</h1>
        <p1 style={contentStyle}>説明</p>
    </div>
);

ここで気をつけたいのはスタイルも同様にキャメルケースを用いているという点です。
例えば、font-sizeではなくfontSizeになります。これはJavaScriptのオブジェクトとして記載してるためです。

まとめ

今回はReactの超基本のところを書いてみました。SPAやjsxなど初めてReactを触るときにわからないことだらけでしたが、ここの基本を理解しておくとこの後の学習が一気に進むと思います。
次回はコンポーネントを分けるメリットについて書いていきます。