React早見表

完全に自分用です

ReactDOMによるレンダリング

Hello, ReactをReactコンポーネントで描画するベーシックなサンプルコード

index.html

<div id="root"></div> 
<!-- コンポーネント表示場所の確保 -->

index.jsx

import { createRoot } from "react-dom/client"; //ReactDOM import
import React from "react"; //React import
import { App } from "./App.jsx"; //Appコンポーネント import

createRoot(
  document.getElementById("root")
  // idがrootのdiv要素を取得し、createRoot関数に渡す
).render(<App />); //Appコンポーネントのレンダリング

App.jsx

import React from "react";

export function App() {
  return <div>Hello, React!</div>;
}

---

JSX

JSXはJS内でHTML記法が使えるJSの拡張. (上記App.jsx参照)

いくつか注意点あり.

• inputやimgのような閉じタグがないタグも<img src="hoge.jpg"/>のようにスラッシュで閉じる
• 複数のタグ（要素）があるときは、全てを一つの親要素でまとめる。
• JSの変数を{}を使って埋め込める。
  • 例1：<h1>Hello, {name}</h1>
  • 例2：<a href={url}>リンク</a>
• 関数の戻り値がJSXで直接表示できる形であれば、関数をJSXで呼び出すこともできる。
  • 例：<h1>今は{getYear()}年です</h1>

---

コンポーネントのimport & export

named export & import

import React from "react";
import { createRoot } from "react-dom/client";
import { Card } from "./card.jsx"; //card.jsxからCardコンポーネントをimport

//JSXでは<コンポーネント名 />でコンポーネントを呼び出す
export default function App() {
  return <div className="container">
    <Card /> 
  </div>;
}

//レンダ
export const root = createRoot(document.getElementById("root"));
root.render(<App />);

export deafult & import

//export defalutでファイル内で一回だけ関数や変数、クラスを外部に公開できる
//今回は、function Card()がdefault exportされているとする

//export default→importのときは、{}を使わずに好きな名前でimport OK
import Card from "./card.jsx";
export default function App() {
  return <div className="container">
    <Card />
  </div>;
}

公開ライブラリのimport

• まずライブラリをインストールする必要あり。npmを使うことが多い
  • npm install ライブラリ名
• インストール後、import
  • import 変数名 from "ライブラリ名";
• ライブラリによってはnamed exportされているのでその場合は{}を使ってimport
  • import {名前1, 名前2,} from "ライブラリ名";

---

JSから直接CSSを読み込む

• JSではビルドツールを使っていればimportで書ける
  • 例：import "./style.css";
• 複数のコンポーネントが同じ CSS クラス名を使っている場合、衝突することに注意

---

Props

//コンポーネントに外からデータを渡すことができる. 
//titleやtextの部分をPropsという
<Card 
  title="タイトル"
  text="本文" 
/>;

//Propsを受け取る側
//方法１：1つのオブジェクトとして受け取る
function Card(props) {
  return (
    <div className="card">
      <h1 className="card-title">{props.title}</h1>
      <p className="card-text">{props.text}</p>
    </div>
  );
}

//Propsを受け取る側
//方法２：JSの分割代入を使ってPropsから必要なデータだけ取り出す
function Card({ title, text }) {
  return (
    <div className="card">
      <h1 className="card-title">{title}</h1>
      <p className="card-text">{text}></p>
    </div>
  );
}

//あらかじめデフォルト値を設定しておくこともできる. 
//titleが指定されずにCardコンポーネントが使われた場合、"タイトルなし"が表示される.
function Card({ title = "タイトルなし", text }) {
  return (
    <div className="card">
      <h1 className="card-title">{title}</h1>
      <p className="card-text">{text}></p>
    </div>
  );
}

children

コンポーネントのタグで挟んだ中身を受け取る特別なprops。
詳細：https://ja.react.dev/learn/passing-props-to-a-component#passing-jsx-as-children

// 使う側：タグで囲む
<Box>
  <p>こんにちは</p>   ←この部分がchildrenになる
</Box>

// 受け取る側：children として受け取って描画
function Box({ children }) {
  return <div>{children}</div>;
}

---

コンポーネントへのstyleの適用

// style属性に二重中括弧{{ }}を使って、JSのオブジェクトを渡す
// オブジェクト内では、プロパティ名と値を:で区切る
<div style={{ color: "white" }}>
  この文字が白くなる
</div>

このようなインラインstyleは基本的に避け、外部CSSが普通の書き方.
しかし、CSSの値を変数にして動的に表現したい場合などに使える.
いくつか注意.

• CSS プロパティ名がハイフンで区切られている場合は、camelCaseに変換する
  • 例：background-color → backgroundColor
• 値はすべて文字列で指定する
  • 例：10px → "10px"
  • 例：boxShadow: "0 6px 6px rgba(0, 0, 0, 0.2)"
  • ※単位が不要なopacity : 0.5 などはそのまま使える