2022年3月1日 React実践の教科書 モダンJavaScriptの機能に触れる Reactの基本~

従来のDOM操作とReactの言葉使いの差について

• JavaScriptやJQueryで行っていたDOM操作を『〇〇を××する』手続き的と表現されます。
• Reactは宣言的と表現します。(詳しい説明はここではありませんでした)

React開発の始め方

• 本書ではCodeSandboxで行う方法が記述されていました。
• 本記事ではCodeSandboxの操作方法には触れずにReactの知見についてまとめていきます。

JSX記法

• Reactで開発する際に用いる記法です。
• JavaScriptのファイル内でHTMLのようなタグが書けるというものです。

react-domというライブラリからReactDomという名前でモジュールをインポートします。

import ReactDom from "react-dom";

ReactDomにはrenderという関数が用意されているので第一引数にrender対象　第二引数にrender箇所 を設定します。

ReactDom.render(<App />, document.getElementById("root");

• 第一引数が<App />となっていますが、Reactでは関数名をHTMLのようにタグで囲むことによってコンポーネントとして扱うことができます。
• 第二引数のrootというidを指定していますが、HTMLファイルにある <div id=”root”></div> です。

SPAの場合、HTMLファイルは一つのみなのでこのようにアプリケーションのルートで『HTMLのここにコンポーネントをレンダリングする！』というように指定してあげています。

JSX記法では、関数の返却値としてHTMLタグが使用でき、それをコンポーネントとして扱って画面を構成していきます。

JSXのルール

return以降のタグは一つのタグで囲われている必要があります。

エラーになる例

import ReactDom from "react-dom";

const App = () => {
  return(
    <h1>こんにちは！</h1>
    <p>React学習中です。</p>
 );
};

ReactDom.render(<App />, document.getElementById("root");

• 一つのタグで囲われていないのでエラーが起こっています。

2種類の書き方

空タグで囲う場合

import ReactDom from "react-dom";

const App = () => {
  return(
    <>
     <h1>こんにちは！</h1>
     <p>React学習中です。</p>
    </>
 );
};

ReactDom.render(<App />, document.getElementById("root");

Fragmentを”react”からimportして使用する場合

import ReactDom from "react-dom";
import { Fragment } from "react";

const App = () => {
  return(
    <Fragment>
     <h1>こんにちは！</h1>
     <p>React学習中です。</p>
    </Fragment>
 );
};

ReactDom.render(<App />, document.getElementById("root");

<div>タグで全体を囲っても良いのですが不要なDOMが生成されないので有効な手段です。上記のどちらかを使いましょう。

コンポーネントの使い方

ここまで書いてきた方法を続けていけば index.jsの一つのファイルだけで何千行のコードになってしまいます。

React開発では画面の要素を様々な粒度のコンポーネントに分割する事で、再利用性・保守性を高めています。

• 関数で定義されたコンポーネントを関数コンポーネントと呼びます。
• 以前のReactではClassで定義されたクラスコンポーネントも使われていましたが今は関数コンポーネントが主流です。

コンポーネントの分割

• App.jsにindex.jsで記述した関数を移していきます。
• 他のファイルでも使えるようにexportする必要があります。

App.js

export const App = () => {
  return(
    <>
     <h1>こんにちは！</h1>
     <p>React学習中です。</p>
    </>
 );
};

index.js

import ReactDom from "react-dom";
import { App } from "./App";

ReactDom.render(<App />, document.getElementById("root");

• normal exportをしているので、インポート時に { App } と波括弧で囲う必要があります。
• インポート時の記述で拡張子は省略可能です。

これでブラウザの表示は変わりません。このようにしてコンポーネント化していきます。

コンポーネントファイルの拡張子

Reactは内部的にはJavaScriptで動いているだけなので、.jsで動作することは可能ですが、.jsxという拡張子も用意されており

.jsxを使うことが推奨されています。

• 一目でjsファイルなのか、コンポーネントなのかの区別がつきます。
• エディターの便利な補完機能が働きます。

コンポーネントのファイルは.jsxの拡張子に変更していきましょう。(TypeScriptの場合は.tsxを使用します)

最後に

Reactのまとめに入りました。引き続きまとめていきます。

読んでくださった方、ありがとうございます。