リストのレンダー

import ReactDOM from 'react-dom'
import React, { useState } from 'react'

export const App = () => {
  const [memos, setMemos] = useState([
    { title: 'Memo 1', content: 'This is the content of Memo 1.' },
    { title: 'Memo 2', content: 'This is the content of Memo 2.' },
    { title: 'Memo 3', content: 'This is the content of Memo 3.' }
  ])

  return (
    <div style={style.memoApp}>
      <h1>Memo App</h1>
      <button style={style.addButton}>+</button>
      <div style={style.memoContainer}>
        <MemoList memos={memos} />
        <AddMemoForm />
      </div>
    </div>
  )
}

const MemoList = ({ memos }) => {
  return (
    <div style={style.memoList}>
      {/* 問題1. メモ一覧を表示しよう */}
      {memos.map((memo, index) => (
        <div style={style.memoItem} key={index}>
          <h2>{memo.title}</h2>
          <p style={style.memoContent}>{memo.content}</p>
        </div>
      ))}
    </div>
  )
}

const AddMemoForm = () => {
  return (
    <form style={style.memoForm}>
      <input type="text" name="title" placeholder="Title" style={style.input} />
      <textarea
        name="content"
        placeholder="Content"
        style={{ ...style.input, ...style.textarea }}
      />
      <div>
        <button
          type="button"
          style={{ ...style.cancelButton, ...style.button }}
        >
          キャンセル
        </button>
        <button
          type="submit"
          style={{ ...style.submitButton, ...style.button }}
        >
          追加
        </button>
      </div>
    </form>
  )
}

const style = {
  memoApp: {
    display: 'flex',
    flexDirection: 'column',
    height: '100vh'
  },
  memoContainer: {
    display: 'flex',
    flexGrow: 1,
    marginTop: '20px'
  },
  memoList: {
    width: '200px',
    height: 'calc(100vh - 60px)',
    borderRight: '1px solid #ccc',
    overflowY: 'auto'
  },
  memoItem: {
    padding: '10px',
    cursor: 'pointer',
    borderBottom: '1px solid #ccc'
  },
  selectedMemoItem: {
    backgroundColor: '#eee'
  },
  memoContent: {
    marginTop: '5px',
    opacity: 0.6,
    fontSize: '14px',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  },
  memoDetail: {
    flexGrow: 1,
    padding: '20px'
  },
  memoForm: {
    width: '400px',
    height: '300px',
    borderRadius: '5px',
    padding: '20px',
    zIndex: 1
  },
  button: {
    padding: '10px 20px',
    color: 'white',
    border: 'none',
    borderRadius: '5px',
    fontSize: '16px',
    marginRight: '10px'
  },
  submitButton: {
    backgroundColor: '#2196f3'
  },
  cancelButton: {
    backgroundColor: 'gray'
  },
  deleteButton: {
    backgroundColor: 'red'
  },
  addButton: {
    fontSize: '24px',
    width: '40px'
  },
  input: {
    display: 'block',
    width: '100%',
    marginBottom: '20px',
    border: 'none',
    borderBottom: '1px solid gray',
    outline: 'none',
    fontSize: '16px',
    fontFamily: "'Roboto', sans-serif"
  },
  textarea: {
    resize: 'none',
    height: '120px'
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)


code-lesson

import ReactDOM from 'react-dom'
import React, { useState } from 'react'

export const App = () => {
  const [memos, setMemos] = useState([
    { title: 'Memo 1', content: 'This is the content of Memo 1.' },
    { title: 'Memo 2', content: 'This is the content of Memo 2.' },
    { title: 'Memo 3', content: 'This is the content of Memo 3.' }
  ])

  return (
    <div style={style.memoApp}>
      <h1>Memo App</h1>
      <button style={style.addButton}>+</button>
      <div style={style.memoContainer}>
        <MemoList memos={memos} />
        <AddMemoForm />
      </div>
    </div>
  )
}

const MemoList = ({ memos }) => {
  return (
    <div style={style.memoList}>
      {/* 問題1. メモ一覧を表示しよう */}
      <div style={style.memoItem}>
        <h2>タイトル</h2>
        <p style={style.memoContent}>内容</p>
      </div>
    </div>
  )
}

const AddMemoForm = () => {
  return (
    <form style={style.memoForm}>
      <input type="text" name="title" placeholder="Title" style={style.input} />
      <textarea
        name="content"
        placeholder="Content"
        style={{ ...style.input, ...style.textarea }}
      />
      <div>
        <button
          type="button"
          style={{ ...style.cancelButton, ...style.button }}
        >
          キャンセル
        </button>
        <button
          type="submit"
          style={{ ...style.submitButton, ...style.button }}
        >
          追加
        </button>
      </div>
    </form>
  )
}

const style = {
  memoApp: {
    display: 'flex',
    flexDirection: 'column',
    height: '100vh'
  },
  memoContainer: {
    display: 'flex',
    flexGrow: 1,
    marginTop: '20px'
  },
  memoList: {
    width: '200px',
    height: 'calc(100vh - 60px)',
    borderRight: '1px solid #ccc',
    overflowY: 'auto'
  },
  memoItem: {
    padding: '10px',
    cursor: 'pointer',
    borderBottom: '1px solid #ccc'
  },
  selectedMemoItem: {
    backgroundColor: '#eee'
  },
  memoContent: {
    marginTop: '5px',
    opacity: 0.6,
    fontSize: '14px',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  },
  memoDetail: {
    flexGrow: 1,
    padding: '20px'
  },
  memoForm: {
    width: '400px',
    height: '300px',
    borderRadius: '5px',
    padding: '20px',
    zIndex: 1
  },
  button: {
    padding: '10px 20px',
    color: 'white',
    border: 'none',
    borderRadius: '5px',
    fontSize: '16px',
    marginRight: '10px'
  },
  submitButton: {
    backgroundColor: '#2196f3'
  },
  cancelButton: {
    backgroundColor: 'gray'
  },
  deleteButton: {
    backgroundColor: 'red'
  },
  addButton: {
    fontSize: '24px',
    width: '40px'
  },
  input: {
    display: 'block',
    width: '100%',
    marginBottom: '20px',
    border: 'none',
    borderBottom: '1px solid gray',
    outline: 'none',
    fontSize: '16px',
    fontFamily: "'Roboto', sans-serif"
  },
  textarea: {
    resize: 'none',
    height: '120px'
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)


メモ一覧を表示しよう

完成形を操作してみよう

関数コンポーネント

見た目を作ろう

useState

props

メモ一覧を定義しよう

選択中のメモを表すstateを定義しよう

イベントハンドラ

選択中のメモのスタイルを切り替えよう

onChange

イベントハンドラを使って値を変化させよう

追加ボタンクリック時の処理を実装しよう

メモを追加しよう

キャンセルボタンクリック時の処理を実装しよう

useMemo

メモ詳細コンポーネントを実装しよう

追加フォームの表示・非表示を切り替えるstateを定義しよう

追加フォームの表示・非表示を切り替えよう

削除ボタンクリック時の処理を実装しよう

メモを削除しよう

メモ編集コンポーネントを実装しよう

メモを編集しよう

メモ編集フォームの表示・非表示を切り替えるstateを定義しよう

メモ編集フォームを表示しよう

メモ編集フォームを非表示にしよう

メモがない場合の表示を切り替えよう

Reactを使ったメモ帳アプリ