React レクチャー1 (概要とHelloWorld)
このレクチャーの目的
- 新しい言語(React)に触れる
- 簡単なアプリケーションを作成
GithubPagesを使ってサイトを公開する
Reactの公式リファレンスを参考にして、簡単なアプリケーションを作成します。実際に資料を作るにあたって参考にした文献、また、おすすめのサイトを最後に記載しておくので、興味があれば是非読んでみてください。
Reactとは
- Facebookが開発した
UI[1]を構築するためのJavaScriptライブラリ[2] - Facebook, Instagramはもちろん、Yahoo!やSlackなどにも使用されている
-
コンポーネント[3]ベースで宣言的なView[4]が特徴的 -
仮想DOM[5]が使用されているので、処理が高速である
環境構築
・Windowsの場合
Node.js公式ページより、推奨版をダウンロード。
Node.jsとは
JavaScriptの実行環境である。
Node.jsを用いることによって、サーバープログラムをJavaScriptで開発できるようになる。
npmとは
Node Package Managerの略。
Node.jsのパッケージを管理するツールである。
コマンドプロンプトで以下のコマンドを入力してインストールが成功しているかを確認。
$ node --version
v14.17.4
$ npm --version
6.14.14
上記のようにversion(Node.js:10.16以上, npm:5.6以上)が出力されていれば大丈夫です。
また、yarnもインストールしておくと便利です。以下のコマンドでインストール可能。
$ npm install -g yarn
$ yarn --version
1.22.11
・Macの場合
多分Windows同様でいけるはず
create-react-app
お好きなところに、Lecture(正直名前はなんでもいい)というディレクトリを作成してください。
その次に、create-react-appでtictactoe-app(上記同様)という雛形を作成。
$ cd Lecture
$ npx create-react-app tictactoe-app
何も問題がなければ、以下のコマンドでReactアプリを起動できます。
$ cd tictactoe-app
$ npm start
localhost:3000で以下のような画面が表示されていれば成功です。
ファイル構成と準備
ファイル構成
tictactoe-app
├── node_modules (npmで管理されるモジュール類がまとめてある)
├── public (公開フォルダ。 HTMLやCSS、画像など静的ファイルを格納)
- │ ├── favicon.ico
│ ├── index.html (重要: アクセス時に表示される部分)
- │ ├── logo192.png
- │ ├── logo512.png
- │ ├── manifest.json
- │ └── robots.txt
├── src (基本的に触るのはここ。開発ファイル、JSXファイルはここに格納)
│ ├── App.css (App.jsのスタイルシート)
│ ├── App.js (重要: index.htmlに組み込み実際に画面を表示しているコンポーネント)
- │ ├── App.test.js
│ ├── index.css (index.jsのスタイルシート)
│ ├── index.js (重要: アプリのベースとなるスクリプト)
- │ ├── logo.svg
│ ├── reportWebBitals.js
- │ └── serviceWorker.js
├── .gitignore (githubにコードをあげる際に使用。不必要なファイルを指定)
├── package-lock.json (npm又はyarnに関する設定情報)
├── package.json (npmでパッケージ管理をするための設定情報)
└── README.md (プロジェクトの説明情報、取扱説明書)
描画を行う中で特に重要なファイルが、以下の3つになります。
- public/index.html
- src/App.js
- src/index.js
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta name="theme-color" content="#000000" />
- <meta
- name="description"
- content="Web site created using create-react-app"
- />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
- <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
<title></title>で、ページのタブ部分に表示されるタイトル名を指定。
<body></body>で、ページの全体部分を指定。
また、bodyタグの中にある<div id="root></div> で、src/App.js部分を描画しています。
重要なところは、上記の部分のみなので、それ以外の
また、<meta charset="utf-8" />となっているので、エンコーディングを「UTF-8」に設定して保存するようにしてください。ここを合わせないと、文字化けの原因となります。
src/App.js と Hello World
- import logo from './logo.svg';
import './App.css';
function App() {
return (
+ <h1> Hello, World! </h1>
- <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>
);
}
export default App;
App.jsが先ほどpublic/index.htmlで指摘した通り、サイトのbody部分になります。
とりあえず、お馴染みのHello,World!を表示してみましょう。
上記の画像のように表示されていれば成功です。
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
-import reportWebVitals from './reportWebVitals';
ReactDOM.render(
- <React.StrictMode>
+ <App />,
- <App />
- </React.StrictMode>,
document.getElementById('root')
);
-reportWebVitals();
src/index.jsでは、<App/>,document.getElementById('root')で、App.jsの内容をpublic/index.htmlの<div id="root"></div>に表示しろと命令しているものになります。
<React.StrictMode>というのは、構文などを細かくチェックするモードを指定するもので、表示や動作とは直接関係しないため、今回は削除しています。あってもなくてもどちらでも良いです。
実際に、不要なファイル、重要なファイルの書き換えを行なった上でHello Worldがきちんと表示されているか動作確認を行ってみましょう。
Discussion