事始め

いやね、何回もreactを勉強しなきゃな！と思いつつも、実際に始めると、結局はhtml + css + vanila jsでやってることの管理を容易にするだけのもの、っていう感が否めなくてね。しかもフレームワークだからブラックボックス化されてい持ち悪いしね。 始めるはいいものの、途中で投げ出してしまうことがもう3回くらいあった。 正直、vanilaでもよくね？と思っている節はある。 htmlでid属性を使って名前を付けて、class名をつけることで、bootstrapを使えば一瞬できれいになる。しかしだ。やはりreactが使われているにはそれなりの理由があるのだろう。 ということで、まじめにやってみることにした。

ホワイトボックス化

ってことでね、結局中で何が実行されているかがわかればええやんってことなんだよね。 最終的にブラウザに届くのはhtml + css + jsであることには変わりない。 これはブラウザ側でhtmlを見ればわかる。 index.htmlが呼ばれているんだよね。 で、index.htmlからは、/static/bundle.jsが読み出されている。この/static/bundle.js が唯一のjavascriptファイルになっている。 reactプロジェクトの方では/src/いかにいろいろなコンポーネントを入れることになると思うんだけど、ビルド時にbundle.jsにまとめ上げられるってことなんだよね。それをまずは理解しよう。

開発　ー＞　ビルド　ー＞　一つのスタティックファイルができるって話。そうだそうだ。

/src以下の話

/srcいかにはいろいろなコンポーネントが入っているって話をしたけど、親玉がいるって話なんよ。それが、index.jsな。こいつがすべてのコンポーネントの生みの親ってこと。 親玉の中身を見てみよう。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

うん。document.getElementByIdでidがrootのやつを召喚している。index.htmlには確かにrootというidを持つタグがいる。 で、ReactDOMってやつにコピーしているのか？わからんが。で、root.renderで何かを作っているな。で呼び出しているぞ。。なるほど。ここに次々にコンポーネントを追加していく感じだな。なるほど。ちなみに、root.render()に渡すのが

import React from ‘react’; import ReactDOM from ‘react-dom/client’; import ‘./index.css’; import App from ‘./App’; import reportWebVitals from ‘./reportWebVitals’;

const root = ReactDOM.createRoot(document.getElementById(‘root’)); root.render( かみ );

後から来たやつが優先される仕様になっている。なるほどな。

で、大事な言葉だから覚えてほしいんだけど、jsxってのがreactで使うhtmlとjavascriptが混じった言語だ。これを使う。なるほど。で、React要素はHTMLと同じように使えると。なるほどなるほど。これについてはいいかな。 的な感じでね。 で、だ。さらに、jsxの中では変数も参照できるって話だ。{}を使ってな。これはいいぞ。

さらに、コンポーネントの名前は、パスカルケースでないとだめらしいです！！パスカルケースっていうのは、一文字目が大文字ってことね。お願いします。

なるほどなるほど。徐々にreactのよさにひかれている。

コンポーネントに引数を渡してコンポーネントの中で展開する方法。

const Text = (props) => {
    console.log(props)
    const { content } = props
    return (
        <p className="text">
            {content}
        </p>
    )
}

const Message = (props) => {
    const content1 = 'This is parent component'
    const content2 = 'Message uses Text component'
    const content3 = 'oreno boots ha garagara hebi'
    return (
        <div>
            <Text content={content1} />
            <Text content={content2} />
            <Text mycontent={content3} />
        </div>
    )
}

export default Message

これね、propsはオブジェクトなわけですね。 オブジェクトに渡すkeyとvalueはここで決められるんですよね。

<Text mycontent={content3} />

この部分ですね。{mycontent:content3}なわけですね。 で、

const { content } = props

この部分でcontentの中身を取り出しているわけですね。contentから。

<Text mycontent={content3} test={"test"}/>

とかでkey,valueを追加できたりするのよね。

コンポーネントのタグでほかのコンポーネントを囲むことができる。

そうすると、囲まれたコンポーネントは子コンポーネントではchildrenでアクセスできるようになるんですね。 つまり、うえのやつで、囲むと自動的にchildren={コンポーネント}を渡しているのと同じです。