JavaScriptとHTML,CSSとReact実装の違い - Hashimoto-Noriaki/react-guide-training GitHub Wiki

はじめに

JavaScript,HTML,CSSのみの実装とReactの実装では書き方が変わってきますし、 Reactの便利さがわかります。

JavaScriptとHTML,CSSの実装

TODOアプリを例にしていきます。今回CSSの実装は省略します。

   //省略
     export const App = () => {
  return (
    <>
      <div className="input">
        <input placeholder="入力" />
        <button>追加</button>
      </div>
      <div className="incomplete">
        <p className="title">未完了</p>
        <ul>
          <div className="list">
            <li>ポチ</li>
            <button>完了</button>
            <button>削除</button>
          </div>
        </ul>
      </div>
      <div className="complte">
        <p className="title">完了</p>
        <ul>
          <div className="list-row">
            <li>ちび</li>
            <button>戻す</button>
          </div>
        </ul>

// 省略

Reactの実装

Reactになるとこんな感じに変わります。

export const App = () => {
  const [incomplete, setIncomplete] = useState(["ポチ", "ピーコ"]);
  const [complete, setComplete] = useState(["ちび"]);
  return (
    <>
      <div className="input-area">
        <input placeholder="入力" />
        <button>追加</button>
      </div>
      <div className="incomplete-area">
        <p className="title">未完了</p>
        <ul>
          {incompleteTodo.map((todo) => {
            return (
              <div key={todo} className="list">
                <li>{todo}</li>
                <button>完了</button>
                <button>削除</button>
              </div>
            );
          })}
        </ul>
      </div>
      <div className="complte">
        <p className="title">完了</p>
        <ul>
          {completeTodo.map((todo) => {
            return (
              <div key={todo} className="list-row">
                <li>{todo}</li>
                <button>戻す</button>
              </div>
            );
          })}
        </ul>
      </div>

useStateやmapを使うと便利になります。 これはReact開発の一部です。

資料

https://www.udemy.com/course/modern_javascipt_react_beginner/

⚠️ **GitHub.com Fallback** ⚠️