１．Reactとは
ReactとはFacebook社が開発したjavascriptで書かれたフロントエンドフレームワークです。Reactといえば、一般に上記フレームワークのことですが、React Native、React VRといったモバイルアプリやVRアプリ開発に使える派生形フレームワークも存在します。
２．環境構築
動作環境
windows10
node.js 10.15.3
create-react-app 3.0.
３．準備
１．下記URLからNode.jsをインストールしてください。
https://nodejs.org/en/download/
２．インストールしたNode.jsに含まれているnpmコマンドを使用して、
create-app-reactをインストールしてください
|
1 |
$npm install create-react-app -g |
４．アプリの作成
１．workspace作成
インストールしてきたcreate-react-appのコマンドを使用して雛型を作成します。
|
1 2 3 |
$ create-react-app react-todo $ cd react-todo |
２．componentsフォルダ作成
作成したreact-todo/srcフォルダ内にcomponentsフォルダを作成します。
３．ファイル修正
追加、修正を加えるファイルは以下の５つです。
・components/App.jsx
・components/Form.jsx
・components/List.jsx
・src/index.js
・public/index.html
基本的な動きとしてこのアプリがどう動いているかというと
まず index.jsx → App.jsx という形でコンポーネントの読み込みが行われます。
そこからForm.jsx,List.jsxをApp.jsxの子コンポーネントとしてイベント実行時に状態を変更させる処理を行います。
各コンポーネントはstateとして状態を保持しており、各コンポーネント間でpropsを受け渡すことで状態を変更することができます。
以下、ソースとその詳しい解説です。
index.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React from 'react'; import ReactDOM from 'react-dom'; import * as serviceWorker from './serviceWorker'; import App from './components/App'; ReactDOM.render(<App />, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();１ |
１行目でReact本体をインポートしています。
２行目のReactDOMはレンダリングに必要なパッケージでrender()などを使うのに必要になります。
|
1 |
ReactDOM.render(<App />, document.getElementById('root')); |
これはid=”root”の中に<App />要素を入れ込む、
つまりApp.jsxに書いた記述がブラウザ上のページindex.htmlに反映されるという意味です。
Reactの特徴である仮想DOMによって変更した箇所を随時レンダリングされ画面に反映します。
App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import React, { Component } from 'react'; import Form from './Form'; import List from './List'; export default class App extends Component { constructor(props){ super(props); this.state = { todo: [] }; this.handleAdd = this.handleAdd.bind(this); this.handleRemove = this.handleRemove.bind(this); } // TODO追加 handleAdd(e){ e.preventDefault(); this.state.todo.push({title: e.target.title.value}); this.setState({todo: this.state.todo}); e.target.title.value = ''; } // TODO削除 handleRemove(i){ this.state.todo.splice(i,1); this.setState({todo: this.state.todo}); } render() { return ( |
初期作成時にsrc/App.jsとしてつくられるファイルをComponents内に移動して拡張子を書き換えます。
|
1 2 3 4 5 6 7 8 9 |
export default class App extends Component { constructor(props){ super(props); this.state = { todo: [] }; this.handleAdd = this.handleAdd.bind(this); this.handleRemove = this.handleRemove.bind(this); } |
ここではコンストラクタ初期値の割り当てと
イベントをclassComponentのメソッドとして設定しています。
またコールバック関数として実行する際に関数内の「this」が機能するように、
constructor()内でthisをbindしておく必要があります。
|
1 2 3 4 5 6 |
handleAdd(e){ e.preventDefault(); this.state.todo.push({title: e.target.title.value}); this.setState({todo: this.state.todo}); e.target.title.value = ''; } |
2行目のe.preventDefault()では画面遷移を防止します。React では false を返してもデフォルトの動作を抑止することができません。明示的に preventDefault を呼び出す必要があります。
3,5行目のe.target.(name属性).valueでフォームの中身を取り出すことができます。
4行目のsetState({todo: this.state.todo})でtodoを上書きしています。
Form.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React from 'react'; let style = { maxWidth: '700px' }; let btn = { cursor: 'pointer' }; const List = (props) => ( <ul className="siimple-list"> {props.todos.map((todo, i) => { return <li key={i} className="siimple-list-item siimple--bg-white" style={style}>{todo.title} <span className="siimple-tag siimple-tag--error siimple-hover" style={btn} onClick={() => props.handleRemove(i)}>Delete</span></li> })}; </ul> ); export default List; |
Reactではconst Form = (props) => ()のようにコンポーネントを関数として記載することができる。Stateless Functional Componentと呼ばれる。
また今回はsiimpleというcssを外部から呼びだして使用しています。
List.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React from 'react'; let style = { maxWidth: '700px' }; let btn = { cursor: 'pointer' }; const List = (props) => ( <ul className="siimple-list"> {props.todos.map((todo, i) => { return <li key={i} className="siimple-list-item siimple--bg-white" style={style}>{todo.title} <span className="siimple-tag siimple-tag--error siimple-hover" style={btn} onClick={() => props.handleRemove(i)}>Delete</span></li> })}; </ul> ); export default List; |
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <!-- 追記 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple@3.1.1/dist/siimple.min.css"> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> |
siimpleを呼び出す以外はデフォルトのままです。
ここまで終わったら、
アプリケーションのルートディレクトリに移動して、npm -start を実行。
http://localhost:3000にアクセスすると開発中のページが確認できます。
