参考教材
Reactに触れよう
コンポーネント
//関数で定義するコンポーネントを関数コンポーネントという
function Example () {
return <h1> Hello React </h1>
}
//アロー関数でも定義できる(好み)
const Example = () => {
return <h1> Hello React </h1>
};
//省略できる
const Example = () => <h1> Hello React </h1>
//アロー関数の()と{}の使い分けに注意する
const Example = () => {
//本文
};
const Example = () => (
//何か1つをグループ化するときの演算子
);
コンポーネントにスタイルを当てる
//相対pathで指定する場合./が必要
import "./Example.css";
const Example = () => {
return (
<div className="compornent">
<h3>Hello Component</h3>
</div>
);
};
コンポーネントの分割方法
Example.jsx
import "./Example.css";
import { List } from "./components/List.jsx";
const Example = () => {
return (
<div className="component">
<h3>Hello Component</h3>
<List />
</div>
);
};
export default Example;
component/List.jsx
//関数コンポーネントで定義
const List = () => {
return (
<ul>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
<li>item-4</li>
<li>item-6</li>
</ul>
)
};
//名前つきexport
export { List }
Fragmentの使い方
import React from "react";
const Child = () => {
return (
//余計なタグを出さなくて済む
<React.Fragment>
<div className="component">
<h3>Hello Component</h3>
</div>
</React.Fragment>
);
};
//Fragmentはkey属性だけつけられる
<React.Fragment key={}>
//これでもOK①
import "./Child.css";
import { Fragment } from "react";
const Child = () => {
return (
<Fragment>
<div className="component">
<h3>Hello Component</h3>
</div>
</Fragment>
);
};
//これでもOK②
import "./Child.css";
const Child = () => {
return (
<>
<div className="component">
<h3>Hello Component</h3>
</div>
</>
);
};
JSX内でJSコードを実行する方法
const Exp = () => {
const title = 'Exp';
//{}の中にJSのコードを埋め込める
return <h3>Hello {title}</h3>
}
components/Exp.js
import "./Exp.css";
const Exp = () => {
const title = 'Exp';
return (
//titleがtoLowerCaseで小文字になりcssが適用される
<div className={title.toLowerCase()}>
<h3>Hello {title}</h3>
</div>
)
}
components/Exp.css
.exp {
color: green;
border: 5px solid green;
}
const arry = ['item1', 'item', 'item3']
<h3>{arry}</h3>
配列の中身は結合される
const hello = (arg) => `${arg} Function`;
<h3>{hello('Hello')}</h3>
<h3>{/*表示されません */}</h3>
タグが空で出力される
{<h3>Hello JSX</h3>}
const jsx = <h3>Hello jsx</h3>
{jsx}
式と文の違い
式
何らかの値を返すもの(変数に代入できるもの)
→ JSX内で使用できる
値
変数宣言、for文、if文、swith文やセミコロンで区切るもの
→ JSX内で使用できない
propsでコンポーネントに値を渡す
外部から値を渡して、内部で使用できるようにし、コンポーネントの再利用をする
Example.jsx
import Child from "./components/Child";
const Example = () => {
return (
<>
<Child color='' />;
<Child color='red' />;
</>
)
}
components/Child.jsx
const Child = (props) => {
return (
<div className={`component ${props.color}`}>
<h3>Hello Component</h3>
</div>
);
};
//propsじゃなくてpでも問題ない
const Child = (p) => {
return (
<div className={`component ${p.color}`}>
<h3>Hello Component</h3>
</div>
);
};
分割代入
//分割代入で使用したいプロパティ名を指定する
//JSの機能
const Child = ({color}) => {
return (
<div className={`component ${color}`}>
<h3>Hello Component</h3>
</div>
);
};
分割代入のデフォルト値
components/Child.jsx
//分割代入でデフォルト値を設定
const Child = ({color='green'}) => {
return (
<div className={`component ${color}`}>
<h3>Hello Component</h3>
</div>
);
};
Example.jsx
const Example = () => {
return (
<>
//カラーを指定しないと、デフォルト値であるgreenになる
<Child />;
<Child color='red' />;
</>
)
}
//colorを違う名前'c'にしたい場合
const Child = ({color: c='green'}) => {
return (
<div className={`component ${c}`}>
<h3>Hello Component</h3>
</div>
);
};
基本的にコンポーネントは、propsの値によってのみ出力結果が変わるというルールがある
propsに色々な値を渡そう
数値
Example.jsx
const Example = () => {
return (
<>
{/* propsに数値を渡すこともできる */}
<Child num = {123}/>;
</>
)
}
components/Child.jsx
//分割代入でnumを取得する
const Child = ({color: c='green', num}) => {
return (
<div className={`component ${c}`}>
<h3>Hello Component</h3>
<h3>{num}</h3>
</div>
);
};
関数
Example.jsx
const Example = () => {
//関数も渡せる
const hello = (arg) => `Hello ${arg}`;
return (
<>
<Child
num = {123}
fn = {hello}
/>:
</>
)
}
components/Child.jsx
//定義した関数名はhelloだが'fn'で分割代入で受け取る
const Child = ({color: c='green', num, fn}) => {
return (
<div className={`component ${c}`}>
<h3>Hello Component</h3>
<h3>{num}</h3>
<h3>{fn('props')}</h3>
</div>
);
};
const Example = () => {
const hello = (arg) => `Hello ${arg}`;
return (
<>
<Child
num = {123}
fn = {hello}
//ブーリアンの値(真偽値)を渡す
bool
/>;
</>
)
}
const Child = ({color: c='green', num, fn, bool}) => {
return (
<div className={`component ${c}`}>
<h3>Hello Component</h3>
<h3>{num}</h3>
<h3>{fn('props')}</h3>
{/* 三項演算子 */}
<h3>{bool ? 'true':'false'}</h3>
</div>
);
};
オブジェクト
const Example = () => {
const hello = (arg) => `Hello ${arg}`;
return (
<>
<Child
num = {123}
fn = {hello}
bool
// 外側の{}がJSXでのJSコード用、内側の{}はオブジェクトリテラル用
obj = {{ name : 'rio', age : 26}}
/>;
</>
)
}
const Child = ({color: c='green', num, fn, bool, obj}) => {
return (
<div className={`component ${c}`}>
<h3>Hello Component</h3>
<h3>{num}</h3>
<h3>{fn('props')}</h3>
<h3>{bool ? 'true':'false'}</h3>
<h3>{ obj.name + obj.age}</h3>
</div>
);
};
・propsには全てのデータ型を渡すことができる
・他のコンポーネントをprops経由で渡すこともできる
//オブジェクトで値を持っておく場合
const o = {
color : 'red' ,
num : 123
}
return (
<>
<Child
//スプレッド演算子
{...o}
fn={hello}
bool
obj = {{ name : 'rio', age : 26}}
/>;
</>
)
}
propsの重要なルール
propsの流れは一方通行
propsは必ず親から子にしか渡せない
const Example = () => {
// POINT propsの流れは一方通行
const name = 'Tom';
return (
<>
<Hello name={name}/>
<Bye name={name}/>
</>
);
};
propsは読み取り専用
propsは読み取り専用のオブジェクト、プロパティは書き換えられない
JSXの正体
ReactによるJavaScriptの構文を拡張したもの
JSXはJSオブジェクトに変換される（React要素）