[React] ちょっと勉強し始める。

Vueの勉強に飽きてきたので、React をちょっと勉強し始めようと。
とあるudemyの動画講座を購入したのでそれも参考にしつつ。

で、
とにかく、htmlとjavascriptが混ざっているのが気持ち悪いなぁ
と思った（笑）

ChatGPTに聞いたら、

私も最初は違和感がありました
私から一つアドバイスすると、今は「なぜこういう設計なのか」を完全に納得しようとしなくて大丈夫です。
まずはReactの流儀に沿って数本のアプリを作ってみてください。その後にVueやAngular、あるいはDjangoのテンプレートと比べると、「Reactがこういう設計を選んだ理由」がかなり実感できるようになります。

と、言われた。

講座の初歩の部分を、少し改造して書いた。

main.jsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

app.jsx

export const App = () => {
  const onClickButton = () => alert('ボタンを押した！');

  const contentStyle = {
    color: 'blue',
    fontSize: '18px',
  };

  const contentStyle2 = {
    color: 'green',
    fontSize: '22px',
  };

  return (
    <>
      <h1 style={{ color: 'red' }}>こんにちは</h1>
      <p style={contentStyle}>元気ですか</p>
      <p style={contentStyle2}>元気です！</p>
      <button onClick={onClickButton}>ボタン</button>
    </>
  );
};

画面。

stackblitzで書いた。

jsxって何？ってChatGPTに聞いたら。こんな回答。

・const、function、import、export、if、map などは JavaScript
・<div> や <App /> のようなHTMLっぽい部分が JSX