React 学習帳その１

React とは？

React はユーザインターフェイスを構築するための、宣言型で効率的で柔軟な JavaScript ライブラリです。複雑な UI を、「コンポーネント」と呼ばれる小さく独立した部品から組み立てることができます。

↑公式

JSX

Reactで表示したいときに使うものは、JSXという。
Javascriptの拡張した書き方？らしい。

returnでJSXを返して、returnの外ではJavascriptを書ける。

JSXを書くときの決まりごと

• JSX内にJavascriptを埋め込むこともできるJavascript部分を｛｝で囲む
• JSXはreturnの中に複数の要素があるとエラーになるので、<div></div >で一つの要素にまとめてあげる。
• imgタグに閉じタグ/<img src='画像のURL' />
• inputタグとtextareaタグも同様<input /> <textarea />
• クラスをつけるとき・・・className =　'クラス名'

Reactを使う呪文

App.js

//Reactをインポート
import React from 'react';
//React.componentを継承するクラスですよー　ここのクラスの名前はコンポーネントの名前になる
class App extends React.Component {
//JSXを戻り値とするrenderメソッド
  render() {
    const imgUrl = "画像URL"
return (
      <div>
        <h1 className = 'title'>たいとる</h1>
        <img src={imgUrl}/>
      </div>
    );
//どこかでimportするときにはexportが必要
export default App;

お気づきだろうか・・・・
{imgUrl}を""で囲っていないことに・・・。
なぜかはわからないが囲むとエラーだった。いつかわかるといいな。

Reactが表示される流れ

JSXはJavascriptの拡張版なでJSファイルに書く。その後、どうやってブラウザに表示されるか？
以下の手順が必要に。

• JSXをHTMLに変換する
• HTMLに変換したものをhtmlファイルのどこに反映するかを表記する

index.js

//    ↓React要素
const element = <h1>Hello, world</h1>;

//要素を、表示するid名を指定
ReactDOM.render(element, document.getElementById('root'));

html

<div id='root'>
　　　\ここに JSXから変換されたHTMLが挿入される/
</div>

document.getElementById()で()内で指定したIDのHTMLを取得できる。下のリンク参照。
【JavaScript入門】getElementByIdを完全理解する3つのコツ！
あくまでもJavascriptなんだなぁ

同じJSファイル内にJSXがあれば、上記の書き方でHTMLに変換できる。けど別のファイルだったら↓↓

もし、別ファイル(例：App.js)だったら、

App.jsを読み込む必要あり。

index.js

import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));

注目していただきたい。。。
上のコードの2行目！<App />これなんだろうって思ってたら
タグ（JSXで書かれてる）なんだって！！！！
当たり前なのかもしれないけど私はわからなかったー。
コンポーネントはimportされたところであれば、こういうふうにタグみたいな表記で呼び出せる。