JavaScriptとHTML,CSSとReact実装の違い - Hashimoto-Noriaki/react-guide-training GitHub Wiki
JavaScript,HTML,CSSのみの実装とReactの実装では書き方が変わってきますし、 Reactの便利さがわかります。
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になるとこんな感じに変わります。
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/