目次
1. Reactの新規プロジェクトの立ち上げ
2. コンポーネントのプロパティ(props)とステート(state) ←今ここ
3. Class Components と Function Components
4. 条件分岐 (if) と繰り返し (loop)
5. フォームと親子間のデータのやり取り
6. コンポーネントのライフサイクル
7. スタイル (準備中)
8. Higher-Order Component (準備中)
9. Portalを利用したモーダル (準備中)
10. refによるエレメントの取得 (準備中)
11. Contextを利用したテーマの変更 (準備中)
今回の学習内容
今回は、
- コンポーネントの作成
- コンポーネント内で他のコンポーネントを利用する方法
- propsとstate
- コンポーネント内のクリックイベントで画面を変更する
をやっていきます。
この記事のソースコード
ソースコードはGitHubで公開しています。
本記事の内容は下記コミットになります。
YouTubeでの解説動画
YouTubeでも解説しています。
動画で確認したい方はこちらもどうぞ。
【YouTube動画】 未経験から1週間でをマスターするReact入門 #02. コンポーネントのプロパティ(props)とステート(state)
コンポーネントの作成
まずは新しいコンポーネントを作成していきます。
ただ div 要素が一つだけあるすごく簡単なコンポーネントを src/List.js に作ります。
export const List = () => {
return (
<div>リストです</div>
)
}
すごく簡単ですね。
Reactはとてもシンプルにコンポーネントを作成できます。
内容としては、 List という関数（変数）を定義してそれを export しているだけです。
コンポーネント内で他のコンポーネントを利用する
では、今作成したコンポーネントを App.js から呼び出してみましょう。
import { List } from "./List"; // 追加
function App() {
return (
<div>
ゼロから始めるReact入門
<List/> { /* 追加 */ }
</div>
);
}
export default App;
このように簡単にコンポーネントを利用できます。
Webページは下記のようになります。
とても簡単ですね。
コンポーネントにタイトルを渡す
今は単純に App.js から List.js を呼び出しただけでした。
次に、 App.js から List.js を呼び出すときにタイトルを渡してみましょう。
まず、 App.js を修正します。
import { List } from "./List";
function App() {
return (
<div>
ゼロから始めるReact入門
<List title="取り扱い言語一覧"/> // 変更
</div>
);
}
export default App;
List に title 属性でタイトルを渡すようにしました。
この時点ではまだ List.js 側にそれを受け取る処理がないのでWebページに変更はありません。
次に、 List.js を修正します。
export const List = ({ title }) => { // 変更
return (
<div>
<h4>{ title }</h4> // 追加
<div>リストです</div>
</div>
)
}
先程渡した title 属性を List.js が処理できるようにしました。
Reactのコンポーネントでは、関数の最初の引数がHTMLでいう属性値を受け取るようになります。
これを プロパティ と呼びます。よく props と表現されることが多いです。
function ComponentFunc(props) {}
このようにコンポーネントの最初の引数は props になっていて、それが Object の形で渡されるので、 ({ title }) として title 属性を取れたことになります。
JavaScriptに詳しくない人に説明すると、
const title = props.title;
と同じことをしたので title に値が入ったわけですね。
コミット
ここまでのコミットはこちらです。
プロパティとステート(propsとstate)
先程利用した props は親のコンポーネントから子供のコンポーネントを呼び出す時に使うものです。
親から渡されるもので、読み込み専用です。
先程の title のように利用します。
props とは別に、 Reactにはstate という概念があります。
これはコンポーネントの状態を表します。
state は props とは違って変更が可能です。
例えばコンポーネントは、状態によって表示を変更したいということがあります。
そのような場合に state を利用します。
stateを使ってみる
state を学習するために「ボタンを押すと画面表示が変わる」コンポーネントを作ってみます。
import { useState } from 'react'; // 追加
import { List } from "./List";
function App() {
const [description, setDescription] = useState('クリック前の表示'); // 追加
return (
<div>
{ description } { /* 変更 */ }
<List title="取り扱い言語一覧"/>
</div>
);
}
export default App;
Reactには useState という関数が用意されていてそれを利用することで state を定義できます。
今回は下記で description という state を定義しています。 useState は初期値を引数に持ち、
state と state を変更する関数を返り値で返します。
const [description, setDescription] = useState('クリック前の表示'); // 追加
この部分で description には 初期値として クリック前の表示 という文字列が入ります。
コンポーネント中にこの description を表示するようにしたので、画面は下記のように変わりました。
クリックして画面表示が変わるようにする。
今度は画面をクリックすると先程定義した state が変わるようにしてみます。
import { useState } from 'react';
import { List } from "./List";
function App() {
const [description, setDescription] = useState('クリック前の表示');
const changeDescription = () => { // 追加
setDescription('クリック後の表示です。')
}
return (
<div>
{ description }
<List title="取り扱い言語一覧"/>
<button onClick={changeDescription}>ボタン</button> // 追加
</div>
);
}
export default App;
changeDescription という関数を追加しました。
この関数は実行されると画面表示が変わります。
また、クリックされると changeDescription 関数を呼ぶボタンを追加しました。
onClick={changeDescription}
Reactでは、クリックイベントは上記のように定義します。 {} 内は関数への参照を定義できます。
上記は、下記でも同じものになります。
onClick={() => setDescription('クリック後の表示です') }
ボタンを押すと、Webページは下図のように表示されます。
ここまでのコミット
ここまでのコミットは下記です。
今日やったこと
今日やったことをまとめます。
コンポーネントの作り方
export const ComponentFunc = () => {
return <div></div>
}
親コンポーネントから子コンポーネントへのプロパティの渡し方
<List title="値">
子コンポーネントからプロパティの参照方法
const ComponentFunc = (props) => {}
stateによるコンポーネントの状態の変更
const [value, setValue] = useState('initial')
おわりに
今日はコンポーネントの作成とプロパティ、ステートについて学びました。
まだよくわからない部分がありそうと思ったら、再度記事を読み返していただけると嬉しいです。
次回は、 Reactの Function Components と Class Components の書き方についてお話していきます。
次の記事
React入門 未経験から1週間でReactをマスターする #03. Class ComponentsとFunction Componentsの書き方
https://qiita.com/yassun-youtube/items/2ed8601e4fa477726705