Reactの環境構築と基本構造の確認

Reactは、ユーザインタフェースを構築するためのライブラリです。

環境構築

スターターキット導入

早速環境を構築しましょう。このコマンドを打つだけです。

npm i -D create-react-app
npx create-react-app my-app

そうすると、reactを動作させるのに必要なものが一式入ったプロジェクトが作成されます。

まずはsrcとpublicの中身を確認して、それぞれのファイルが何なのかを整理しましょう。無視してよいレベルのものは省略します。

特に重要なのはApp.jsですね。ここがWebアプリのコアとなる部分です。index.jsもWebアプリの根っこの部分と言えるので、軽く把握しておきましょう。Vue.jsでは.mountをする部分と言えます。

ビルド

ファイルを作成できたので、次はビルドしましょう。

npm start

package.jsonを見ると、react-scripts startが動作しています。これはWebサーバを建てるのに加え、ビルド後にWebページを自動で開き、ホットリロードも有効になります。スクリプトを更新すれば、自動的に画面にも反映される優れものです。

軽く構成を確認

Reactの特徴は、コンポーネントベースであることです。パーツで1つ1つのコンポーネントを作成し、それを組み合わせて1つの画面を作ります。上で導入したスターターキットでもコンポーネントが使用されています。

index.js

まずはindex.jsを見てみます。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// ...

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

重要なのは、import App from './App';を読み込み、<App />で表示している部分です。importで読み込んだコンポーネントを、タグとして書くことで出力しています。Vueの書き方とも似ていますね。

React.StrictModeは、単に構文を厳しくチェックするかどうかで、通常は付与します。render内でReactタグで囲んだ中身が、Reactのアプリとして動作します。

renderの第2引数のdocument.getElementById('root')はマウント対象です。ここで選択したタグの部分にReactのアプリが描画されます。

React18での書き方

create-react-appで導入するとReact18が導入されますが、renderは古い書き方のままです。新しい書き方では、次のように書きます。

import React from 'react';
// react-dom/client にする
import ReactDOM from 'react-dom/client';
import App from './App';

// ReactDOM.createRoot(container).render(DOM) のように書く
ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

App.js

ここにメインの処理が書かれています。Reactはクロージャを基本として書かれるので、コンポーネントは関数です。また、return(/* DOM */)という特殊な書き方になっていることがわかります。

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
            </header>
        </div>
    );
}

React特有のコンポーネントにあるDOMのようなものをJSXという、Javascriptの構文を拡張した書き方です。ここで返したものをimportしてタグの形式で埋め込んで表示しているということです。

const p = <p style={{color: "red"}}>abcde</p>;

まとめ

Reactは近年のWebアプリ制作に数多く用いられるライブラリです。コンポーネントベースで、クロージャを活用したコードを書きます。

構築したらまずは簡単な部分から始めてみましょう。