[React] Styleの設定方法

環境

MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

まとめ

• React内にJavaScriptのスタイル用の関数を埋め込む
• HTMLにJavaScriptコードを埋め込む際は{}を用いる

e.g.

export const App = () => {
  const onClickButton = () => alert();
  return (
    <>
+     <h1 style={{color: `red`}}>こんにちは!</h1>
      <p>お元気ですか？</p>
      <button onclick={onClickButton}>ボタン</button>
    </>
  );
};

フォルダ構成

folda_structure

├── public/
│   ├── index.html
└── src/
│   ├── index.js(index.jsx)
│   └── App.js(App.jsx)      

ソースコード

index.js

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.js

export const App = () => {
  const onClickButton = () => alert();
+ const contentStyleA ={
+   color: "red"
+ };
+ const contentStyleB ={
+   color: "blue"
+ };
  return (
    <>
+     <h1 style={contentStyleA}>こんにちは!</h1>
+     <p style={contentStyleB}>お元気ですか？</p>
      <button onclick={onClickButton}>ボタン</button>
    </>
  );
};

イメージ

参考リンク

• モダンJavaScriptの基礎から始める挫折しないためのReact入門