Reigle 技術ブログ

プログラミング、IT関連の記事中心

React

react-router-domで、ボタン押下時に画面遷移させる方法【React】

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

定数クラスの作り方と呼び出し方【React】

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

react-router-domを使用したSPAの画面切り替え(遷移)の方法【React】

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

ボタン押下時にテキストの値を取得する方法【React】

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

Reactのプロジェクトをサーバー(さくらVPS)にデプロイする方法【React】

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

ボタン押下時処理【React】

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

Reactの環境構築【React】

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