React JSX記法とhookの基礎[No.2]

• JSXとは

• React要素を生成する

• コンポーネントを作る

• スタイルを指定する

• props

• useState hook

• useEffect hook

• key

• Input欄に入力された値を使う

• useContext hook

JSXとは

React要素を生成することができる
htmlとJavascriptを一緒に記述できる
{}の内部にJavaScriptを記述する

React要素を生成する

複数のタグを生成する場合は一番親のタグを<>(React.Fragment)にする

import ReactDom from "react-dom";//ReactDomを使う

//React要素を生成
const App = () => {
  return (
  <>
    <h1>Hello</h1>
    <p>React</p>
  </>
  );
};

ReactDom.render(<App />, document.getElementById("root"));

コンポーネントを作る

別ファイルからコンポーネントをエクスポートする
コンポーネントの名前は大文字から始まるキャメルケースにする
export default App;

import App from "./App";
<App />
それぞれに記載する

スタイルを指定する

jsx内では以下のように記載する

<h1 style={{color :'red'}}>Hello</h1>

オブジェクトを作って指定する

const pStyle ={
    color: 'green',
    border: 'solid',
    borderColor:'green'
  };

<p style={pStyle}>React</p>

props

コンポーネントの雛形を作るのに使う

引数にpropsを設定した親コンポーネントを作る
1ファイル1コンポーネントが基本
変数は{}で囲う

const Button = (props) => {
  const { children, color } = props;
  return <button className={color}>{children}</button>;
};

export default Button;

const Input = (props) => {
  const { placeholder } = props;
  return <input type="text" placeholder={placeholder} />;
};
export default Input;

子に親をインポートすると、タグとして親コンポーネントが使える

import Button from "./Button";
import Input from "./Input";

const InputInfoButton = () => {
  return (
    <>
    <div>
    <Input placeholder='名前'/>// Inputコンポーネント
    </div>
    <div>
    <Input placeholder='住所'/>// Inputコンポーネント
    </div>
    <Button color='red'>決定</Button>// Buttonコンポーネント
    </>
  );
};

Propsの応用
タグの中身はprops.children
オブジェクトの中身の変数がキーと一緒の場合は省略できる

const ColorfulMessage = (props) => {
  const{color, children} = props;
  const contentStyle = {
    color,// :colorを省略している
    fontSize: "18px"
  };
  return <p style={contentStyle}>{children}</p>;// 呼び出し元ではchildren=と書いてない
};

export default ColorfulMessage;

useState hook

ユーザーの操作を画面に反映させるのに使う
const [変数, 操作する関数名] = useState(初期値)
  onClickの中はcallback関数を書く()をつけない
引数を取りたい場合はアロー関数（無名）にする

import {useState} from 'react';//useStateをインポートして使う

const CountUpButton = () => {
  const onClickCountUp = ()=> {
    countUp(count + 1);
  }
  const [count, countUp] = useState(0);// ⇦これ

  return (
    <>
      <h2>カウンター{count}</h2>
      <button onClick={onClickCountUp}>＋１ボタン</button>
    </>

  );
};

メモ　
flagがtrueの時だけ処理を実行する
flag && 処理

flagがfalseの時だけ処理を実行する
flag || 処理

useEffect

再レンダリングされた時に実行される
useEffect関数内に処理を記載(アロー関数かcallback関数)
第二引数に連動する引数を配列で記載

import { useEffect } from "react";//　インポートする

useEffect(() => {
    hoge();
  },[hogehoge]);

key

map関数を使うときに必ず設定する

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

returnの中でmapを使うと{}の位置が変わるので注意

リストと key – React

Input欄に入力された値を使う

useStateで値を管理する

const Input = () => {
  const [sentece, setSentence] = useState("");//　入力欄の内容
  const [textMessage, setTextMessage] = useState('入力内容');// 書き換える内容

  const changeText = (e) => {
    setSentence(e.target.value);// ここに<input>の値が格納されている
  };

  const dispText = () => {
    setTextMessage(sentece);
  };
  return (
    <>
      <input placeholder="入力欄" value={sentece} onChange={changeText}></input>
      <button onClick={dispText}>確定</button>
      <h1>{textMessage}</h1>
    </>
  );
};

useContext　コンポーネントを跨いでuseStateを使用する

親コンポーネント

createContextをインポート
Contextをエクスポートする
Contextを操作するためのuseStateを用意する名前はvalue
使用範囲を<Context.Provider value={value}>で囲う

import MenuImage from './MenuImage';
import FooterTotal from './FooterTotal';
import { createContext, useState } from 'react';  //インポート

export const TotalContext = createContext()// Contextをエクスポートしている

function App() {
//---valueを初期化---
  const[total, setTotal] = useState(0);
  const value = {
    total,
    setTotal,
  }

  return (
    <>
      <Title>鴨緑江注文シミュレーター</Title>
      <TotalContext.Provider value={value}> //ここかkら
      <MenuImage name='カルビ' price='990'></MenuImage>
      <FooterTotal>合計金額は{value.total}円</FooterTotal>
      </TotalContext.Provider>// ここまで
    </>
  );
}

export default App;

子コンポーネント

useContext インポート
親のContextをインポート
valueにContextを代入
valueの値に関する処理を書く

import { useState, useContext } from "react"; //インポート
import "./CSS/menuImage.css";
import { TotalContext } from "./App"; //親からインポート

const MenuImage = (props) => {
    const {name,price,} = props;

    const value = useContext(TotalContext);

  const pulus = () => {
    setQuantity(quantity + 1);
    value.setTotal(Number(value.total) + Number(price)); //valueを操作
  };