[React] よーし! いっちょReactやってみっか! #5 HTML→プロジェクト編

はじめに

CX事業本部の中安です。まいどです。

モバイルアプリエンジニアな自分がReactを始めてみることにした 「よーし! いっちょReactやってみっか!」シリーズの続きです。 今回もよろしくお願いします。

前回は単独のHTMLファイルでReactのスクリプトを書いてコンポーネントを作り、propsの機能を使ってみました。

実践的には初回に作ったReactプロジェクトを使うことのほうが多いでしょうから、今回はそちらの方で始めていこうと思います。

おさらいと下準備

Reactプロジェクトの作り方〜起動をさくっとおさらい。

% cd (任意のディレクトリ)
% npx create-react-app (任意のプロジェクト名)
% cd (任意のプロジェクト名)
% npm start

このステップだけでブラウザが自動で起動してhttp://localhost:3000/でWEBアプリが表示されるはずです。

で、ここでできあがったWEBアプリはテンプレートによるものなので、一旦全部消してしまいましょう。

% rm src/*
zsh: sure you want to delete all 8 files in /(プロジェクトのパス/src [yn]? y

このままだと「index.jsがない」と怒られる(リアルタイムでブラウザにエラーが出ると思います)ので、新しく作ってみましょう。

% touch src/index.js

これでブラウザ上は真っ白だけど、エラーのないWEBページが表示されるかと思います。

さて、このシリーズ通りやっていると、VSCodeを簡単に起動するコマンドも打てるようになっているはずです。

% code .

これですぐにソースコードの編集を始められると思います。

index.js

では今作ったindex.jsに書き込んでいきます。

インポート

前回にHTMLファイル上にReactスクリプトを書いたときのようにReactとReactDOMを読み込むようにしてやる必要があるようです。

この場合はnpmによるモジュールからのインポートのため、冒頭にこのように書きます。

import React from 'react';
import ReactDOM from 'react-dom';

今回はこれだけですが、他のコンポーネント、クラス、スタイルやアセットなども、使うときにはインポートが必要になるようですね。

前回作ったものを持ってくる

これ以降は前回に作ったスクリプトをそのまま持ってくるようにしましょう。

import React from 'react';
import ReactDOM from 'react-dom';

const Hello = (props) => {
    return <h1>Hello {props.name}!</h1>
}

let dom = document.getElementById('root');
ReactDOM.render(
<div>
    <Hello name="Developers.IO" />
    <Hello name="Classmethod" />
</div>,
dom);

前回記事と同じものがブラウザで表示されるのを確認できると思います。 アプリを起動していればファイルの保存と同時に自動でリロードされるので楽しいですね!

最後に

短いですが、今回はここまで。

npm startで起動したローカル上のWEBアプリは、自分で書いたスクリプトがすぐに反映されることが確認できました。

次はスタイルを当ててみる等をしてみようかなと思います。

では、またー。