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
1つのファイルで1つしか使えない
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>
);
};