Reactを知る-その１

React 初学者

Reactで出てくる言葉

トラハックさんの動画や書籍と教材から知っておくべき部分のまとめ
*JavaScriptは長いのでjsと書く

Component(コンポーネント)

- UIの部品、またはそのUIを表現するパーツの単位
- パーツなので1コンポーネント = 1ファイル(再利用できる!)
- ファイルを分けることで管理がしやすい
- 一箇所変えれば使っているコンポーネント全てに反映される
- コンポーネントを組み合わせてページを作る
- 2つの記述方法がある (classと関数)
- 頭文字は大文字で書く事
○ <Welcome /> 
x <welcome />

以下２つの記述例です

  • Class component(クラス コンポーネント)
    よく見るClassを定義するような形で定義していきます
import React, {Component} from 'react'
// ↑でReactのConponentというのを読み込む
class Welcome extends React.Component { 
// ↑ ReactのComponentを拡張してWelcomeというclassを作ります
  render() {
// ↑ renderメソッドの中に
    return <button> Hello, {this.props.name}</button>
// ↑ボタンタグの中のHello,{this.props.name}を返す(.jsxと呼ばれるファイル)
  }
}

/* ------
{this.props.name}
 classコンポーネントで props を使うときは this が必要
------*/
  • Functional Component(ファンクショナル コンポーネント)
    jsの関数の定義と同じような感じ
    React Hooksが出たことにより記述量が少ない
    基本的にこっちを使うのが多い
// ↓バージョン17以降は省略できる
// import React from 'react';

const Welcome = (props) => {
// 定数Welcomeというコンポーネントを宣言しpropsを渡す、アロー関数で
  return <button> Hello, {props.name}</button>;
// jsxを返す
}

jsx

JavaScriptの構文拡張。最終的にjsにコンパイルされる。ぱっと見はHTMLに見えて実はjs。ファイルの拡張子で.jsxをつける。

tsx

TypeScriptの記述ができるjsxファイル。拡張子は.tsxをつける。

親コンポーネント、子コンポーネント

例えば、、、

親 - App.jsxファイル
(子ファイルのデータを使いたい時はimport Hoge fromの記述してね)

子 - compoonents/Hoge.jsxファイル
(他のファイルで使う時は子ファイル内でexport default Hoge;の記述しないと使えないよ)

props

データの受け渡し
親→子みたいに、異なるコンポーネントにデータを渡す時に使う。主に子コンポーネントで使う。
f:id:michimo_10:20210830045945p:plain https://youtu.be/Q-df0QgZuhE トラハックさん分かりやすい