Reactとは
・JavaScriptフレームワークの一つ。
・Chrome, Firefox などで動作します。IE8で一部機能、IE9で制限付き、IE10でフル機能がサポートされます。
・JavaScriptの中に直接 HTML/XMLを記述する JSX という技術を利用しています。
・CDNと直接インストールする方法があります。
CDN
・CDNを用いた例は下記の様になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>React Test</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
・直接インストール
Node.js環境でReactをインストールするには、npmを用います。
$ npm install -g create-react-app
・アプリケーション作成
create-react-appコマンドでアプリケーションを作成します。
$ create-react-app my-app
$ cd my-app
・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>
・src/index.jsは次のような内容になっています。
・JavaScriptとHTML が合体したようなJSX という独特な文法で記述することができます。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
・npm startを実行すると、開発用の簡易サーバが起動します。
$ npm start
・ReactDOM.render()
ReactDOM.render() では、第2引数で指定した DOM 要素に対して、第1要素で指定したコンポーネントを割り当てます。
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
・コンポーネントを定義する
var App = React.createClass({ // 廃止
render() {
return <h1>Hello!</h1>;
}
});
・プロパティの受け渡し
ReactDOM.render(
<Hello name="Tanaka" />,
document.getElementById('root')
);
・静的関数の場合
function Hello(props) {
return <h1>Hello {props.name}!</h1>;
}
・JSXの書き方
Reactでは、JavaScriptの文法中に XMLのようなタグを記述可能な、JavaScriptの拡張言語 JSXを採用しています。
( ) で囲むことにより、複数行のタグを記述することができます。
return (
<div>
<h1>Hello</h1>
<p>This is ...</p>
</div>
);
・JSX構文では、要素は単一の要素として記述する必要があります。
・下記の例は、2つの要素を返却しているため、Syntax error となります。
return (
<h1>Hello</h1>
<p>This is ...</p> // Syntax error
);
・{ 変数名 } で変数の値を参照することができます。
let name = 'Tanaka';
return <h1>Hello {name}!</h1>
・{ 変数名 } は属性値として使用することもできます。
let name = 'Tanaka';
return <input type="text" value={name} />;
・{ } の中では JavaScript の式を記述することができます。
return <div>3 + 5 = { 3 + 5 }</div>;
・{ } の中から関数を呼び出すことができます。
add(x, y) { return x + y; }
render() {
return <div>3 + 5 = {this.add(3, 5)}</div>
}
※｛ } の中で複文を記述することはできません。下記は Syntax error となります。
return <div>3 + 5 = {a = 3; b = 5; a + b}</div> // Syntax error
以上、React入門についてでした。