皆さんこんにちは！フロントエンドエンジニアのdeve.kです!
前回の記事でReactについて触れたので今回は
その続きとして、これから始める人向けに覚えるべき
ポイントだけを私なりにまとめてみました！。
React.component種類
- Class component
- Functional component
これは最初のうちは難しく考えず、classで定義されてるコンポーネントと関数型のFunctionalコンポーネントって思っていればいいです。
StateとPropsの理解
State
- Stateとは(状態)管理する為のもの
- 値を後から変更できる
- コンポーネント内部で扱う変数を格納するのに利用
- コンポーネントからコンポーネントへは渡されません
- Stateが変更されたタイミングでコンポーネントの再描画を行う
Props
Class component
//Appという親コンポーネントとする
export default class App extends React.component {
constructor(props) {
super(props);
this.state = {
welcome: "ようこそ" //stateで管理
}
}
render() {
return(
<div>
<p>{ this.state.welcome }</p>
//波括弧で囲む
<Foo title="親から子へ値を渡します" />
//子の関数型componentへ渡す
</div>
)
}
}
ようこそ
Functional component
//関数型の子のコンポーネント
const Foo = (props) => {
//引数にpropsを渡す
const title = props.title
//変数を定義しpropsを代入
return(
<div>
<h1>{ title }</h1>
</div>
)
}親から子へ値を渡します
Reactの基礎文法
return内はdivタグでグループ化
const Foo = () => {
return(
<div>//グループ化
<h1>テスト<h1>
</div>
)
//悪い例
return(
<h1>テスト</h1>//グループ化してないのでエラーの原因に
)
}classはclassNameと書く
const Foo = (props) => {
const title = props.title
return(
<div className="styles">{ title }</div>
)
}HTMLの時とは違いclassNameと書きます
NameのNは大文字にしないといけません！。
終了タグのない要素は末尾に/で閉じる！！
const Foo = () => {
return(
<input type="text" id="num" />
//悪い例
<input type="text" id="num">
)
}inputタグのような終了タグがない場合は必ず末尾に/で閉じてあげないとエラーの原因になります
これはReact文法の決まりです
変数や関数などは{ }で埋め込む
const Foo = () => {
let foo = "Hello"
return(
<div>
<div>{ foo }</div>//必ず波括弧で埋め込む
</div>
)
}変数は全てキャメルケースで記述
const fooNumBer = "Hello, Welcome";
const Foo = () => {
return(
<div>
{ fooNumBer }//キャメルケース
</div>
)
}ライフサイクル
classコンポーネントを扱う際にライフサイクルは3つの期間があります。
↓時間の流れだと思ってください
Updating
componentが表示され、ユーザーの操作によってStateの更新を行う期間がUpdatingです。
例えばユーザーが何かしらのボタンをクリックし切り替わったりする時です。
↓
Unmounting
マウントの解除期間です。 componentの破棄になります、例えばタイマーやアニメーションの時はUnmountingで解除をしないと次のcomponentに影響がでてしまう。
↓繰り返し
後は実際に個人開発かなんかでバンバン書きながら覚えていけば大丈夫です。
