（備忘録）【React】React入門

こちらは自分用の備忘録です。

Progateを元に学んでいます。

１　コードを書く場所

ポイント
①　App.js
②　render()メソッド

２　JSX

ポイント
①　divタグで一つにまとめる
②　コメントは{/*.    */}

３　imgタグの注意点

ポイント
</>で終わる必要がある

４　App.jsの構成

ポイント
①　import React from 'react';
②　Class App extends React.Components {
③　　render(){ return(  JSX  );}
④　export default App;

５　JSXを書く場所

ポイント
①　returnの中
②　JSをJSXに埋め込むには{}

６　イベントの書き方

ポイント
①　イベント名 = { () => { 処理  }   }
②　クリック時の例　onClick = { () => {  処理  }   }

７　stateの定義

ポイント
①　場所は「constructor」に書く
②　this.state = { name: "田中太郎" } でオブジェクトとして定義
③　呼び出すときは {this.state.name}

８　stateの変更

ポイント
・this.setState({name: "鈴木よしこ"});

９　メソッドの作成

ポイント
①　クリック時の処理は「handleClick()」メソッド
②　イベント内での呼び出し　onClick = {() => {this.handleClick()}}
　　⇨この「this」は忘れやすい
③　引数を渡す
　　handleClick(name) {
           this.setState({name: name});
        }

１０　表示の仕組み

ポイント
①　App.js　⇨　index.js　⇨　index.html
②　ReactDOM.render(<App />)でJSXからHTMLに変換
③　document.getElementById('root')で
　　<div id = "root"></div>の中に入れる

１１　CSSの適用

ポイント
JSXのクラスの設定は「className=''」

１２　コンポーネントの作成（Ⅱ-3）

ポイント
React.Componentを継承

１３　コンポーネントの表示（Ⅱ-4）

ポイント
①　外部に出すために「export default Language;」
②　App.jsでの処理
　　１）import Language from './Language';
　　２）<Language />

１４　propsの渡し方（Ⅱ-6）

ポイント
<Language props名='値' />
例
<Language
　name = '田中太郎'
/>

１５　propsの使い方（Ⅱ-7）

ポイント
①　 this.propsで受け取る
②　表示は{this.props.name}

１６　mapメソッドの書き方

{配列.map ((item) => { return { item } } )}
例
{ Items.map( (Item) => {  return<p> { Item} </p>})}

★配列の中がオブジェクトの時★
{配列.map ((item) => { return { item.name } } )}
例
{ Items.map ((item) => {return <p>{ item.name }</p>})}