Reactを知る-その1
Reactで出てくる言葉
トラハックさんの動画や書籍と教材から知っておくべき部分のまとめ
*JavaScriptは長いのでjsと書く
Component(コンポーネント)
- UIの部品、またはそのUIを表現するパーツの単位 - パーツなので1コンポーネント = 1ファイル(再利用できる!) - ファイルを分けることで管理がしやすい - 一箇所変えれば使っているコンポーネント全てに反映される - コンポーネントを組み合わせてページを作る - 2つの記述方法がある (classと関数) - 頭文字は大文字で書く事 ○ <Welcome /> x <welcome />
以下2つの記述例です
- 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
データの受け渡し
親→子みたいに、異なるコンポーネントにデータを渡す時に使う。主に子コンポーネントで使う。
https://youtu.be/Q-df0QgZuhE
トラハックさん分かりやすい