マガジンのカバー画像

React

5
本
運営しているクリエイター
Artefact
Artefact

Artefact

【React】＋【RailsAPI】 アプリ [4] ユーザー認証（devise/devise_token_auth/redux-token-auth）_後編

【React】＋【RailsAPI】 アプリ [4] ユーザー認証（devise/devise_token_auth/redux-token-auth）_後編

前回 に続き、フロントに React、バックエンドに Rails（APIモード）を使うアプリの、ユーザー認証周りについて書きたいと思います。

ユーザー管理や認証に devise、APIを利用するためのトークン認証に devise_token_auth、またそれを Redux で扱うための redux-token-auth を組み込みます。今回は redux-token-auth を用いてトークン

もっとみる
Artefact

Artefact

【React】＋【RailsAPI】 アプリ [3] ユーザー認証（devise/devise_token_auth/redux-token-auth）_前編

【React】＋【RailsAPI】 アプリ [3] ユーザー認証（devise/devise_token_auth/redux-token-auth）_前編

前回 に続き、フロントに React、バックエンドに Rails（APIモード）を使うアプリの、ユーザー認証周りについて書きたいと思います。

ユーザー管理や認証に devise、APIを利用するためのトークン認証に devise_token_auth、またそれを Redux で扱うための redux-token-auth を組み込みます。今回はモジュールの組み込み、設定と動作確認までを行います。

もっとみる
Artefact

Artefact

【React】＋【RailsAPI】 create-react-app を使ったアプリ [2] よく使いそうなモジュール

【React】＋【RailsAPI】 create-react-app を使ったアプリ [2] よく使いそうなモジュール

前回 に続き、フロントに React、バックエンドに Rails（APIモード）を使うアプリの、よく使いそうなモジュールの紹介です。

axiosブラウザおよび node.js 用の Promise ベースの HTTPクライアント。Get や Post などを Promise による非同期通信処理で使います。

$ yarn add axios

基本的に get/post などのメソッドの第一引

もっとみる
Artefact

Artefact

【React】JSの小さなTips

【React】JSの小さなTips

React を通して JavaScript に触れていた際、なるほど便利だなと思える構文などがあったので書いておこうと思います。

State を immutable に扱うReact では State を immutable に扱うため、常に新しいオブジェクトを返す必要がある。その方法として Object.assign()、オブジェクトのスプレッド構文の利用がある。

Object.assign

もっとみる
Artefact

Artefact

【React】＋【RailsAPI】 create-react-app を使ったアプリ [1] 環境構築

【React】＋【RailsAPI】 create-react-app を使ったアプリ [1] 環境構築

概要フロントに React、バックエンドに Rails（APIモード）を使うアプリの環境構築を行います。Rails プロジェクトを APIモードで作成し、その中に React プロジェクトを含んだ形の構成です。React プロジェクトは create-react-app を利用して作成します。

create-react-app

1つのコマンドを実行して最新のWebアプリを設定します。
Web

もっとみる