Reactかんぜんにりかいした

まじで雰囲気で書いてるのでこまかいところは無視してね

React完全に理解しようぜ。
まずReactってなに？

html js cssで作る画面のうち、htmlとjsの部分をいい感じにまとめてくれるフレームワーク。

jsで紙芝居の紙を変えていくイメージ。returnされるのがDOM。
こんなかんじっす。

Reactこんなかんじ.jsx

import React from 'react';

// まずクラスを作る
const TestCode: React.FC = () => {

    // クラス内部に変数とか定数を持てる。Javaと同じ
    const TEST = 'TEST';

    // 「htmlコード」をreturnする。
    return (
        <div>{TEST}</div>
    );
};
export default TestCode;

なんで、TestCodeってクラスを呼び出したら、<div>TEST</div>ってhtmlコードが出てくるわけだ。
こうやっていっぱいクラスを用意することで

index.html

<div className="root"><div>

ってやっといて、className="root"のとこにTestCodeの返却値をぶち込むことで

紙芝居の枠：index.html
紙芝居の紙1：TestCode1.tsx
紙芝居の紙2：TestCode2.tsx

みたいな感じでページを変更していける、って感じ。

で

こんなかんじで機能つくれる.jsx

import React from 'react';

// typescriptだとこう。クラス引数をここに定義しておけばPropsとして
// Sessionとかでなく、ページの遷移元から値を引き継げる。
// ページとページが、メソッドからメソッド呼ぶみたいになってるわけだ
type Props = {
    引数1: string,
    引数2: string
}

const TestCode: React.FC<Props> = ({引数1, 引数2}) => {

    // クラス内部に変数とか定数を持てる。Javaと同じ
    const TEST = 'TEST';

    // もちろん関数もね
    function testFunc = () => {
        console.log('ここでajaxとかもろもろすればいい');
    };

    // 「htmlコード」をreturnする。
    return (
        <button onClick={testFunc}>{TEST}</button>
    );
};
export default TestCode;

って感じ。これが最低限の骨組み。