• React

React Component の基本記述

Component名の頭を大文字に。renderのJSX表記をタグ<xxxx />にする

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

const ReactElemant = () => {
  return <h2>hoge</h2>;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<ReactElemant />, rootElement);

以下は通常の関数の場合の書き方。

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

const reactElemant = () => {
  return <h2>hoge</h2>;
};

const rootElement = document.getElementById("root");
ReactDOM.render(reactElemant(), rootElement);

引き数を与える場合

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

const ReactElemant = (props) => {
  console.log(props);
  return <h2>{props.name} {props.music}</h2>;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<ReactElemant name="aragaki" music="jazz" />, rootElement);

もっとスマートに書ける

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

const ReactElemant = ({ name, music }) => {
  return (
    <h2>
      {name} {music}
    </h2>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<ReactElemant name="aragaki" music="jazz" />, rootElement);