CATEGORY

React

React – Styled Componentsの使い方【CSS-in-JS】

Styled Componentsは、Reactのコンポーネントの内部でCSSを記述する方法(ライブラリー)です。JavaScriptでCSSを書きます(CSS-in-JS)。Reactのコンポーネント設計ととても相性がいいので採用する企業も多く、公式ホームページによれば、Google、GitHub、Spotify、tinder、airbnb、redditなどがStyled Components採 […]

Reactで複数のページを作る方法 – Router v6.0準拠

Reactは、SPA(Single Page Application)に最適化されていますが、Reactでも “React Router”ライブラリーを使うことで、下記のようなApp.jsの内部に複数のページ(path)を持つWebサイトを作ることができます。Routerは2021年の10月頃にver 6.0.0の正式版がリリースされ、それ以前のver 5とは大きく変わりま […]

React + Firebaseを使ったユーザー認証の実装方法

React又はNext.jsでFirebaseを使ったユーザー認証(Authentication)をするためには、UseEffectとonAuthStateChangedを使ってサインイン(ログイン)機能を実装し、Reduxを使いユーザーのログイン状況(State)を管理する方法が一般的ですが、コードは長く複雑になります。Firebaseとreact-firebase-hooksというカスタムフッ […]

Reactでのaxiosの使い方【外部APIの取得方法】

本稿ではaxiosというフロントエンドとAPI間の通信ライブラリーについてご紹介したいと思います。AxiosはReactのクラスコンポーネントでも動くのですが、この記事では、Reactの関数コンポーネント内でaxiosを使用する方法をご紹介しています。 さてaxiosですが、githubのaxiosのページでは、ブラウザとnode.jsのためのプロミスベースのHTTPクライアントとあります。 Pr […]

React入門 関数コンポーネントとは

今日はReactの関数コンポーネントについて解説いたします。初めてReactに触れる方でも読んで頂けるように、最低限のコードを引用しつつも概念的な話をメインにしております。 Reactはコンポーネントベース Reactの最大の特徴は、WebサイトあるいはWebアプリをコンポート(部品)に分けて作成できる点です。例えば下記の図のように、各コンポート1.2.3をそれぞれ別のJSファイルで作成した上、中 […]

ReactでWebサイト又はWebアプリを作成する方法(初動)

今日はJavaScriptのライブラリーとして人気の高いReactで、Webサイト・Webアプリを立ち上げるための初動について解説したいと思います。localhostにHello Worldと表示させることが目的です。 Reactのロードマップ 具体的な手順に入る前に、Reactの入門から中級辺りまでのロードマップをお示ししたいと思います。今日こちらの記事でご紹介するのは1のステップです。 npx […]

FirebaseでWebアプリをデプロイする方法

今日はGoogleが開発・運営するFirebase上で、Hostingという機能を使って、ReactのWebアプリ又はWebサイトをデプロイする方法をご紹介します。FirebaseはGoogle Cloud Platform(GCP)上で動く多機能なWebサーバ(大部分が無料)で、他にもリアルタイムデータベース(Could Firestore)、認証機能(Firebase Authenticati […]