Reigle 技術ブログ

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

React

React(TypeScript)プロジェクトの作成方法(Docker、ESLint、Prettier、WebPack)【4/4】

目次 事前準備 WebPack 完成 スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 事前準備 以下の記事の内容が完了している前提で本記事を記載しています。 まだの方は、以下から進めてください。 React(TypeScript)プロジェクトの作成…

React(TypeScript)プロジェクトの作成方法(Docker、ESLint、Prettier、WebPack)【3/4】

目次 事前準備 Prettier ESLintの設定修正 コマンドでPrettierの整形を行う VSCodeでPrettierを実行する Prettierのルール設定 Prettierの除外ファイル スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 事前準備 以下の記事の内容が…

React(TypeScript)プロジェクトの作成方法(Docker、ESLint、Prettier、WebPack)【2/4】

目次 事前準備 ESLintの組み込み ESLintの設定ファイルに任意の設定を行う コマンドでESLintのチェックを行う VSCodeでESLintのチェックを起動する スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 事前準備 以下の記事の内容が完了…

React(TypeScript)プロジェクトの作成方法(Docker、ESLint、Prettier、WebPack)【1/4】

目次 前提 Reactのプロジェクト作成環境の用意 Reactプロジェクトに「TypeScript」の設定をしてプロジェクト作成 Dockerの組み込み 「docker-compose up」でエラーが出た場合 スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 前提 N…

react-tabsでタブを作成する【React】

■はじめに ここでは、「react-tabs」というライブラリを使用してタブを作成します。 こちらの公式サイトに書かれているような物が作成できます。 ■手順 以下のコマンドで「react-tabs」をインストールしてください。 npm install react-tabs ソースコードの…

ReactをDockerで実行する方法【React/Docker】

■はじめに ReactとDockerの環境構築は完了している前提で記載します。 まだの方は、それぞれの環境構築を行ってからご覧ください。 ■手順 以下のコマンドを実行し、Reactプロジェクトを作成します。 create-react-app dockersample 以下のコマンドを実行し、…

ID指定でオブジェクトを取得する方法【React】

■はじめに 以前、「ボタン押下時にテキストの値を取得する方法【React】」でテキストの変更時処理で変数に値を保持して操作していました。 ここでは、オブジェクトを取得することで、必要な時に最新の値が取得できるようになります。 どちらが良いかは、好み…

環境毎に分けて定数を定義する方法【React】

■はじめに 前回の記事の「定数クラス」に環境毎に分けた定数を定義する方法を記載します。 APIの向き先などで使用することはあると思います。 ■手順 プロジェクトは「create-react-app」を使用して作成しておいてください。 ※そうすることで、環境を分ける定…

画面読み込み終了後に呼び出す処理【React】

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

axiosを使用してRestAPIを呼び出す方法【React】

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

ローカルストレージに値を保存する方法【React】

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

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…