Web Design Leaves

const [state, setState] = useState(initialState);

//React に加え useState をインポート
import React, { useState } from 'react';

import React, { useState } from 'react';

//関数コンポーネント
const App = () => {
  //useState を呼び出して state 変数を宣言して初期値を設定（初期化）
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count} 回クリックしました。</p>
      <button onClick={() => setCount(count + 1)}>
        クリック
      </button>
    </div>
  );
}

export default App;

const [state 変数, state を更新する関数] = useState(初期値);

const [count, setCount] = useState(0);

const countState = useState(0); //2つの要素を持つ配列が返る
const count = countState[0]; //1つ目の要素は state の現在の値
const setCount = countState[1]; // 2つ目の要素はそれを更新するための関数

//関数コンポーネント
const App = () => {
  //useState を呼び出して state 変数を宣言して初期値を設定（初期化）
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count} 回クリックしました。</p>
      <button onClick={() => setCount(count + 1)}>
        クリック
      </button>
    </div>
  );
}

// state を更新する関数
setXxxx(新しい state の値)

import React from 'react';
import ReactDOM from 'react-dom';
// CSS のインポート
import './index.css';

function MyComponent() {
  return (
    <div className="content">
      <p>The background color is white.</p>
    </div>
  );
}

ReactDOM.render(<MyComponent />, document.getElementById("root"));

.content {
  width: 100%;
  height: 100%;
  padding: 20px;
}

.bg-white {
  background-color: #fefefe;
  color: #666666;
}

.bg-black {
  background-color: #333333;
  color: #eeeeee;
}

// useState の名前付きインポートを追加
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function MyComponent() {
  // state 変数とそれを更新する関数を宣言し、state 変数の初期値を設定
  const [isDark, setDark] = useState(false);
  
  return (
    <div className="content">
      <p>The background color is white.</p>
    </div>
  );
}

ReactDOM.render(<MyComponent />, document.getElementById("root"));

function MyComponent() {
  const [isDark, setDark] = useState(false);
  // isDark の値により black または white の値を取る変数
  const bgColor = isDark ? "black" : "white";
  
  // className と 文字の一部に上記で設定した変数を指定
  return (
    <div className={`content bg-${bgColor}`}>
      <p>The background color is {bgColor}.</p>
    </div>
  );
}

// 初期値を true に変更すると
const [isDark, setDark] = useState(true);
// isDark は true になるので bgColor は "black" となる
const bgColor = isDark ? "black" : "white";

<button onClick={() => setDark(!isDark)}>
  Change to {isDark ? "white" : "black"}
</button>

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function MyComponent() {
  const [isDark, setDark] = useState(false);
  const bgColor = isDark ? "black" : "white";
  
  //ボタンを追加
  return (
    <div className={`content bg-${bgColor}`}>
      <p>The background color is {bgColor}.</p>
      <button onClick={() => setDark(!isDark)}>
        Change to {isDark ? "white" : "black"}
      </button>
    </div>
  );
}

ReactDOM.render(<MyComponent />, document.getElementById("root"));

function MyComponent() {
  const [isDark, setDark] = useState(false);
  const bgColor = isDark ? "black" : "white";
  
  //イベントハンドラを別途定義
  const handleClick = () => {
    setDark(!isDark);
  }
  
  return (
    <div className={`content bg-${bgColor}`}>
      <p>The background color is {bgColor}.</p>
      <button onClick={handleClick}>
        Change to {isDark ? "white" : "black"}
      </button>
    </div>
  );
}

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

//ボタンをコンポーネントとして抽出
function MyButton({OnBtnClick, isDark}) {
  //イベントハンドラには props 経由で受け取る MyComponent の関数 を設定
  return (
    <button onClick={OnBtnClick}>
      Change to {isDark ? "white" : "black"}
    </button>
  );
}

function MyComponent() {
  const [isDark, setDark] = useState(false);
  const bgColor = isDark ? "black" : "white";
  
  // MyButton に渡して state を更新する関数
  const handleOnClick = () => {
    setDark(!isDark);
  }
  
  //props.OnBtnClick で MyButton へイベントハンドラを渡す
  return (
    <div className={`content bg-${bgColor}`}>
      <p>The background color is {bgColor}</p>
      <MyButton OnBtnClick={handleOnClick} isDark={isDark}/>
    </div>
  );
}

ReactDOM.render(<MyComponent />, document.getElementById("root"));

function MyButton(props) {
  return (
    <button onClick={props.OnBtnClick}>
      Change to {props.isDark ? "white" : "black"}
    </button>
  );
}

import React from 'react';
import ReactDOM from 'react-dom';
 
class MyForm extends React.Component {
  // コンストラクタ
  constructor(props) {
    super(props);
    // state プロパティの初期化（state.value の初期値の設定）
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  // onChange イベントのハンドラ
  handleChange(event) {
    // ユーザがタイプする度に state を入力される値で更新 → value 属性も更新される
    this.setState({value: event.target.value});
  }

  // onSubmit イベントのハンドラ
  handleSubmit(event) {
    // 送信ボタンがクリックされたらその時点での state をコンソールに出力
    console.log(this.props.name + ': ' + this.state.value);
    //デフォルトの動作（フォームの送信）を抑止
    event.preventDefault();
  }

  render() {
    // value 属性の値に state.value を指定して state を関連付け
    // onChange イベントで value 属性の値を随時更新
    return (
      <form onSubmit={this.handleSubmit}>
      <label>
      {this.props.name}: 
        <input type="text" value={this.state.value} onChange={this.handleChange} />
      </label>
      <input type="submit" value="送信" />
      </form>
    );
  }
}

ReactDOM.render(
  <MyForm name="お名前"/>,
  document.getElementById('root')
);

import React, { useState} from 'react';
import ReactDOM from 'react-dom';

function MyForm(props) {
  //useState を呼び出して state 変数（val）を宣言して初期値を設定
  const [val, setVal] = useState('');
 
  // onChange イベントのハンドラ
  function handleChange(event) {
    // ユーザがタイプする度に setVal で state の値 val を入力値で更新 
    setVal(event.target.value);
  }
 
  // onSubmit イベントのハンドラ
  function handleSubmit(event) {
    // 送信ボタンがクリックされたらその時点での state の値 val をコンソールに出力
    console.log(props.name + ': ' + val);
    //デフォルトの動作（フォームの送信）を抑止
    event.preventDefault();
  }
 
  // value 属性の値に  state の val を指定して state を関連付け
  // onChange イベントで value 属性の値を随時更新
  return (
    <form onSubmit={handleSubmit}>
    <label>
    {props.name}: 
      <input type="text" value={val} onChange={handleChange} />
    </label>
    <input type="submit" value="送信" />
    </form>
  );
}
 
ReactDOM.render(
  <MyForm name="お名前"/>,
  document.getElementById('root')
);

const MyForm = props => {
  //useState を呼び出して state 変数（val）を宣言して初期値を設定
  const [val, setVal] = useState('');
  
  // onChange イベントのハンドラ（ユーザがタイプする度に setVal で state の値を入力値で更新）
  const handleChange = event => setVal(event.target.value);
  
  // onSubmit イベントのハンドラ
  const handleSubmit = event => {
    // 送信ボタンがクリックされたらその時点での state の値 val をコンソールに出力
    console.log(props.name + ': ' + val);
    //デフォルトの動作（フォームの送信）を抑止
    event.preventDefault();
  }
 
  // value 属性の値に  state の val を指定して state を関連付け
  // onChange イベントで value 属性の値を随時更新
  return (
    <form onSubmit={handleSubmit}>
    <label>
    {props.name}: 
      <input type="text" value={val} onChange={handleChange} />
    </label>
    <input type="submit" value="送信" />
    </form>
  );
}

function ExampleWithManyStates() {
  // 複数の state 変数を宣言（複数の useState を使う）
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  ・・・

function handleOrangeClick() {
  // useState() で指定した関数で個別に更新
  setFruit('orange');
}

import React, { useState} from 'react';
import ReactDOM from 'react-dom';

const MyCalculatorForm = props => {
  //複数の useState を使って変数と関数を宣言
  const [input1, setInput1] = useState(0);
  const [input2, setInput2] = useState(0);
  const [operator, setOperator] = useState('+');
  
  //それぞれを個別に更新
  const handleChange1 = event => {
    setInput1(event.target.value);
  }
  const handleChange2 = event => {
    setInput2(event.target.value);
  }
  const handleChangeOperator = event => {
    setOperator(event.target.value);
  }
  
  let result = 0;

  if(operator === '+') {
     result = parseFloat(input1) +  parseFloat(input2);
  }else{
    result =  parseFloat(input1) -  parseFloat(input2);
  }

  return (
    <div>
      <select name="operator" value={operator} onChange={handleChangeOperator}>
        <option value="+"> 加算 </option>
        <option value="-"> 減算 </option>
      </select>
      <br/>
      <input type="text" value={input1} onChange={handleChange1} size="10" />
      <input type="text" value={input2} onChange={handleChange2}  size="10" />
      <br/>
      result: <span> {result} </span>
    </div>
  );
}
 
ReactDOM.render(
  <MyCalculatorForm />,
  document.getElementById('root')
);

const MyCalculatorForm = props => {

  //input1 と input2 を1つのオブジェクトとしてまとめる
  const [input, setInput] = useState({
    input1: 0,
    input2: 0
  });
  
  const [operator, setOperator] = useState('+');
  
  //input1 と input2 をまとめて更新
  const handleChange = event => {
    //オブジェクトのスプレッド構文（...）と算出プロパティ [ ] を使用
    setInput({
      //既存のオブジェクトをコピー
      ...input,  
      //イベントの発生した項目（input1 または input2）
      [event.target.name]: event.target.value 
    });
  };
  
  const handleChangeOperator = event => {
    setOperator(event.target.value);
  }
  
  let result = 0;

  if(operator === '+') {
     result = parseFloat(input.input1) +  parseFloat(input.input2);
  }else{
    result =  parseFloat(input.input1) -  parseFloat(input.input2);
  }

  return (
    <div>
      <select name="operator" value={operator} onChange={handleChangeOperator}>
        <option value="+"> 加算 </option>
        <option value="-"> 減算 </option>
      </select>
      <br/>
      <input name="input1" type="text" value={input.input1} onChange={handleChange} size="10" />
      <input name="input2" type="text" value={input.input2} onChange={handleChange}  size="10" />
      <br/>
      result: <span> {result} </span>
    </div>
  );
}

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
 
const InputsList = () =>  {
  //input 要素に入力される値
  const [val, setVal] = useState('');
  //入力された内容のリストを空の配列 [] で初期化
  const [inputs, setInputs] = useState([]);
  
  // onChange イベントのハンドラ
  function handleChange(event) {
    // ユーザがタイプする度に setVal で state の値 val を入力値で更新 
    setVal(event.target.value);
  }

  const addInput = () => {
    //inputs を更新する関数を呼び出し
    setInputs([
      //既存の項目を新しい配列にコピー
      ...inputs,
      //新しい項目を末尾に挿入
      {
        id: inputs.length,
        value: val
      }
    ]);
    //入力フィールドをクリア
    setVal('');
  };

  return (
    <>
      <label>
      入力内容: 
        <input type="text" value={val} onChange={handleChange} />
      </label>
      <button onClick={addInput}>入力内容を追加</button>
      <ul>
        {inputs.map(input => (
          <li key={input.id}>{input.value}</li>
        ))}
      </ul>
    </>
  );
}
 
ReactDOM.render(
  <InputsList />,
  document.getElementById('root')
);

//React に加え useEffect をインポート
import React, { useEffect } from 'react';

useEffect(() => {
  // レンダリング後に実行したい処理（副作用）を記述
  // return クリーンアップ関数（オプション）
},[依存変数])

useEffect(function() {
  // レンダリング後に実行したい処理（副作用）を記述
  // return クリーンアップ関数（オプション）
},[依存変数])

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

function MyMessage() {

  //ここではレンダリングされる前なので、DOM 要素を取得できない
  const elem = document.getElementById('msg'); 
  console.log(elem); //null が出力される
 
  return <h1 id="msg">My Message </h1>
}

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

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

//クラスコンポーネント
class MyMessage extends React.Component {

  //コンポーネントがマウントされた直後に呼び出されるメソッド
  componentDidMount(){
    //DOM 挿入後に呼び出されるので DOM 要素を取得できる
    const elem = document.getElementById('msg');
    //以下は <h1 id="msg">My Message </h1> と出力
    console.log(elem); 
  }
  
  render() {
    return <h1 id="msg">My Message </h1>;
  }
  
}

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

//useEffect をインポート
import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

function MyMessage() {

  useEffect(() => {
    //useEffect を使うとレンダリング後に実行されるので DOM 要素を取得できる
    const elem = document.getElementById('msg');
    console.log(elem); //<h1 id="msg">My Message </h1> と出力
  });

  return <h1 id="msg">My Message </h1>;
  
}

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

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function MyComponent() {

  const [val, setVal] = useState('');
  // ここで setVal を呼び出して state の値を更新すると無限ループになる
  setVal('Foo');
  console.log(val);
  
  return <p>{val}</p>;
}

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

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

function MyComponent() {
  
  const [val, setVal] = useState('');
  
  //useEffect 
  useEffect(() => {
    setVal('Foo');
    console.log(val);
  });
  
  return <p>{val}</p>;
}

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

// 初回のレンダー
const MyCounter = () => {
  // ...
  useEffect(
    // 初回のレンダーの副作用関数
    () => {
      document.title = `${0}  回クリックしました。`;
    }
  );
  // ...
}

// クリックされると、コンポーネント関数が呼び出される
const MyCounter = () => {
  // ...
  useEffect(
    // 2回目のレンダーの副作用関数
    () => {
      document.title = `${1}  回クリックしました。`;
    }
  );
  // ...
}

// 再度クリック後、またコンポーネント関数が呼び出される
const MyCounter = () => {
  // ...
  useEffect(
    // 3回目のレンダーの副作用関数
    () => {
      document.title = `${2}  回クリックしました。`;
    }
  );
  // ..
}

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

class MyCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  
  //コンポーネントがマウントされた直後に呼び出されるメソッド（初回レンダー時）
  componentDidMount() {
    document.title = `${this.state.count} 回クリックしました。`;
  }
  
  //更新が行われた直後に呼び出されるメソッド（ボタンがクリックされて state が更新された時）
  componentDidUpdate() {
    document.title = `${this.state.count} 回クリックしました。`;
  }

  render() {
    return (
      <div>
        <p>{this.state.count}  回クリックしました。</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          クリック
        </button>
      </div>
    );
  }
}

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

import React from 'react';
import ReactDOM from 'react-dom';
 
//コンポーネントの外で Context オブジェクトを作成
const ColorContext = React.createContext();
 
const RootComponent = (props) => {
  //Provider コンポーネントで適用範囲を囲み value プロパティに渡したい値を設定
  return (
    <div>
      <h1>Root Component</h1>
      <ColorContext.Provider value={props.color}>
        <ComponentA />
      </ColorContext.Provider>
    </div>
  )
}
 
const ComponentA = (props) => {
  //props の受け渡しはない
  return (
    <div>
      <h3>Componet A</h3>
      <ComponentB />
    </div>
  )
}
 
const ComponentB = (props) => {
  //props の受け渡しはない
  return (
    <div>
      <h4>Componet B</h4>
      <ComponentC />
    </div>
  )
}
 
const ComponentC = (props) => {
  //Consumer コンポーネントで値を受け取る
  return (
    <ColorContext.Consumer>
      {(value) => (
        <div>
          <h5>Componet C | color : {value}</h5>
        </div>
      )}
    </ColorContext.Consumer>
  )
}
 
ReactDOM.render(
  <RootComponent color="green"/>,
  document.getElementById('root')
)

//useContext を react 本体から（名前付き）インポート
import React, { useContext } from 'react';
import ReactDOM from 'react-dom';
 
//コンポーネントの外で Context オブジェクトを作成（前の例と同じ）
const ColorContext = React.createContext();
 
const RootComponent = (props) => { //前の例と同じ
  //Provider コンポーネントで適用範囲を囲み value プロパティに渡したい値を設定
  return (
    <div>
      <h1>Root Component</h1>
      <ColorContext.Provider value={props.color}>
        <ComponentA />
      </ColorContext.Provider>
    </div>
  )
}
const ComponentA = (props) => { //前の例と同じ（省略）}
const ComponentB = (props) => { //前の例と同じ（省略）}

const ComponentC = (props) => {
  // useContext で値を受け取るだけ
  const value = useContext(ColorContext);
  return (
    <div>
      <h5>Componet C | color : {value}</h5>
    </div>
  )
}

ReactDOM.render(
  <RootComponent color="green"/>,
  document.getElementById('root')
)

const MyContext = React.createContext();

const App = (props) => { 
  //Provider コンポーネントで適用範囲を囲み value プロパティに渡したい値を設定
  return (
    <div>
      <MyContext.Provider value={props.xxxx}>
        <ComponentX />
      </MyContext.Provider>
    </div>
  )
}

const value = useContext(MyContext);

//適用範囲の任意のコンポーネント
const ComponentY = (props) => {
  // useContext で値を受け取るだけ
  const value = useContext(ColorContext);
  // コンテクストの現在値を参照
  return <div>{value}</div>;
}

//React に加え useReducer をインポート
import React, { useReducer } from 'react';

const [state, dispatch] = useReducer(reducer, initialState)

// reducer 関数（現在の state の値と action を引数に受け取る）
const reducer = (state, action) => {
  // action を設定しその値により state の更新方法を定義
}

// useReducer をインポート
import React, { useReducer } from 'react';
import ReactDOM from 'react-dom';

// reducer 関数の定義
// 現在の state を受け取り、任意の action を設定して state の更新方法を定義
function reducer(state, action) {
  // 設定した action の値によって新しい state の値を返す
  if(action === 'increment'){
    // action が increment を設定して、その場合の値を返す
    return state + 1;
  }else if(action === 'decrement'){
    return state - 1;
  }else {
    throw new Error();
  }
}

function Counter() {
  // useReducer をトップレベルの位置で宣言（フックの呼び出し）
  // 初期値は 0 を設定
  const [state, dispatch] = useReducer(reducer, 0);
  // dispatch の引数には reducer で設定した action を指定して state の値を更新
  return (
    <>
      Count: {state} <br />
      <button onClick={() => dispatch('decrement')}>-</button>
      <button onClick={() => dispatch('increment')}>+</button>
    </>
  );
}

ReactDOM.render(
  <Counter />,
  document.querySelector("#root")
);

//state の初期値の設定
const initialState = {count: 0};

// reducer 関数の定義
function reducer(state, action) {
  // action.type を設定して、その値により処理（新しい値を返す）
  switch (action.type) {
    // action.type が increment を設定
    case 'increment':
      // action.type が increment の場合は現在の値を1増加
      // 現在の count の値はは state.count で取得
      return {count: state.count + 1};
    case 'decrement':
      // action.type が decrement の場合は現在の値を1減少
      return {count: state.count - 1};
    default:
      // action.type が上記以外の場合はエラーをスロー
      throw new Error();
  }
}

function Counter() {
  // useReducer を宣言（initialState は先頭で設定）
  const [state, dispatch] = useReducer(reducer, initialState);
  // dispatch メソッドの引数 action をオブジェクトで設定
  return (
    <>
      Count: {state.count} <br />
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

const [state, dispatch] = useReducer(reducer, {count: 0});

const initialState = {count: 0};
 
// reducer 関数の定義
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    // reset の分岐を追加（action.type が reset を設定）
    case 'reset':
      // action.type が reset の場合は現在の値を0に
      return {count: 0};
    default:
      throw new Error();
  }
}
 
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  // reset ボタンを追加
  return (
    <>
      Count: {state.count} <br />
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'reset'})}>reset</button>
    </>
  );
}

const initialState = {count: 0};
 
// reducer 関数の定義
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      // action.payload を設定してその値を使って更新
      return {count: state.count + action.payload};
    case 'decrement':
      // action.payload を設定してその値を使って更新
      return {count: state.count - action.payload};
    case 'reset':
      return {count: 0};
    default:
      throw new Error();
  }
}
 
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  // dispatch に payload プロパティを指定して増減する値を10に
  return (
    <>
      Count: {state.count} <br />
      <button onClick={() => dispatch({type:'decrement',payload:10})}>-</button>
      <button onClick={() => dispatch({type:'increment',payload:10})}>+</button>
      <button onClick={() => dispatch({type:'reset'})}>reset</button>
    </>
  );
}

//props として増減する値（step）を受け取る
function Counter({step}) {
  const [state, dispatch] = useReducer(reducer, initialState);
  // payload プロパティに props の step を設定
  return (
    <>
      Count: {state.count} <br />
      <button onClick={() => dispatch({type:'decrement',payload:step})}>-</button>
      <button onClick={() => dispatch({type:'increment',payload:step})}>+</button>
      <button onClick={() => dispatch({type:'reset'})}>reset</button>
    </>
  );
}
 
//増減する値（step）を渡す
ReactDOM.render(
  <Counter step={5}/>,
  document.querySelector("#root")
);

//init 関数の定義
function init(initialCount) {
  return {count: initialCount};
}
 
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      //init 関数を使って更新（リセット）
      return init(action.payload);
    default:
      throw new Error();
  }
}
 
function Counter({initialCount}) {
  //フックの呼び出しで、第3引数に init 関数を渡す
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  // payload プロパティに props の initialCount を設定
  return (
    <>
      Count: {state.count} <br />
      <button onClick={() => dispatch({type:'decrement'})}>-</button>
      <button onClick={() => dispatch({type:'increment'})}>+</button>
      <button onClick={() => dispatch({type:'reset',payload:initialCount})}>reset</button>
    </>
  );
}
 
//初期値（initialCount）を props 経由で渡す
ReactDOM.render(
  <Counter initialCount={100} />,
  document.querySelector("#root")
);