Reactを始める

JS
2024.04.25

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>
);

React17以前はこう書かれていました↓

import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));

ルール

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

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"

変数にすることもできます。

const contentStyle = {
     color: "red",
     fontSize: "18px",
     margin: 20
};

return (
<>
     <h3 style = {contentStyle}>こんにちは<h3>
</>
)

children

const MyBox = ({ children }) => {
  return <div style={{ border: '1px solid gray' }}>{children}</div>;
};

// 使用側
<MyBox>
  <p>これは中身です</p>
</MyBox>

default export とnamed export

named export(名前つきエクスポート)

export const ColorfulBox = () => {};

import { ColorfulBox } from “./components/ColorfullBox”;

型もエクスポートできます。

// userTypes.ts
export type User = {
  id: number;
  name: string;
  isAdmin: boolean;
};
// profile.ts
import type { User } from './userTypes';

const getUserName = (user: User) => {
  return user.name;
};

default export

１つのファイルで１つしか使えない

const ColorfulBox = () => {};
export default ColofulMessage;

import文の書き方が違って、波括弧で囲みません。

import ColorfulBox from “./components/ColorfullBox”;

また、default exportの場合はコンポート名を自由に設定することができます。

{}波かっこ

JSX（JavaScriptの拡張記法）の中で、JavaScriptの式を書くときに使うのが {} です。

式は式 = 値として評価されるもの のこと。よってJSXの中では「文（ステートメント）」は使えません。

よく使うパターン↓

パターン意味
{変数}変数の中身を表示
{式}計算や関数呼び出しの結果を表示
{条件 && 要素}条件が true のときだけ要素を表示
{条件 ? 要素1 : 要素2}三項演算子で要素を切り替え
{items.map(item => ...)}配列をループして表示

スプレッド構文

Reactは JSXの中で配列を見つけたとき、各要素を順に処理し、結果を結合して描画します。

  • Reactは「配列＝複数の子要素」として扱う
  • 数値や文字列の配列 → 各要素を自動的に文字列として描画し、カンマは入れない
const arr = [1, 2, 3];
return <div>{arr}</div>; // 出力: 123（カンマなし）

よって、下のように使われます。

const profile = [
  { name: "Sadako", age: 100, country: "Japan" },
  { name: "Jane", age: 28, country: "UK" },
  { name: "Joe", age: '99', country: "USA" },
];

const Example = () => {
  return (
    <div> 
      <Profile
        {...profile[0]}
      />
      <Profile {...profile[1]} />
      <Profile {...profile[2]}/>
    </div>
  );
};