基本は

// React （コンポーネントの作り方とか）

// JavaScript・jQuery （そもそものメソッドとか記述とか）

を見てくれれば作れると思う。

今回chatbot-appを作るにあたっては、最初はルートコンポーネントをクラスコンポーネントで作成する。が、関数コンポーネントでも良いのではないかと思っている。（動画ではライフサイクルとstateを使うのでクラスコンポーネントで作ると言っていたが・・・）

▼一応chatbot-appを例にコードを記載しておく

• ルートにはApp.jsxを使う（最初から用意されているものをそのまま使っているだけだと思われ。慣習的に、とかではないと思う。でもこの方がルートだって分かりやすいかもね。）

import React from "react";
import defaultDataset from "./dataset";
import { AnswersList, Chats } from "./components";
import './assets/styles/style.css'

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      answers: [],
      chats: [],
      currentId: "init",
      dataset: defaultDataset, //外部データベースと接続する場合は{}にしておこう
      open: false,
    };
  }

  render() {
    return (
      <section className="c-section">
        <div className="c-box">
					<Chats /> //後ほど作成予定
					<Answers /> //後ほど作成予定
        </div>
      </section>      
    )
  }
}

▼上記を関数コンポーネントに書き換えた場合

import React, {useState, useEffect, useCallback} from "react";
import defaultDataset from "./dataset";
import { AnswersList, Chats } from "./components";
import './assets/styles/style.css'

const App = () => {
  const [answers, setAnswers] = useState([]);
  const [chats, setChats] = useState([]);
  const [currentId, setCurrentId] = useState("init");
  const [dataset, setDataset] = useState(defaultDataset); //外部データベースと接続する場合は{}にしておこう
  const [open, setOpen] = useState(false);

  return (
    <section className="c-section">
      <div className="c-box">
				<Chats /> //後ほど作成予定
				<Answers /> //後ほど作成予定
      </div>
    </section>      
  )
}