1. 本ページについて
Reactの導入および環境構築の手順書を示す。
また、基礎理解と動作確認を兼ねた簡単なHello World表示をゴールとする。
2. 前提
以下を満たしているとなお良いです。
・HTML/CSSの基本は理解している。
・プログラミングの基本を理解している。
（ex. 変数宣言、代入、if,for,while,関数定義、呼び出し等)
・javascriptの基本文法を理解している。(アロー関数など)
また、敷居を下げるためにWindowsOS上での作業を想定しております。
Linux上で作業する方各種コマンドを置き換える等して対応して下さい。
3. 環境構築
3.1. 必要なパッケージインストール
Node.jsとNodist
・Node.jsとは、サーバー側でJavaScriptを動かすための実行環境です。
Reactプロジェクトを作成・実行するための基盤と考えてください。
・Nodistは、Node.jsのバージョン管理ツールとなります。
Nodistを用いてNode.jsを使用することでNode.jsのバージョンを開発者側で任意に切り替えられるようになります。
そのため、古いバージョンでの動作環境を調査したり、アップデートによって破壊的変更が行われてしまった場合でも対応が容易となります。
今回はNodistを使ってNode.jsのインストールを行います。
Nodistインストール
下記githubリポジトリからNodistSetup-vx.x.x.exeをダウンロードして実行してください
（リポジトリのクローンをする必要はありません。）
https://github.com/nodists/nodist/releases
下記のような画面が表示され、Finishをクリックすれば完了となります。
"C:\Program Files (x86)\Nodist"というフォルダが存在し、中身は以下のような構成になっているかと思います。
npmとnpxについて
npmとは、Node.jsのパッケージ管理ツールとなります。
パッケージインストール、アップデートなどをnpmを用いて行います。
Pythonでいうところのライブラリとpipのようなものだと思ってください。
npxは、ローカルにインストールされていないパッケージを一時的にインストールして実行するコマンドです。
一回だけ使用すればいいもの（create-react-appのようなプロジェクトの初期化コマンド）などはnpxで実行
開発中に何度も使用されるもの（importで呼び出されるライブラリ)はnpmでインストールして実行します。
コマンドプロンプトを開き、npmコマンドを実行するとnpmがインストールされていることを確認できます。
Reactプロジェクトを作成
コマンドプロンプトを開き、下記コマンドを実行してプロジェクトを作成してください
（本来はgitリポジトリ配下でプロジェクトを作成しますが、今回は割愛します)
npx create-react-app test-react-app
少し時間はかかると思いますが、完了するとカレントディレクトリ上にtest-react-appというフォルダが生成されています。
package.jsonファイルについて
test-react-appフォルダの中に、package.jsonというファイルがあります。
このjson内の"scripts"内で各種npmコマンドとreact-scriptsコマンドとの紐づけが行われる。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
つまり、npm startコマンドを実行するとreact-scripts startコマンドが実行されます。
react-scripts startコマンドは自分の端末をループバック(localhost:3000)にしてブラウザ上にreactプロジェクトを表示することができます。
ループバックでReactプロジェクトを起動
startコマンドを実行します。
cd test-react-app
npm start
npm startが完了すると標準ブラウザにlocalhostが立ち上がり、以下のような画面が表示されるはずです。
index.jsとapp.js
index.htmlはアプリケーションのトップページを構成するhtmlファイルで、index.jsはreactアプリケーションを立ち上げた際に一番呼び出されるjavascriptです。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
上のindex.jsを要約するとappコンポーネントをindex.html内のroot要素内に出力させています。
呼び出し元のApp.jsも確認してみましょう。
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>
);
}
このappコンポーネントがindex.jsによって呼び出されてindex.htmlに組み込まれて先ほどのページが表示されたというわけです。
とは言え、index.js,index.htmlを変えることはそんなにありません。(というかここを変えられるほどReactを理解できていない)
ブラウザの開発者ツールでページ内のhtmlを確認してみましょう。
（chromeの場合は右クリック→開発者ツールで表示できます。）
app.jsが表示されていることが確認できましたね。
では、次にこのapp.jsファイルに変更を加えてhello worldを表示させましょう。
hello worldを表示させる
app.jsを下記で上書きしてみましょう。
この時、2画面表示にするなどしてブラウザも同時に見える状態で作業してください。
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Hello, World!</h1>
</header>
</div>
);
}
export default App;
ファイルを書き換えて保存すると、ブラウザが以下のような表示に変わったかと思います。
これでReactの環境構築および動作確認は終了となります。
Next
・簡単な勤怠登録(のような)アプリケーションを作ってhtml/cssおよびreactコンポーネントのレンダリングや状態管理(usageState）などを学習します。
参考になった方は いいね など押していただけると今後の励みとなります。