React 画面遷移先に値を送る実装方法を解説

どうも。どっことです。今回は、Reactでの画面遷移に関する実装について備忘録を載せたいと思います。

画面遷移先にパラメータを送る

画面間で遷移に伴いパラメータやデータを遷移先に渡したいことは頻繁に発生すると思います。例えばコンテンツの一覧画面からコンテンツをクリックしたときには、どのコンテンツがタップされたかを次の画面に渡してあげる、などですね。複数の画面を持つシステムを実装する上で必要不可欠な処理になるので、ぜひ覚えておきたいところです。

必要な実装は以下の3点です。

• クリックした時の遷移処理(1)
• クリックした時の遷移処理(2)
• ルーティング

それぞれ見ていきましょう。

クリックした時の遷移処理(1)

今回は、クリックしたら /secondpage のページに遷移するようにします。

handleClick(){
  this.props.history.push('/secondpage')
}

クリックした時の遷移処理(2)

実際にリンクをクリックしたら、画面遷移させるメソッドをコールします。

<button onClick={() => this.handleClick()}>画面遷移</button>

ルーティングの実装

ルーティングを実装します。実際に書いたのは以下です。

<route exact={true} path='/secondpage' component={SecondPage} />

ルーティングの実装は上から順番に処理されているみたいなので、ルート/を一番下にしておかないと/secondpageに遷移しても、ルート"/"のページが表示されることに注意が必要です。

簡単ですが、以上です。

参考

• Reactで画面遷移先に値を送る

React 初心者のまとめを整理

どうも。どっことです。Reactの実装について調べてみたのでその備忘録を載せたいと思います。

Reactの基本ルール

パーツ設計

• パーツ=Componentを組み合わせて画面を構築する
• 値(state)をもとにDOMを生成
• JSXでHTMLを書く
• デザイン(CSS)は設計しない
• 参考ページでは、初期表示の実装を以下でやっている

ReactDOM.render(
  <MyComponent />,
  /* Reactが生成したコードを#mainに書き出す*/
  document.getElementById('main') 
);

上記は、以下でも実現できる。

export default App;

Reactの実装基本

• React.Componentを継承（extends）してコンポーネントといわれる「パーツ」を実装する
• extends React.Componentは決まり文句
• render()の返り値は１つのDOMしか設定できない

Stateを使う

• Stateは自身が管理する値の集まり
• ReactはStateによって表示を変化させることがメイン機能

Propsを使う

• 呼び出し元から attributeで値を渡してもらえる
• 値どころか、メソッドも渡してもらえる

JSXタグ

• HTMLタグとは違った概念。
• 多分JSXタグはReactで定義したクラスが使えるぽく見える
• JSXタグは頭文字を大文字にする必要あり
• JSXタグはattributeを使うことでpropsとして値を渡せる
• 値どころか関数も渡せる
• 関数を渡せるので部品コンポーネントから画面コンポーネントに処理を委任させることもできそう。
• クラス名はclassではなく、classNameで指定する。
• JSXタグのコンポーネント内に別のJSXタグのコンポーネントを記述すれば、親のコンポーネントからprops.childrenで子のコンポーネントを参照できる
• 属性でまとめて値を渡すことができる
• そのコンポーネントが何の値を使うかを明示できた方が良いから、まとめて渡すはよくないという所感

イベント

• クリックイベントは、アロー関数を省略すると画面表示時に処理内容を評価してしまう。
• ループ処理によるリスト表示
• key-valueで定義したitemsをmap関数でループさせ、1つずつアイテムを作り親コンポーネントに渡す。

return items.map((_item,_key) => {
    return(<li key={_key}>{_item.value}</li>)
})

CSSによるデザイン適用

• Reactにはデザインに関する機能はない。
• CSSinJSという考え方があり、デザインもJSに含めて考える形が主流になる可能性がある。
• ライブラリ読み込むのと、CSS読み込むのを別々に記述するのは面倒。
• １つで済めば楽だよね。
• styleオブジェクトを定義して、HTMLタグを記述するときにそのコンテナをstyleのattributeに渡すことで、レイアウトを管理しやすくできる。

Routeに値を持つコンポーネントを渡す

• componentではなくrenderを使うことで指定できる。
• 別ページへの遷移は以下の通り

<Link to="/">Home</Link>

パラメータを含むURLを制御する

• URLにパラメータを持たせたいときは以下のような設定する。

<Route component="{EditPage}/" path="/edit/:id"></Route>

• 上記を設定したらpropsに値が設定されるので、以下のように参照して利用する。

<p>ID:{props.match.params.id}</p>

参考

• React初心者のまとめ（基本編：1/3）
• React初心者のまとめ（基本編：2/3）
• React初心者のまとめ（基本編：3/3）

Webアプリケーションを作る

どうも。どっことです。Webアプリについての技術書を購入したので、実際に作りたいと思いました(小並感)。しかし、Webアプリについての開発環境について何も知らないのでちょっと調べてみました。今回はその備忘録となります。

React

購入した技術書には「Reactがはやる」と書いてあったので、使ってみたいなと思いました。SinglePageApplication（SPA）なるフレームワークが流行りになるらしいです。

Reactによる実装

• React初心者のまとめがQiitaに上がっていた
• Reactで画面遷移するなら、React-Routerを使うのが一般的ぽい。
• React初心者のまとめ（基本編：1/3）
• React初心者のまとめ（基本編：2/3）
• React初心者のまとめ（基本編：3/3）

参考

• AWSとGCPの一生無料枠を活用する
• わかる！Firebase ～全てのサービスをおつまみ紹介～

最初の投稿です

どうも。どっこと(dotcourt)です。最初の投稿です。