React初心者の実行の流れに関するメモ書き
React初心者の実行の流れに関するメモ書き:
趣味でReactを触ろうと思い、ぼちぼち触っているものの
覚えた端から忘れていくので自分用にメモ。
React実行の流れとしては
トップページ（index.html）→index.js→Apps.jsの流れで動いていく
アプリが動作するメインのページ
以下のように記述されている。
Reactアプリを実行する際、一番最初に呼び出されるファイル
index.jsで使われているRenderメソッドについて。
index.htmlの「id="root"」の要素に出力せよという意味になる。
コンポーネント＝ページを構成するUI部品。
以下にAppコンポーネントを定義する
これまでの流れ整理し、
index.jsでAppコンポーネントを呼び出し、Appコンポーネントのrenderメソッドが
出力内容を生成し、index.htmlの(index.jsで）指定した箇所が
反映されるといった流れになります。
Reactにおいて必須なJSXについて。
JSXはざっくり言うとJavaScript上でHTMLのコードを使えるJavaScriptの拡張構文。
JSXはBabelでJavaScriptに変換される。
以下の例がJSX。
JSXがBabelで変換されると以下のように出力される。
以上です。
はじめに
趣味で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)上記コードの例で言えば、下記のAppコンポーネント(./App配下のApp.jsなど)を
・comp: 出力するコンポーネント
・target: 出力先の要素
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>;
}
import React from 'react';
function render() {
return React.createElement('div', null, 'hogehoge');
}
コメント
コメントを投稿