【入門】React概要

はじめに

Reactを学ぶ機会があったので、個人的にまとめようと思います。
マサカリお待ちしております。

Reactとは？

・Reactとはユーザーインターフェースを構築する為の（UI）javascriptライブラリです。
・宣言的で効率的かつ柔軟性が優れている為「コンポーネント」と言われる孤立したコードから複雑なUIを作成できます。
・Facebook社が開発したライブラリ

コンポーネント

ReactはUIを「コンポーネント」という部品単位で構築する。
コードを含むことができてプログラムとして再利用できる

関数コンポーネント

状態を持たないコンポーネント

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

クラスコンポーネント

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Hooks導入前はクラスコンポーネントでは以下の物が使えた
・状態管理(State)
・ライフサイクルメソッド

現在ではHooksが導入されたことによりFunction ComponentでもuseState、useEffectなどを使って、Stateやライフサイクルに相当するものが使えるようになっている。

Hooksの概要

props

Propertiesの略でコンポーネントのプロパティ。
基本的に親コンポーネントから子コンポーネントに渡される値のことを指す

<child props={value}/>

親コンポーネントから子コンポーネントに値を渡すときは上記のような書き方をする。
このとき子コンポーネントでは、もらった値（value)をpropsという名前として扱うことが可能です。

具体的には下記のような書き方をします。 ※Todoアプリを例に書きます。

App.js

import React from 'react';
import Child from '../../components/Form.js'; //子コンポーネント

class App extends React.Component {　//親コンポーネント
  constructor(props) {  //初期値をセット
    super(props);　　//明示的に記述

　　 this.state = {　//stateの初期値をセット
      value: '',
      todos: [],
  }
}

handleChange = (e) => {
    this.setState ({ value : e.target.value })  //入力された文字
  }

handleSubmit = (e) => {
    e.preventDefault();
    if(this.state.value === '') return  //空文字の登録を不可にする
    this.state.todos.push(this.state.value)  //todosにvalueを追加
    this.setState({  //setState()内でstateの値を変更
      todos: this.state.todos,
      value: '',  //フォームに入力されている文字を空にする
    })
  }

  render(){
    return(
      <React.Fragment>
        <Form   //Formコンポーネント(子)に関数とstateを渡す
          handleChange={this.handleChange}
          handleSubmit={this.handleSubmit}
          value={this.state.value}
        />
      </React.Fragment>
    )
  }
}

export default App;

Form.js

import React from 'react';

const Form = props => {   //引数でAppコンポーネントからpropsを受け取る。
  return (
    <form onSubmit={props.handleSubmit}>
      <input
        type="text"
        onChange={props.handleChange}
        value={props.value}
      />
      <button type="submit">Add</button>
    </form>
  )
}

export default Form;

上記の例では、親コンポーネントから下記をもらっています。
・フォームに入力された文字
・登録ボタンを押した時の挙動
　- フォームをから文字にする
　- todoのvalue
　- 空文字登録不可
・value

<Form
    handleChange={this.handleChange}
    handleSubmit={this.handleSubmit}
    value={this.state.value}
  />

State

コンポーネントの状態
State自体はコンポーネントからコンポーネントへは渡されず各コンポーネント自体で管理

constructorで初期値を割り当てる

constructor(props) {
  super(props);//親のconstructorを呼び出し
  this.state={ //superによってthisが使えるようになる
    value: '',
    todos: [],
  };
}

子コンポーネントからもらった値を元にsetStateで値を変更します。

this.setState({  //setState()内でstateの値を変更
   todos: this.state.todos,
   value: '',  //フォームに入力されている文字を空にする
})

JSX

・JSXとは「JavaScript XML」の略で、XML風に作られたJavaScriptの拡張シンタックス（構文）です。
・見た目がHTMLやXML寄りなので可読性が高い

メリット

・トランスパイルという処理が施されjavascriptに変換される
・JSX、javascriptを用いた場合表示は同じ
・比べると最終的に表示させたい時に、JSXの方がHTMLと書き方が似ている為、直感的に表現できる

最後に

随時更新中です。