OKADA LABO

React Component と import / export の基本記述

index.jsファイルに、同階層のhogeCompo.jsの中のReact Component を読み込んで使う

index.js

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

import { ReactComponent } from "./hogeCompo.js";

const rootElement = document.getElementById("root");
ReactDOM.render(<ReactComponent name="hoge" music="rock" />, rootElement);

hogeCompo.js

import React from "react";

export const ReactComponent = ({ name, music }) => {
  return (
    <div>
      {name} {music}
    </div>
  );
};

出力 hoge rock