Reactした話

最近Reactの基礎を教えてもらいました
ReactはVueなどに比べて学習コストが高いと聞いていたのですが、やってみたら思ったより簡単でした(教え方が良かったのが大きいですが...)
今回はReactの基礎について書きたいと思います

今のJS界で勢いのある三勢力としてVue.js、Anguler.js、React.jsが挙げられます。
ただこの３つの中でもReactは異質でVue、Angulerがフレームワークなのに対し、Reactはライブラリであるのでフレームワークと違い型にハマった書き方ではなく純粋なJSに近くフレキシブルに書けるというメリットを持ちます
環境構築などは省いて書いていきたいと思います(実際教えてもらった時はcodesandboxで書きました)

・Hello World
index.jsに

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    <h2>Hello World</h2>
  )
}

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

まずライブラリーをimport
constで変更不可の変数Appを設定、returnで中身を返します
中にHTMLを記述します。この中にHTMLを記述する独特な記法をJSXと言います

・色変更とMsg
index.jsの他にcomponentというフォルダを作成します(名称は通例でこれにする)
componentフォルダにMsg.jsファイルを生成
Msg.js

import React from "react";

const Msg = () => {
  return (
    <>
      <p style={{ color: "blue" }}>React</p>
    </>
  );
};

export default Msg;

index.js

import React from "react";
import ReactDOM from "react-dom";

import Msg from "./components/Msg";

const App = () => {
  return (
    <>
      <h2>Hello World</h2>
      <Msg />
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

• Msg.jsより解説

importでライブラリ利用
constで変数定義
export default Msg;でMsg変数を別ファイルでも使えるように

• index.js解説

import Msg from "./components/Msg";でcomponentフォルダのMsg.jsを読み込み(Flaskでの別ファイルimportみたいな)
でMsgをDOMに

こんな感じなったら良き

・propsを使って色変更
現在DOMに直接styleから色を変更しているのがダサいため、propsを使って色を変更していきます
propsとは「親コンポーネントから渡されたプロパティ」のこと、要は親要素から渡されたpropsにより振る舞いが変わる
またもcomponentフォルダにCororfulMsg.jsファイルを作成
CororfulMsg.js

import React from "react";

const Msg = props => {
  return (
    <>
      <p style={{ color: props.color }}>{props.message}</p>
    </>
  );
};

export default Msg;

index.js

import React from "react";
import ReactDOM from "react-dom";

import ColorfulMsg from "./components/ColorfulMsg";

const App = () => {
  return (
    <>
      <h2>Hello World</h2>
      <ColorfulMsg color="blue" message="React" />
      <ColorfulMsg color="green" message="Vue" />
      <ColorfulMsg color="red" message="Angular" />
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

CororfulMsg.jsから解説すると
const Msg = props => {　 = props =>の部分でpropsを変数として代入している、=>アローの前に変数をおく

{props.message}

で変数propsをDOMに反映、基本{}でDOM内に変数を埋め込める(jinaja2みたいな感じ)
index.jsでは
import ColorfulMsg from "./components/ColorfulMsg";　で読み込んでる

・stateを使ったカウントボタン
stateとはpropsと同じで変数のように使ってDOMに変化をつけるもの
propsとは違いstateは「そのコンポーネントが持っている状態を変化させる」
index.jsで

import React from "react";
import ReactDOM from "react-dom";

import ColorfulMsg from "./components/ColorfulMsg";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick = () => {
    const newcount = this.state.count + 1;
    this.setState({ count: newcount });
  };

  render() {
    return (
      <>
        <h2>Hello World</h2>
        <ColorfulMsg color="blue" message="React" />
        <ColorfulMsg color="green" message="Vue" />
        <ColorfulMsg color="red" message="Angular" />
        <button onClick={this.handleClick}>{this.state.count}</button>
      </>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

{this.state.count}でカウントボタンの作成
{this.state.count}でstate変化させる

最終的にこんな感じになっていればOK