#はじめに
趣味でReactを触ろうと思い、ぼちぼち触っているものの
覚えた端から忘れていくので自分用にメモ。
Reactの実行の流れ
React実行の流れとしては
トップページ（index.html）→index.js→Apps.jsの流れで動いていく
トップページ(index.html)
アプリが動作するメインのページ
以下のように記述されている。
index.html
<!DOCTYPE html>
<html>
<head>
<body>
<div id="root">
/* コンポーネントを出力する場所 */
</div>
</body>
</head>
</html>
index.jsについて
Reactアプリを実行する際、一番最初に呼び出されるファイル
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDom.render(<App />,document.getElementById('root');
registerServiceWorker();
renderメソッドとは
index.jsで使われているRenderメソッドについて。
index.js
ReactDOM.render(<App />,document.getElementById('root'));
render(comp, target)
・comp: 出力するコンポーネント
・target: 出力先の要素
上記コードの例で言えば、下記のAppコンポーネント(./App配下のApp.jsなど)を
index.htmlの「id="root"」の要素に出力せよという意味になる。
Appコンポーネント（App.jsなど)
コンポーネント＝ページを構成するUI部品。
以下にAppコンポーネントを定義する
App.js
class App extends Component {
render() {
return(
<div className = "App">
<header className = "App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
- コンポーネントを定義する際には、Componentクラスを継承する。
class/extendsなどはES6(ES2015)導入された。 - コンポーネントは頭文字は大文字で表す必要がある。
- renderメソッドの戻り値はJSXで記述されたタグ
整理
これまでの流れ整理し、
index.jsでAppコンポーネントを呼び出し、Appコンポーネントのrenderメソッドが
出力内容を生成し、index.htmlの(index.jsで）指定した箇所が
反映されるといった流れになります。
JSXとは
Reactにおいて必須なJSXについて。
JSXはざっくり言うとJavaScript上でHTMLのコードを使えるJavaScriptの拡張構文。
JSXはBabelでJavaScriptに変換される。
以下の例がJSX。
app.js
import React from 'react';
function render() {
return <div>hogehoge</div>;
}
JSXがBabelで変換されると以下のように出力される。
import React from 'react';
function render() {
return React.createElement('div', null, 'hogehoge');
}
以上です。