reactやるよ

近況

少しおもしろい話を頂いたのでちょっと自分の成長のために足を突っ込んでみることにした。
まずはreactでモックアップを作ることにした。

なぜreact

なんとなく。動的モックを作ろうと思ったので触ったことのあるreactで作成することにした。

準備

ja.reactjs.org 久しぶりにこのサイトを見た。
とりあえず準備をしよう。
こいつを打つことでreactを始める準備をする。

npx create-react-app my-app

いじる

軽くいじってシンプルサイトを作成。

シンプルサイト

各ソースコードこんな感じ

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

import FitnessMainTop from './main';

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

下記でmain.jsからFitnessMainTopをimportする。

import FitnessMainTop from './main';

ReactDOM.renderで要素をDOMとして描画する。

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

import React from 'react';

const FitnessMainTop = () => {
    return(
        <div>
            <h1>シンプルサイト</h1>
        </div>
    );
}

export default FitnessMainTop;

コンポーネントを作成する。

const FitnessMainTop = () => {
    return(
        <div>
            <h1>シンプルサイト</h1>
        </div>
    );
}

export defaultでコンポーネントをimportできるようにする。

export default FitnessMainTop;

ヘッダーが作成できない

ヘッダーが作成できない。なぜだ。cssの問題なのかな。
とりあえず今日は夜遅いのでご飯食べて寝よう。

ヘッダー