■はじめに 「render」から呼び出すと複数回呼び出されますが、画面読み込み後に「1回だけ呼び出したい」場合の書き方を紹介します。 APIでデータを取得したい場合や、DOMを書き換えたい場合には、ここで処理する方が良いと思います。 ■手順 ソースコードの全…

■はじめに 実際にシステムを作る際には、RestAPIの実行は必須と言って良いほど、使用します。 ここでは、「axios」を使用したRestAPIの実行方法を記載します。 ■手順 axiosをインストールするために、以下のコマンドを実行する npm i axios App.jsのソースコ…

■はじめに データの保持方法は色々とありますが、ここでは「ローカルストレージ」の使用方法を記載します。 ■手順 ボタン押下時に、データの取得、設定、削除を行うサンプルの全量（App.js） ※確認は、「F12」を押して、コンソールを開いて確認してください…

■はじめに ここでは、ボタン押下時のイベントの中で、色々と処理をしてから画面遷移をしたい！という要望に対する対応方法です。 ログインなどで使用すると思います。 ■手順 以下、App.jsのソースコードの全量です。 import React from 'react'; class App e…

■はじめに ソースコードで共通の値（APIのURLなど）を使用するのに定数クラスがあると非常に便利です。 仮にAPIのURLが変わってもその定数クラスを書き換えれば終わります。 ここで、定数クラスの書き方を記載します。（他にも方法はあると思いますので、一…

■はじめに react-router-domを使用したSPA（シングルページアプリケーション）の画面切り替え（遷移）方法を記載します。 以下のサイトを参考に環境構築、プロジェクト作成は済ませてからこちらの記事をご覧ください。 www.reigle.info ■手順 画面の構成とし…

■はじめに ログインする際など、ボタンを押下した時に、テキストフィールドの値を取得したい場合などは多々あります。 ここでは、その方法に関して、一例を記載します。 ■手順 まずは、App.jsのソースコードの全文を載せます。 以下をコピペすると動きは確認…

■はじめに 環境は以下の環境で書いています。 ・さくらVPS ・Apache ・SSL（Let's Encrypt） 環境構築や、Reactプロジェクトの作成は記載しませんので、それぞれで用意しておいてください。 ■手順 「cd」でReactのプロジェクトディレクトリをカレントディレ…

■はじめに Reactで作成したHTMLのボタンを押下した際の処理の方法を記載します。 ■手順 以下の記事を参考に、Reactのプロジェクトを作成してください。 reigle.info App.jsを以下のように書き換えてください。（丸々コピペで大丈夫です）. import React from…

■はじめに 最近話題のReactの環境構築方法をまとめました。Javaなど他の環境と違って、どハマりする事もないかと思いますが、一応残しておきます。 ■手順 以下のサイトを参考に、Node.jsをインストールしてください。 reigle.info 以下のコマンドを実行し、y…