deve.K

エンジニアが未来を切り開く。

English

React【基礎で絶対に欠かせないポイント】まとめ


スポンサーリンク

react画像

皆さんこんにちは!フロントエンドエンジニアのdeve.kです!

前回の記事でReactについて触れたので今回は
その続きとして、これから始める人向けに覚えるべき
ポイントだけを私なりにまとめてみました!。

React.component種類

  1. Class component
  2. Functional component

これは最初のうちは難しく考えず、classで定義されてるコンポーネントと関数型のFunctionalコンポーネントって思っていればいいです。

StateとPropsの理解

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>
  )
}

ライフサイクル

reactのライフサイクル画像

classコンポーネントを扱う際にライフサイクルは3つの期間があります。


Mounting時

レンダリングが起きて初回のcomponentが表示されるまでの期間がMounting時になります。

↓時間の流れだと思ってください


Updating

componentが表示され、ユーザーの操作によってStateの更新を行う期間がUpdatingです。
例えばユーザーが何かしらのボタンをクリックし切り替わったりする時です。


Unmounting

マウントの解除期間です。 componentの破棄になります、例えばタイマーやアニメーションの時はUnmountingで解除をしないと次のcomponentに影響がでてしまう。

↓繰り返し

後は実際に個人開発かなんかでバンバン書きながら覚えていけば大丈夫です。

プライバシーポリシー