Reactの基礎アウトプット

#はじめに

ポートフォリオ 作成のため、Reactについて学ぶ

今回はまずは初歩的な話からまとめる

##React公式HP
https://ja.reactjs.org/

##Reactとは

JSのライブラリーのこと

中身の書き方はほぼHTMLと同じだが、ファイルが異なる
→JSXとなる

##JSX
JSXは、HTMLとほとんど同じように記述可能
見出しには<h1>タグや<h2>タグ、文章には<p>タグ、その他<div>タグなど、HTMLと同様のタグが使える
→return内に複数の要素があるとエラーに。。。
複数の要素がある場合は、

タグで囲んで、1つの要素にまとめないといけない

<div>
	<h1></h1>
	<h2></h2>
</div>

##コメント
コメントは{/* */}で囲む

##imgタグ
imgタグは、HTMLでは、<img src='画像のURL'>のように閉じタグが必要ないが
JSXでは閉じタグが必要<img src='画像のURL' />のように、タグの終わりにスラッシュ「/」を記述

class App extends React.Component {
  render() {
    return (
      <div>
        <img src="o.png"/>←こんな感じ
      </div>
    );
  }
}

##JSXの構成

//Reactをインポート
import React from 'react';

// //React.Componentを継承するクラスの定義
class App extends React.Component{
  render(){
  //JSXを返り値とするrenderメソッドを定義
    return (
      <h1>Hello React</h1>	//JSX部分
    );
  }
}

// Appクラスをエクスポート
export default App;

①renderメソッドの、returnの外にはJavaScriptを記述できる
②returnの中でも、JSXにJavaScriptを埋め込むことが可能。
　JavaScriptの部分を中括弧{ }で囲む。

import React from 'react';

class App extends React.Component {
  render() {  //JSXを定義
    // 定数を定義　①
	const name="にんじゃわんこ";
    const imgUrl="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/ninjawanko.png"
     return (
      <div>
        <h1>{name}</h1>　//②JS埋め込み
        <img src={imgUrl}/>
      </div>
    );
  }
}
export default App;

##イベント
アロー関数を使って、タグ内に　イベント名={() => { 処理 }}と書くことで、指定したタイミングで処理を実行できる

import React from 'react';

class App extends React.Component {
  render() {
    return (
    	<div>
			<h1>こんにちは、にんじゃわんこさん！</h1>
			<button onClick={()=>{console.log("ひつじ仙人")}}>ひつじ仙人</button>
			<button onClick={()=>{console.log("にんじゃわんこ")}}>にんじゃわんこ</button>
      </div>
    );
  }
}
export default App;

##state
ユーザーの動きに合わせて変わる値のことを、Reactではstateと呼ぶ。
stateを変えるには3つの段階を踏む

1. stateの定義
2. stateの表示
3. stateの変更

###stateの定義
stateは、constructorの中で、オブジェクトとして定義する。
ここで定義したオブジェクトがstateの初期値
その他の部分の、「constructor(props)」や「super(props);」といった処理はいつも同じ記述をするため、定型文として覚えておく

###stateの表示
定義したstateは、this.stateで取得する
stateはオブジェクトなので、console.log(this.state)をするとオブジェクトが出力される
this.state.プロパティ名とすることで、指定したstateのプロパティ名に対応する値を取得できる

###stateの変更
this.setState({プロパティ名: 変更する値})とすることで、指定されたプロパティに対応するstateの値が変更される

※注意
Reactでは、「stateの値に直接代入することで値を変更してはいけない」という決まりがある
値を変更したい場合は、setStateを使う

import React from 'react';

class App extends React.Component {
//stateの定義　
  constructor(props) {
    super(props);
    this.state = {name: 'にんじゃわんこ'};
  }
  
  render() {
    return (
    	<div>
    	  <h1>こんにちは、{this.state.name}さん！</h1>//stateの表示　this.stateで取得
    //stateの変更　this.setState({プロパティ名: 変更する値})で変更できる
        <button onClick={() => {this.setState({name:'ひつじ仙人'})}}>ひつじ仙人</button>
        <button onClick={() => {this.setState({name:'にんじゃわんこ'})}}>にんじゃわんこ</button>
         </div>
    );
  }
}

export default App;

以上

次の記事

https://qiita.com/kiyomasa05/items/c32e4f39ffb8a9b20673