Reactを始める

createRoot

Reactのバージョン18以降に導入されたcreateRoot

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

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

const App = () => {
  return (
    <>
      <h1>こんにちは!</h1>
      <p>今日はいい天気です。</p>
    </>
  );
};

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

ルール

コンポーネント名は大文字に

const App = () => {}

htmlに直接書くイベントはキャメルケースで

<button onClick={() => alert()}>ボタン</button>

JavaScriptは{}波かっこでくるみます。

{console.log('こんにちは')}

と書けます。

styleの付け方

JavaScriptでオブジェクトとして書き、styleは文字列””にします。

<h1 style={{ color: "red" }}>こんにちは!</h1>

数値は文字列にしなくてもOKです。

margin: 50

さらにfont-sizeのようにハイフンでつながずキャメルケースで書きます。

fontSize: "18px"