■概要
React - ユーザインターフェース構築のための JavaScript ライブラリ
https://ja.reactjs.org/
React入門 - とほほのWWW入門
http://www.tohoho-web.com/ex/react.html
jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)
https://nulab.com/ja/blog/typetalk/how-to-make-website-with-react-static/
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
https://zenn.dev/meijin/articles/bulletproof-react-is-best-architecture
React + Typescript の現場で初心者からよくあった質問とか小技的なのを書いてく - Qiita
https://qiita.com/dosukoi_man/items/70386fa0bb919804eaed
React フレームワークの 動向と選定基準 - Speaker Deck
https://speakerdeck.com/azukiazusa1/react-huremuwakuno-dong-xiang-toxuan-ding-ji-zhun
Reactで使用するJSXの基本をわかりやすく解説｜Kinsta
https://kinsta.com/jp/knowledgebase/what-is-jsx/
ReactとVue.jsはどっちがいい？それぞれの特徴や違い…｜Udemy メディア
https://udemy.benesse.co.jp/development/system/react-vue.html
■簡易な開発
■ReactをCDNで利用
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>React</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body>
<h1>React</h1>
<div id="root">
<p>Loading...</p>
</div>
<script>
let dom = document.querySelector('#root');
let element = React.createElement(
'p', {}, 'Hello Rect!',
);
ReactDOM.render(element, dom);
</script>
</body>
</html>
なお、上記で読み込んでいるscriptは開発用のもの
本番環境では、以下のように圧縮されたファイルを読み込むといい
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
↓
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
■開発ツールスタンドアロン版
>npm install -g react-devtools
>react-devtools
以下のようなGUI画面が表示される
Add one of the following (click to copy).
<script src="http://localhost:8097"></script>
<script src="http://192.168.56.1:8097"></script>
to the top of the page you want to debug,
before importing React DOM.
作成したファイル内 <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> の直前に以下を追加する
<script src="http://localhost:8097"></script>
その後GUI画面を確認すると、開発ツールが表示されている
コマンドプロンプトで終了すると、開発ツールが終了される
■プロジェクトを作成して開発
■プロジェクトを作成
>cd C:\path\to\react_project
>npx create-react-app readt_app
readt_app フォルダが作成され、その中にファイルが作成される
なおプロジェクトは、npx ではなく以下のように npm でも作成できる。結果は同じ
npm は「パッケージをインストールして実行」となるが、
npx は「パッケージを一時的にダウンロードして実行し、完了したらパッケージをクリア」となる
ダウンロードのための時間はかかるが、ローカル環境にパッケージをインストールしないで済むため、
現在は npx によるプロジェクト作成が主流となっている
>npm init react-app readt_app
プロジェクトの操作はこのフォルダ内で行うため、フォルダ内に移動しておく
>cd readt_app
以下でプロジェクトを実行する
>npm start
Compiled successfully!
You can now view readt_app in the browser.
Local: http://localhost:3000
On Your Network: http://172.23.144.1:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
上記のように表示され、表示されている http://localhost:3000 にアクセスするとページが表示される
■プロジェクトをビルド
以下でプロジェクトをビルドできる
>npm run build
build 内にファイルが書き出さる
これらをWebサーバの公開フォルダ直下に配置すると画面が表示される
ただしパスは「/」はじまりのため、公開フォルダ直下でないと表示されないが、
package.json に以下を追加して再ビルドすると表示されるようになる
{
"name": "readt_app",
"version": "0.1.0",
"private": true,
"homepage": "./", … 追加
■JSX
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>React</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<h1>React</h1>
<div id="root">
<p>Loading...</p>
</div>
<script type="text/babel">
let dom = document.querySelector('#root');
let element = (
<div>
<h2>JSX Sample</h2>
<p>これはJSXのサンプルです。</p>
</div>
);
ReactDOM.render(element, dom);
</script>
</body>
</html>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> を読み込むと、
<script type="text/babel"></script> 内にJSXを記述することができる
■値を埋め込む
<div id="root">
<p>Loading...</p>
</div>
<script type="text/babel">
let dom = document.querySelector('#root');
let title = 'タイトル';
let message = 'メッセージ。';
let message_style = {
fontSize: "20px",
color: "#FF0000",
border: "1px solid #000000"
};
let link = 'https://www.google.co.jp/';
let element = (
<div>
<h2>{title}</h2>
<p style={message_style}>{message}</p>
<p><a href={link}>リンク</a></p>
</div>
);
ReactDOM.render(element, dom);
</script>
「{」と「}」で囲うと変数を埋め込める
変数の値を属性に使う場合、ダブルクォートは不要
■関数でJSXを作る
<div id="root">
<p>Loading...</p>
</div>
<script type="text/babel">
let dom = document.querySelector('#root');
let printMsg = function(message, size, color) {
let style = {
fontSize: size + "px",
color: color,
border: "1px solid #000000"
};
return <p style={style}>{message}</p>;
}
let element = (
<div>
<h2>関数でJSXを作る</h2>
<ul>
<li>{printMsg('メッセージ1', 10, '#FF0000')}</li>
<li>{printMsg('メッセージ2', 20, '#00FF00')}</li>
<li>{printMsg('メッセージ3', 30, '#0000FF')}</li>
</ul>
</div>
);
ReactDOM.render(element, dom);
</script>
■配列を扱う
<div id="root">
<p>Loading...</p>
</div>
<script type="text/babel">
let dom = document.querySelector('#root');
let data = [
<li>太郎</li>,
<li>花子</li>,
<li>幸子</li>
];
let element = (
<div>
<h2>配列を扱う</h2>
<ul>
{data}
</ul>
</div>
);
ReactDOM.render(element, dom);
</script>
■mapで配列を扱う
<div id="root">
<p>Loading...</p>
</div>
<script type="text/babel">
let dom = document.querySelector('#root');
let data = [
{ name: '太郎', mail: 'taro@example.com', age: 45 },
{ name: '花子', mail: 'hanako@example.com', age: 37 },
{ name: '幸子', mail: 'sachiko@example.com', age: 29 }
];
let element = (
<div>
<h2>mapで配列を扱う</h2>
<table border="1">
<tr>
<th>name</th>
<th>mail</th>
<th>age</th>
</tr>
{data.map((value) => (
<tr>
<td>{value.name}</td>
<td>{value.mail}</td>
<td>{value.age}</td>
</tr>
))}
</table>
</div>
);
ReactDOM.render(element, dom);
</script>
■表示を更新する
<div id="root">
<p>Loading...</p>
</div>
<script type="text/babel">
let dom = document.querySelector('#root');
let p_style = {
fontSize: "20px"
};
var counter = 0;
setInterval(() => {
counter++;
let element = (
<div>
<p style={p_style}>count: {counter}</p>
</div>
);
ReactDOM.render(element, dom);
}, 1000);
</script>
■フォームの値を利用する
<div id="root">
<p>Loading...</p>
</div>
<script type="text/babel">
let dom = document.querySelector('#root');
let p_style = {
fontSize: "20px"
};
let message = 'お名前を入力してください。';
let name = '';
let doChange = (event) => {
name = event.target.value;
message = 'こんにちは、' + name + 'さん。';
};
let doAction = (event) => {
let element = (
<div>
<p style={p_style}>{message}</p>
<div>
<input type="text" id="name" onChange={doChange} />
<button onClick={doAction}>Click</button>
</div>
</div>
);
ReactDOM.render(element, dom);
};
doAction();
</script>
■コンポーネント
■関数コンポーネントを使う
<div id="root">
<p>Loading...</p>
</div>
<script type="text/babel">
let dom = document.querySelector('#root');
// 関数コンポーネント
function Hello() {
return <p>Hello! React</p>
}
let element = (
<div>
<h2>JSX Sample</h2>
<Hello />
</div>
);
ReactDOM.render(element, dom);
</script>
■関数コンポーネントで属性を利用する
<div id="root">
<p>Loading...</p>
</div>
<script type="text/babel">
let dom = document.querySelector('#root');
// 関数コンポーネント
function Hello(props) {
return <p>{props.name}さん、{props.greeting}。</p>
}
let element = (
<div>
<h2>JSX Sample</h2>
<Hello name="太郎" greeting="こんにちは" />
<Hello name="花子" greeting="こんばんは" />
</div>
);
ReactDOM.render(element, dom);
</script>
■コンポーネントをクラスで作成する
<div id="root">
<p>Loading...</p>
</div>
<script type="text/babel">
let dom = document.querySelector('#root');
// コンポーネントをクラスで作成
class Hello extends React.Component {
name = '';
greeting = '';
constructor(props) {
super(props);
this.name = props.name;
this.greeting = props.greeting;
}
render() {
return <p>{this.name}さん、{this.greeting}。</p>;
}
}
let element = (
<div>
<h2>JSX Sample</h2>
<Hello name="太郎" greeting="こんにちは" />
<Hello name="花子" greeting="こんばんは" />
</div>
);
ReactDOM.render(element, dom);
</script>
■関数コンポーネント
シンプルな関数コンポーネント
import './App.css';
function App() {
return (
<div className="App">
<h1>React</h1>
<p>これはサンプルのコンポーネントです。</p>
</div>
);
}
export default App;
■ステート
以下はクリックしてもカウントアップされない
関数コンポーネントは、「呼び出されたときだけ働き、描画し終えたら消えるもの」のため
import './App.css';
function App() {
var counter = 0;
const doClick = ()=> {
counter++;
}
return (
<div className="App">
<h1>React</h1>
<p>これはサンプルのコンポーネントです。</p>
<p onClick={doClick}>counter: {counter}</p>
</div>
);
}
export default App;
以下のように、ステートを使うと値を保持できる
「import { useState } from 'react';」で関数を読み込み、「const [値を保持する変数名, 値を変更する関数名] = useState(値の初期値);」のように使用する
値が更新されると、表示も自動で更新される
import './App.css';
import { useState } from 'react';
function App() {
const [counter, setCounter] = useState(0);
const doClick = ()=> {
setCounter(counter + 1);
}
return (
<div className="App">
<h1>React</h1>
<p>これはサンプルのコンポーネントです。</p>
<p onClick={doClick}>counter: {counter}</p>
</div>
);
}
export default App;
以下のようにして、フォームの値をもとに表示を更新できる
import './App.css';
import { useState } from 'react';
function App() {
const [name, setName] = useState('');
const [message, setMessage] = useState('名前を入力してください。');
const doInput = (e)=> {
setName(e.target.value);
}
const doClick = (e)=> {
e.preventDefault();
setMessage('こんにちは、' + name + 'さん。');
}
return (
<div className="App">
<h1>React</h1>
<p>{message}</p>
<form>
<input type="text" onChange={doInput} />
<button onClick={doClick}>クリック</button>
</form>
</div>
);
}
export default App;
以下のように、副作用フックを使うとコンポーネントの更新時に自動で処理を実行できる
「import { useState, useEffect } from 'react';」で関数を読み込み、「useEffect(() => { 実行させたい処理 }, [更新を監視する変数]);」のように使用する
import './App.css';
import { useState, useEffect } from 'react';
function App() {
const [number, setNumber] = useState(0);
const [message, setMessage] = useState('');
const doInput = (e)=> {
setNumber(e.target.value);
}
useEffect(() => {
if (number < 2) {
setMessage('1より大きい自然数を入力してください。');
} else {
var prime = true;
for (var i = 2; i <= number / 2; i++) {
if (number % i === 0) {
prime = false;
break;
}
}
setMessage(prime ? '素数です。' : '素数ではありません。');
}
}, [number]);
return (
<div className="App">
<h1>React</h1>
<p>{message}</p>
<form>
<input type="text" onChange={doInput} />
</form>
</div>
);
}
export default App;
■クラスコンポーネント（以前に検証したもの）
>cd C:\path\to\react_project
>npm init react-app readt_app
>cd readt_app
>npm start
http://localhost:3000/ にアクセスするとページが表示される
これをベースに試していく
主なファイルは以下のとおり
メインの画面となるHTML
public\index.html
メインの処理となるJavaScript
src\index.js
CSS
src\index.css
実際に画面に表示を行うコンポーネント
src\App.js
src\App.js を編集して画面表示を変更してみる
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>これはサンプルのコンポーネントです。</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
編集してファイルを保存すると、自動で http://localhost:3000/ の内容が更新される
■HTMLとCSSの編集
src\App.js
import React from 'react';
import './App.css';
function App() {
return (
<div>
<h1>React</h1>
<p>This is sample component.</p>
<p>これはサンプルのコンポーネントです。</p>
</div>
);
}
export default App;
src\App.css
body {
margin: 20px;
}
h1 {
font-size: 72pt;
font-weight: bold;
text-align: right;
letter-spacing: -8px;
color: #eee;
margin: -40px 0;
}
p {
margin: 0;
color: #666;
font-size: 16pt;
}
■コンポーネントを組み合わせる
src\App.js
import React from 'react';
import './App.css';
function App() {
return (
<div>
<h1>React</h1>
<p>This is sample component.</p>
<p>これはサンプルのコンポーネントです。</p>
<Rect x="50" y="250" width="150" height="150" color="#AAF" />
<Rect x="180" y="150" width="120" height="120" color="#FAA" />
</div>
);
}
class Rect extends React.Component {
x = 0;
y = 0;
width: 0;
height: 0;
color: '#000';
style = {};
constructor(props) {
super(props);
this.x = props.x;
this.y = props.y;
this.width = props.width;
this.height = props.height;
this.color = props.color;
this.style = {
backgroundColor: this.color,
position: "absolute",
left: this.x + "px",
top: this.y + "px",
width: this.width + "px",
height: this.height + "px"
};
}
render() {
return <div style={this.style}></div>;
}
}
export default App;
■コンポーネントを別ファイルにする
src\App.js
import React from 'react';
import Rect from './Rect';
import './App.css';
function App() {
return (
<div>
<h1>React</h1>
<p>This is sample component.</p>
<p>これはサンプルのコンポーネントです。</p>
<Rect x="50" y="250" width="150" height="150" color="#AAF" />
<Rect x="180" y="150" width="120" height="120" color="#FAA" />
</div>
);
}
export default App;
src\Rect.js
import React from 'react';
class Rect extends React.Component {
x = 0;
y = 0;
width: 0;
height: 0;
color: '#000';
style = {};
constructor(props) {
super(props);
this.x = props.x;
this.y = props.y;
this.width = props.width;
this.height = props.height;
this.color = props.color;
this.style = {
backgroundColor: this.color,
position: "absolute",
left: this.x + "px",
top: this.y + "px",
width: this.width + "px",
height: this.height + "px"
};
}
render() {
return <div style={this.style}></div>;
}
}
export default Rect;
■ステートを使う
・プロパティ … クラスに値を保管しておくもの
・props … コンポーネントの属性を保管しておくもの。読み出し専用
・ステート（state） … コンポーネントの状態を保管しておくもの。コンポーネントの表示を変えたりするときに使う
src\App.js
import React from 'react';
import './App.css';
class App extends React.Component {
msgStyle = {
color: "#666"
};
alertStyle = {
color: "#C00",
fontWeight: "bold"
};
btnStyle = {
fontWeight: "bold"
};
constructor(props) {
super(props);
this.state = {
counter: 1,
msg: 'count start!'
};
this.doAction = this.doAction.bind(this); // イベントで実行できるようにする
}
doAction(e) {
this.setState((state) => ({
counter: state.counter + 1,
msg: 'count: ' + state.counter,
flg: state.counter % 5 == 0 // 数値によってフラグを設定する
}));
}
render() {
return (
<div>
<h1>React</h1>
{this.state.flg ? // フラグによって表示を切り替える
<p style={this.alertStyle}>{this.state.msg}</p>
:
<p style={this.msgStyle}>{this.state.msg}</p>
}
<button style={this.btnStyle} onClick={this.doAction}>クリック</button>
</div>
);
}
}
export default App;
■子エレメントを取得する
src\App.js
import React from 'react';
import './App.css';
function App() {
return (
<div>
<h1>React</h1>
<Message title="Children!">
これは/テスト/です。
</Message>
</div>
);
}
class Message extends React.Component {
render() {
let children = this.props.children.split('/');
let list = [];
for (let i = 0; i < children.length; i++) {
if (children[i].trim() != '') {
list.push(
<li>{children[i]}</li>
);
}
}
return (
<div>
<h2>{this.props.title}</h2>
<ul>{list}</ul>
</div>
);
}
}
export default App;
■フォームを利用する
src\App.js
import React from 'react';
import './App.css';
class App extends React.Component {
msgStyle = {
color: "#666"
};
btnStyle = {
fontWeight: "bold"
};
constructor(props) {
super(props);
this.state = {
message: '名前を入力してください。'
};
this.doChange = this.doChange.bind(this); // イベントで実行できるようにする
this.doSubmit = this.doSubmit.bind(this); // イベントで実行できるようにする
}
doChange(event) {
this.input = event.target.value;
}
doSubmit(event) {
this.setState({
message: 'こんにちは！' + this.input + 'さん。'
});
event.preventDefault();
}
render() {
return (
<div>
<h1>React</h1>
<p style={this.msgStyle}>{this.state.message}</p>
<form onSubmit={this.doSubmit}>
<label>
<input type="text" onChange={this.doChange} />
</label>
<input type="submit" style={this.btnStyle} />
</form>
</div>
);
}
}
export default App;
■引き続き
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか - エンジニアHub｜Webエンジニアのキャリアを考える！
https://eh-career.com/engineerhub/entry/2022/01/13/090000