Reactの公式リファレンスを見てみる②

（前回の続きです）

その前にコールバック関数をもう少し理解する必要がありそうです。どこのホームページにも書いてますが、Reactでつまづくときは、JavaScriptの知識の無さでつまづきます。ただし、前の短いYoutube動画でも言っておられるように、React.jsで使われるJavaScriptの知識は限られています。

はじめはコールバック関数の引数は、戻り値のある関数の方がわかりやすいです。

Q.　４＋５×２を計算した値をコンソールに表示するプログラムをコールバック関数を利用してReact.jsで書いてみます。

CalcTest.js

function CalcTest(){
    const calcNumber = function(number){
        console.log(4 + number());
    }

    const numberOnTheWay = function(){
        return 5*2;
    }

    calcNumber(numberOnTheWay);


    return(
        <div>
            <div>{calcNumber}</div>
        </div>
    )
}

export default CalcTest;

発展編として以下も書けるようになればさらに何か見えてくるでしょう。

Q1.　同じように、４＋｛４＋（５×２）｝をJavaScriptで表示、計算してください。

⇒ネストが深くなるとわかりにくいことが体感できます。

Q2.　４＋max{20,x} をJavaScriptで表示、計算してください。

（max{x,y} というのは、x,yのうち大きいものを表示するという意味です）

さてでは配列に移ります。

古典的には

var array = [1,2,3] ; でよいです。

new演算子を使うなら

const array = new Array(3) ; ですね。

JavaScriptでの配列は追加や削除可能です。それをやっていきます。

次は高階関数のうち、map( )とfilter( )を取り上げます。

その次は、DOMについて勉強していく予定です。

eng-entrance.com

さらにその次は、クイックスタートのリファレンスで理解できなかったコンポーネント間での値の受け渡しについてです。

cpoint-lab.co.jp

そのほか、Reactで必要なものは下記のようなものです。

・非同期処理

(2) 非同期処理の完了を待つ方法！Promise＆async/await【分かりすぎて怖いJavaScript入門】 - YouTube

この分かりすぎて怖いJavaScript入門は分かりやすいのでお勧めです。

・分割代入

www.wakuwakubank.com

・三項演算子

qiita.com

別路線での準備が整いましたので挙げておきます。

index.js

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

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

Grid.js

import './grid.css';
import GridContent from'./GridContent';

function Grid(){
    return(
        <div className="container" id="container">
            <GridContent value="1"></GridContent>
            <GridContent value="2"></GridContent>
            <GridContent value="3"></GridContent>
            <GridContent value="4"></GridContent>
            <GridContent value="5"></GridContent>
            <GridContent value="6"></GridContent>
            <GridContent value="7"></GridContent>
            <GridContent value="8"></GridContent>
            <GridContent value="9"></GridContent>
        </div>
    )
}

export default Grid;

grid.css

@charset "utf-8";

.container{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    border:solid 1px #00FF00;
    border-width:2px 2px 2px 2px;
}

.container div{
    font-size: 40px;
    height:100px;
    border:solid 1px #FF0000;
    border-width:2px 2px 2px 2px;
}

GridContent.js

import './gridcontent.css';

const GridContent = function(props){
    return(
        <>
           <button>{props.value}</button>
        </>
    )
}

export default GridContent;

gridcontent.css

@charset "utf-8";

button{
    width:35em;
    height:10em;
}

Grid.jsは下記のように変更も可能です。JSX内のループ処理をreturn前で記載してます。

import './grid.css';
import GridContent from'./GridContent';

function Grid(){
    const list = [];
    const data = [1,2,3,4,5,6,7,8,9];
    for(let i=0;i<9;i++){
        list.push(<GridContent value={data[i]}></GridContent>)
    }
    return(
        <div className="container" id="container">
            {list}
        </div>
    )
}

export default Grid;

また、map( )を使うと下記のようにも記載できます。

import './grid.css';
import GridContent from'./GridContent';

function Grid(){

    const array = [1,2,3,4,5,6,7,8,9];

    return(
        <div className="container" id="container">
            {array.map*1}

        </div>
    )
}

export default Grid;

*1:number,index) =>(