Reactに初心者がReact本を読んでみた1冊目。

2021.03.15
IT
React

Reactやりたいけど、なんかよく分からないし手をつけがたいなーと思っていたら良い本に出会ったのでまとめます。

その良い本というのがこちら「React学習挫折経験者による挫折しないReact基礎学習 Kindle版」

Kindle Unlimitedなので無料です、ありがたやありがたや。

この本は、CDNを使うことで環境構築０でReactを始めることができます。

以下メモです。

1. Reactとは
2. 環境構築０ではじめるReact
3. ReactDOM.render()について
- 3.1. 描画する要素の数について
4. Reactのコンポーネントについて
5. ReactのPropsについて
6. JSXについて
- 6.1. JSXと変換について
7. 所感

Reactとは

画面を構築するための機能が提供されているJavaScriptのライブラリで、似たようなものにVue.jsやAngularがある。

環境構築０ではじめるReact

Reactは環境構築が大変かなと思っていたのですが、CDNを使う方法を学んだのでまずはメモします。

早速具体例から。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <title>React で要素描画</title>
    <!-- CDNでReactライブラリを読み込んでいく -->
    <!-- React本体 -->
    <script src="https://unpkg.com/react@17.0.1/umd/react.development.js"></script>

    <!-- React DOM -->
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js"></script>

    <!-- Babel -->
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        ReactDOM.render(
            <h1>Reactで要素を描画する</h1>,
            document.getElementById("root")
        );
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>React で要素描画</title>

</head>

<body>

ReactDOM.render(

<h1>Reactで要素を描画する</h1>,

document.getElementById("root")

);

</script>

</body>

</html>

上記のように、CDNで３つのライブラリを読み込むことで利用することができます。

    <!-- React本体 -->
    <script src="https://unpkg.com/react@17.0.1/umd/react.development.js"></script>
    <!-- React DOM -->
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js"></script>
    <!-- Babel -->
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

ReactDOM.render()について

ReactDOM.rendor([描画する要素], [描画する場所]);

となっている。

描画する要素の数について

常に１つの要素しかできない。これは結構大事らしい。

なので、複数要素を用いる場合は下記のように、ラッパーで囲ってあげる。

    <script type="text/babel">
        ReactDOM.render(
            <div>
                <div>Reactで要素を描画する</div>
                <div>Reactで要素を描画する</div>
            </div> ,
            document.getElementById("root")
        );
    </script>

ReactDOM.render(

<div>

<div>Reactで要素を描画する</div>

</div> ,

document.getElementById("root")

);

</script>

予想だと、1つの要素を見つけたら、次に要素の終わりを見つけてその中を処理する、みたいなことをやっているので、
もう1つの要素が並列で記述されているとエラーになるのではないかなと。

Reactのコンポーネントについて

コンポーネントとは部品のこと。

何の部品かというと、UI(画面）を構成する部品。

これらを組み合わせてUIを構築する。

Boxコンポーネントで遊んでみる

コンポーネントそのものは、前方でも後方でも読み込んでくれる。

ただし、コンポーネント名は大文字でないと読み込んでくれない。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <title>React で要素描画</title>
    <!-- CDNでReactライブラリを読み込んでいく -->
    <!-- React本体 -->
    <script src="https://unpkg.com/react@17.0.1/umd/react.development.js"></script>

    <!-- React DOM -->
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js"></script>

    <!-- Babel -->
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        ReactDOM.render(
            <Box/>,
            document.getElementById("root")
        );

        function Box() {
            return(
                <h1>React コンポーネント</h1>
            );
        };
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>React で要素描画</title>

</head>

<body>

ReactDOM.render(

<Box/>,

document.getElementById("root")

);

function Box() {

return(

<h1>React コンポーネント</h1>

);

};

</script>

</body>

</html>

コンポーネントを繰り返し表示する方法

１つの要素しか読み込んでくれないので、ラッパーで囲んであげる必要がある。

   <script type="text/babel">
        ReactDOM.render(
            <div id="wrapper">
                <Box/>
                <Box/>
                <Box/>
            </div>,
            document.getElementById("root")
        );

        function Box() {
            return(
                <h1>React コンポーネント</h1>
            );
        };
    </script>

ReactDOM.render(

<Box/>

</div>,

document.getElementById("root")

);

function Box() {

return(

<h1>React コンポーネント</h1>

);

};

</script>

ReactのPropsについて

Propsとは、コンポーネント間を受け渡しするデータのこと。（Propertiesの略）

具体例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <title>React で要素描画</title>
    <!-- CDNでReactライブラリを読み込んでいく -->
    <!-- React本体 -->
    <script src="https://unpkg.com/react@17.0.1/umd/react.development.js"></script>

    <!-- React DOM -->
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js"></script>

    <!-- Babel -->
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        ReactDOM.render(
            <div id="wrapper">
                <Box title='PROPS'/>
                <Box />
            </div>,
            document.getElementById("root")
        );

        function Box(props) {
            return(
                <h1>My name is {props.title}</h1>
            );
        };
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>React で要素描画</title>

</head>

<body>

ReactDOM.render(

<Box />

</div>,

document.getElementById("root")

);

function Box(props) {

return(

<h1>My name is {props.title}</h1>

);

};

</script>

</body>

</html>

で引数を設定して、

function Box(proos)の部分の内部、

{props.title}でtitle=の中身を受け取っている感じです。

複数の引数を渡す場合は下記のように、普通に引数を追加してあげるだけです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    
    <title>React で要素描画</title>
    <!-- CDNでReactライブラリを読み込んでいく -->
    <!-- React本体 -->
    <script src="https://unpkg.com/react@17.0.1/umd/react.development.js"></script>

    <!-- React DOM -->
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js"></script>

    <!-- Babel -->
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        ReactDOM.render(
            <div id="wrapper">
                <Box title='PROPS' color='skyblue'/>
                <Box color='red'/>
            </div>,
            document.getElementById("root")
        );

        function Box(props) {
            return(
                <h1 style={{background: props.color}}>My name is {props.title}</h1>
            );
        };
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>React で要素描画</title>

</head>

<body>

ReactDOM.render(

</div>,

document.getElementById("root")

);

function Box(props) {

return(

<h1 style={{background: props.color}}>My name is {props.title}</h1>

);

};

</script>

</body>

</html>

JSXについて

いままでJavaScriptなのにHTMLが含まれていたりしたが、それはJSXというJavaScriptの拡張を使っているから。

JSXと変換について

JSXはHTMLではないので、ブラウザで表示するときには変換する必要がある。

その変換するものが上記で用いてたBabelというもの。

<!-- Babel -->
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

1 2	<!-- Babel --> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

トランスコンパイラとも言うらしい。

所感

この本の内容は非常に充実しているかというとそうではないです。

初歩レベルだけを丁寧に説明している感じです。

でも私的には最初の一歩としては特有の記法が理解できて良かったです。

きっと著者がタイトル通り挫折経験者だからだと思います。

作者のdryttさんに感謝です。