■目次
概要簡易な開発プロジェクトを作成して開発JSXを使うコンポーネントを使うプロジェクトでコンポーネントを使う
■概要
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をCDNで利用
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>React</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/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 src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> ↓ <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/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 src="https://unpkg.com/react@16/umd/react.development.js"></script> の直前に以下を追加する
<script src="http://localhost:8097"></script>
その後GUI画面を確認すると、開発ツールが表示されている コマンドプロンプトで終了すると、開発ツールが終了される
■プロジェクトを作成して開発
■プロジェクトを作成 >cd C:\localhost\home\refirio_org\public_html\memos\react_project >npx create-react-app readt_app hello_app フォルダが作成され、その中にファイルが作成される もしくは npx ではなく npm でも作成できる。結果はまったく同じ。ただし引数が若干異なるので注意 >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://192.168.56.1:3000 Note that the development build is not optimized. To create a production build, use npm run build. 上記のように表示され、表示されている 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 src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.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@6.26.0/babel.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>
■プロジェクトでコンポーネントを使う
>cd C:\localhost\home\refirio_org\public_html\memos\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;