React初学者がTodoアプリの画面を作る

はじめに

プログラミングコーチングJISOUでReactとTypeScriptの学習に取り組んでいます

課題

エンジニアとしての学習時間は1000時間が必要と言われています。そこで日々の学習の内容と学習時間を記録するアプリを作ることにしました。

書いたコード

mvp1.js

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

const records = [
  { title: "勉強の記録1", time: 1 },
  { title: "勉強の記録2", time: 3 },
  { title: "勉強の記録3", time: 5 },
];

function App() {
  return (
    <div>
      <h1>学習記録一覧</h1>
      <ul>
        {records.map((record, index) => (
          <li key={index}>
            {record.title}：{record.time}時間
          </li>
        ))}
      </ul>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

画面のプレビュー

処理の説明

mvp1.js

import React from "react"; // ReactライブラリをインポートしてReactコンポーネントを作成する
import ReactDOM from "react-dom/client"; // ReactDOMライブラリをインポート。Reactコンポーネントをブラウザ上に描画するために使用

const records = [
  { title: "勉強の記録1", time: 1 },
  { title: "勉強の記録2", time: 3 },
  { title: "勉強の記録3", time: 5 },
]; // 学習記録のテストデータを定義

function App() { // Appという名前の関数コンポーネント。Reactコンポーネントの中心となる部分
  return (
    <div>
      <h1>学習記録一覧</h1> {/* 学習記録一覧のタイトルを表示するh1要素 */}
      <ul> {/* 学習記録のリストを表示するul要素 */}
        {records.map((record, index) => ( // records配列に対してmap関数を適用して、各要素に対して処理。アロー関数を使用して、各要素（record）とそのインデックス（index）を受け取る。Pythonで慣れているforループじゃないのでここが一番戸惑った
          <li key={index}> {/* 各学習記録をli要素として表示 */}
            {record.title}：{record.time}時間 {/* 各学習記録のタイトルと学習時間を表示 */}
          </li>
        ))}
      </ul>
    </div>
  ); // Appコンポーネントの描画内容を返す。JSX使用。
}

const root = ReactDOM.createRoot(document.getElementById("root")); // ReactDOM.createRoot関数を使用して、ルートを作成
root.render(<App />); // ルートに対してAppコンポーネントを描画

困ったこと

ローカルのReactの環境構築がめんどくさくて心が折れたので、codesandbox　で画面確認をした。node.js入れて終わり！みたいな感じかと思っていたら、意外とやることが多くて明日に回す。

感想1

Notionを使い始めて5年ぐらい経つのですが、Notionに慣れているとQiitaでマークダウンを自分で書かないといけないのが死ぬほど使いづらいのですが、みなさんは何かツールを使って書いているのでしょうか。色々覚えないで装飾する方法があったら教えてください。覚えるの嫌なのでいまのところ「###」 と 「```」　しか使っていません...（あ、この感想で「**」も使いました。こうやっているうちに勝手に覚えるのでしょうか。）

感想2

JISOUのコミュニティ(slack)が熱量が高くていいコミュニティだなと思います。詳しくは↓のリンクで見られます。