• React

Reactでアロー関数をrenderする

Reactでアロー関数をrenderするパターンをいくつかメモ。こういうことの積み重ねが大事なのです。

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

const returnReactElement = () => {
  return <h2>text</h2>;
};

//省略
const returnReactElement2 = () => <h2>text2</h2>;

//引き数
const returnReactElement3 = value => <h2>{value}</h2>;

//引き数
const returnReactElement4 = (no, name) => {
  //const newString = no + '番目は' + name + 'さんです。'
  const newString = `${no}番目は${name}さんです。`;
  return <h2>{newString}</h2>;
};

const rootElement = document.getElementById("root");

ReactDOM.render(returnReactElement(), rootElement);
//出力 text

ReactDOM.render(returnReactElement2(), rootElement);
//出力 text2

ReactDOM.render(returnReactElement3('hello'), rootElement);
//出力 hello

ReactDOM.render(returnReactElement4("#1", "aragaki"), rootElement);
//出力 #1番目はaragakiさんです。

ちなみに

const newString = no + '番目は' + name + 'さんです。'

は

const newString = `${no}番目は${name}さんです。`;

というふうに書ける