#3 React.js でプログラミング・プラモデル Vol.2 「Border7」：Border7 コンポーネントをレンダーする

Codesandbox 上の Border7 プロジェクトを開く

今回から、いよいよ Codesandbox で Border7 の作成を始めます。
以下の URL をクリックしてください。
https://codesandbox.io/s/border-7-template-4hsxe

これが Border7 のsandbox です。
簡単に画面のセクションを説明します。

画面は大きく３つのセクションに分かれています。
・左側のセクションはエクスプローラーで、作成したフォルダやファイルなどが表示されています。
・中央のセクションはエディターで、プログラムはここに入力していきます。
・右側のセクションはプレビューで、プログラムによって表示される画面がリアルタイムで反映されます。

最初のタスク： Border7 コンポーネントをレンダーする

Codesandbox は「すぐ始められる」ことが売りなので、早速１つ目のタスクに取り掛かりましょう。
「src/App.js」を開くと、以下のようになっています。

import "./styles.css";
import { Box, Typography } from "@material-ui/core";

export default function App() {
 return (
   <Box className="App">
     <Typography variant="h1">
       <Box className={"h1-header"}>Border 7</Box>
     </Typography>
     <Typography variant="h2">
       <Box className={"h2-header"}>on Codesandbox</Box>
     </Typography>
     <Box id="table">{/* Border7 コンポーネントをインポートしてセットする */}</Box>
   </Box>
 );
}

ここでのタスクは１つだけ。
Border7.js をインポートして、画面下部のコメントアウトしている箇所に Border7 コンポーネントをセットしてください。
Border7.js をインポートする際はエクスプローラーを確認して、App.js からの相対パスで設定してください。

無事にレンダーできましたか？
とはいっても、まだ Border7 コンポーネントには何も実装していませんので、プレビューの内容は変わっていないと思います。
もしインポートの仕方など何かが間違っていたりすると、プレビュー画面にはエラーが出力されます。
エラーが起きたときは、急がず焦らず、エラー内容を読んで解決しましょう。

解答例

今回は最初のタスクということで、実装後のコードを以下に示します。
#4 以降では、出題編と回答編で分けていこうかな〜と考えています。

import "./styles.css";
import { Box, Typography } from "@material-ui/core";
import Border7 from "./Border7";

export default function App() {
 return (
   <Box className="App">
     <Typography variant="h1">
       <Box className={"h1-header"}>Border 7</Box>
     </Typography>
     <Typography variant="h2">
       <Box className={"h2-header"}>on Codesandbox</Box>
     </Typography>
     <Box id="table">
       <Border7 />
     </Box>
   </Box>
 );
}

次回

画面にトランプのカードを表示するために必要なデータ作りを行います！