Reactを勉強してみようと思い立ち、セールで安くなっていたUdemyの講座を受けてきました。
復習のため学んだ内容をまとめて書いていきます。
受講した講座はこちら 個人的にすごくおすすめです！
Reactとは
UI作成のためのJavaScriptライブラリ
コンポーネントという部品を組み合わせることで画面を作る
複雑な画面でも作りやすい！人気！！
スマホアプリ（ReactNative）、デスクトップアプリ（React+Electron）も作れる！
コンポーネントとは
画面の要素をReactで定義したもの、部品
良い点
- 再利用性：つかいまわせる！
- 可読性：１コンポーネント１機能なのでコードを追いやすい すっきり
- 疎結合：結びつきが強くない、単体テストがしやすい
コンポーネントの定義方法
JSの関数として定義する、帰り値はJSX（HTMLみたいなやつ）、Babelの仕様で先頭を大文字にする必要がある
function Welcome () {
return <h1>HelloWorld!</h1>;
}
// アロー関数で書くと簡潔でよい
const Welcome = () => <h1>HelloWorld!</h1>;
// 呼ぶときは
<Welcome />
コンポーネントの分割方法
別ファイルに分割する際のインポート、エクスポート方法
エクスポート方法１「NamedExport」
export { Welcome };
export { Welcome, Hello }; // 複数出力できる
// インポートするとき
import { Welcome, Hello } from "./component/Welcome";
エクスポート方法２「DefaultExport」
export default Example; // 複数渡せない→１ファイル１エクスポートになる
//これをインポートするときは以下のように書く
import Welcome from "./component/Welcome";
// 以下の様に名前を変えることができる
import Hello from "./component/Welcome";
Fragmentとは
無駄な<div>を使わなくても要素をまとめられる
<React.Fragment>
<h3>Hello Component</h3>
<h1>Hello Fragment;</h1>
</React.Fragment>
<React.Fragment>は描画時に無かったことになる
</React.Fragment>→<>の様に省略もできる
JSX内でJSコードを実行する
JSの式は{}へ埋め込める
例えば以下の感じに
const test = "World";
return <h3>Hello {test} </h3>;
また、JSX記法も式として認識されるので以下の様にもかける
const jsx = <h1>JSX</h1>;
return <h3>Hello {jsx} </h3>;
式と文の違い
式：何らかの値を返す、変数に代入できる
文：変数の宣言、for文、if文など、セミコロン（；）で区切るもの
propsでコンポーネントに値を渡す
基本的にコンポーネントはpropsによってのみ出力結果を変えるようにする！
以下のようなコンポーネントを呼び出すとき
const Child = (props) => {
return (
<div className={`component ${props.color}`}>
<h3>Hello Component</h3>
</div>
);
// 呼ぶときは以下のような感じ
<Child color="red" />
ほかにも様々な値を渡せる 以下は分割代入を用いている
const Child = ({ color, num }) => {
return (
<div className={`component ${color}`}>
<h3>{`Hello Component ${num}`}</h3>
</div>
);
};
// 呼ぶときは以下のような感じ
<Child color="red" num={1} />
スプレッド演算子なんかもうまくつかえる
const o = {
color: "red",
num: 123,
};
<Child {...o} />
props.childrenとは
開始タグと終了タグの間、もしくは属性に定義する要素
コンポーネントを渡すことができる
開始タグと終了タグの間に記述した場合
<Container title="Childrenとは？">
<Profile {...profile[0]} />
<Profile {...profile[1]} />
</Container>
属性に定義した場合
<Container
title="Childrenとは？"
children={[<Profile {...profile[0]} />, <Profile {...profile[1]} />]}
/>
受け取る側
const Container = ({ title, children }) => {
return (
<div className="container">
<h3>{title}</h3>
{children}
</div>
);
};
propsの重要なルール
一方通行：親から子へわたすもの
読み取り専用：書き換えはエラーになる
JSXの正体
const elm = (<h1 className="fuga">Hello!</h1>);
バベルで↓のJSオブジェクトへ変換される
const elm = React.createElement("h1", {className:'fuga'}, "Hello!")
実行されると↓のReact要素になる
const elm = {
type:'h1',
props:{
className:'fuga',
children:'Hello!'
}
}
React要素をレンダーすることで画面に表示される
<div id="root"></div>
const elm = (<h1 className="fuga">Hello!</h1>);
const root = createRoot(document.getElementById("root"));
root.render(elm);