[B! React] Satoh_Dのブックマーク

React + Firestore【入門から実装まで】

本稿ではFirestoreの概要、NoSQLデータベースの構造、Firestoreの初期設定、Reactの初期設定、書き込み、react-firebase-hooks︵useCollection、useDocument︶を使った読み込み方法︵実装方法︶まで丁寧に解説しています。書き込みはweb Version 8での記法と、2021年8月に正式リリースされたより新しいweb Version 9での記法を両方解説しています。 FirestoreとはFirestoreとはFirebase︵Google Cloud Platformとほぼ同義︶内で利用できるのNoSQLのデータベースで、最大の特徴はReact等フロントエンドから直接DBを操作できる点です。バックエンドを記述する必要がなく、フロントエンド側でFirebaseライブラリーを使ってDBへの書き込み・読み込みが簡単にできます︵もちろんバ

Satoh_D 2022/05/27

リンク

【React】styled-componentsのcreateGlobalStyleでbodyタグにCSS設定（Reactとメタ言語の比較-4） - クモのようにコツコツと

Reactの続きです。前回はJSONデータをJSXに読み込んで表示しました。今回からはCSS編に入っていきます！メタ言語スターターキットのSass(SCSS)の設定をCSS in JSに組み込んでいきます。今回はstyled-componentsのcreateGlobalStyleでbodyタグにCSSを設定します。それではいきましょう！︻目次︼前回のおさらい Sass(SCSS)をCSS in SJ(styled-components)に移行する CSS(index.tsx)のリンクを切る bodyタグの隙間を無くしたい変数をJSONファイル化する styled-componentsと変数のJSONファイルをインポート createGlobalStyleでグローバルスタイルを設定グローバルスタイルをコンポーネントとして配置最後に ※参考‥前回記事︻React︼JSONデータを

Satoh_D 2022/05/27

React

リンク

JS×Reactにおけるpropsの型定義を担うPropTypes入門 - Qiita

今回はコンポーネントに渡す props の使用を補助するものである PropTypes について書きました。 ※2020/09/23追記この記事は Zenn に転載しました。以降の更新は Zenn の方で行っていきますので、最新状態はそちらでご確認ください。 ※2021/08/26追記　全体的に少し内容を見直しました。（こちらも微妙に伸びているので...） ※2022/01/24追記　あくまでライブラリの記事であるとわかりやすくするために、記事タイトルを変更しました（旧：React入門～PropTypes編～） PropTypesとは？公式： React で登場するコンポーネントは、 props という任意の値を受け取ることができるようになっています。受け取ったコンポーネント側でこの props の値を使い、レンダリング内容に変化をつけたり、ロジックを作ったり。一見、便利な

Satoh_D 2022/05/27

React

リンク

React: React Router v6 でルーティングする step１

2022年01月28日 Windows11での情報です。今回はReactでのルーティングについてです。ルーティングとはリクエストされたURLに応じて処理を振りわけることです。 Reactでルーティングを実装するには、React Routerライブラリを利用するのがスタンダードなようです。環境vite: v2.7.2 node: v16.13.2 react: v17.0.2 typescript: v4.4.4 react-router-dom: v6.2.1 React Router v6 React Router は現在の最新はv6です。 v5とは書き方が変わったようですので、検索する際はバージョンの確認が必要です。公式サイト React Router v6 をインストールまずはReact Routerをインストールします。 vscodeのターミナルで下記のコマンドを実行し

Satoh_D 2022/05/27

React

リンク

styled-components: API Reference

CSS for the <Component> AgeStyling your way with speed, strong typing, and flexibility. const Button = styled.a<{ $primary?: boolean; }>` --accent-color: white; /* This renders the buttons above... Edit me! */ background: transparent; border-radius: 3px; border: 1px solid var(--accent-color); color: var(--accent-color); display: inline-block; margin: 0.5rem 1rem; padding: 0.5rem 0; transition: all

Satoh_D 2022/05/27

リンク

こんなに簡単なの？React Hook useContextでデータ共有 | アールエフェクト

ReactのuseContextはコンポーネント間でデータ(状態)の共有とデータ(状態)の受け渡しに関するHookです。useStateやuseReducerと組み合わせて利用することができます。まず本書では最も基本的なuseContextの使用方法について説明を行いその後にuseStateとuseReducerを使った利用方法を別々に説明します。その後コンポーネントのRe-renderについても動作確認を行い、本文書を読み終えるとuseContextがどのようなものかを理解することができます。 React18で動作確認を行なっています。 useContextとは通常親コンポーネントから子コンポーネントにデータを渡す際はpropsを介して行います。しかし親から子、そのまた子といったように複数のコンポーネントを介してデータを渡す場合にprops(prop-drilling)では設定が複雑

Satoh_D 2022/05/27

React

リンク

Firebase + React で Todoist のクローンを作る

Firebase と React の勉強を兼ねて、愛用しているタスク管理アプリ Todoist のサブセットとなる機能を持つクローンを作ってみた。途中で色々試行錯誤したのだが、「最初から最短の手順で作るならこういう手順になる」というのを備忘と Firebase の紹介も兼ねてまとめてみようと思う。アプリケーション: https://altech-todoist.web.app/ ソースコード： https://github.com/Altech/todoist-clone 0. はじめに技術スタック言語： TypeScript UIライブラリ： React 17 バックエンド：Firebase (Authentication + Cloud Firestore + Hosting) Firebase SDK: v9 モジュールバンドラー： Snowpack CSS：styled-co

Satoh_D 2022/05/27

React

リンク

FirebaseとReactで認証実装 - Qiita

FirebaseとReactを使って認証機能実装プログラミング初心者が認証機能を実装したので備忘録として残しておきます。使ったもの react-router Firebase Authentication Hooks Firebaseの設定まずFirebaseでプロジェクトを作成し、Authenticationを有効化します。今回は"メール/パスワード"を使いました。そして、プロジェクトのSettingsから自分のappsのFirebase SDK snippetのConfigをコピーします。以下のような形で取得できると思います。 const firebaseConfig = { apiKey: "your_key", authDomain: "your_app_id.firebaseapp.com", databaseURL: "https://your_app_id.fir

Satoh_D 2022/05/27

React

リンク

React Contextの使い方 - Qiita

概要社内勉強会の資料。 ReactのContextの考え方と、使い方について。ちなみにここでは、有用性を伝えるというよりは実際の使い方を感じとってもらうというのがメインの目的です。通常の使い方に加えて、Hooksでの使い方も合わせて記載します。 React.createContextとReact.useContextって何が違うの？って思ったら、対象読者です。 React Contextって？ Reactでは、基本的にコンポーネントがコンポーネント外から動的に値を受け取る方法はpropsのみです。 Reduxを使用する場合でも、react-reduxなどによってStoreの値をprops経由でコンポーネントに渡しますね。 Contextは、propsとは別の方法でコンポーネントに動的に値を渡す、React純正のAPIです。 Contextの存在意義 Contextは、propsのバケ

Satoh_D 2022/05/27

React

リンク

新：React + FirestoreでCRUD（基礎編） - Qiita

別途CRUDの記事を書いたら﹁複雑すぎる﹂ということなので簡単バージョンを書きます。 radio, checkbox, file等、各種Form要素のコントロールを知りたい人は、複雑？バージョンをご覧下さい。仕様下記のような感じ。 CRUDとはいえ、React︵SAP︶なので、詳細表示、編集、削除は1つのページで実装します。準備 create-react-app create-react-appでプロジェクトを作成します。

Satoh_D 2022/05/27

React

リンク

出来る限り短く説明する React + Tailwind CSS 入門（忙しい人向け）

VTeacher 所属の Satomi です。 ※各項目をできるだけ3行以内にまとめています。（出来る限り短く説明するReactJS入門に合わせて書いています）昨年（2021年）くらいから Tailwind CSS の話題が増え出し、最近はReactと一緒に使われる場面が増えてきたと思います（私も昨年から使い始めました）。 Vercel Next.js as the React framework / NextAuth.js for authentication Vercel for deployment PlanetScale as the database (MySQL) Prisma as the ORM for database access Tailwind for CSS styling 👈 本投稿は、React + Tailwind CSS の基礎知識をさらっと確認で

Satoh_D 2022/05/27

リンク

SPA Componentの推しディレクトリ構成について語る

こんにちは、よしこです。この記事は 2020年に立ち上げたWebフロントエンド構成の振り返りの「Componentのディレクトリ構成」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！この記事では、今わたしが株式会社ナレッジワークというスタートアップで開発・運用しているプロジェクトにおいてうまくいっていると感じているComponentのディレクトリ構成についてご紹介していきます。ディレクトリ構成 Componentは src/components の中にまとめていて、その下に以下の4種類の分類ディレクトリを切っています。 src/components/page src/components/model src/components/ui src/components/functional 分類ディレクトリを考えるにあたって重視したポイントは以下。新しくco

Satoh_D 2022/05/27

React

リンク

大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita

数日前︵4/21頃︶に Next.js のチュートリアルが一新されました。 Next.js は3月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。参考︵開発チームの @chibicode さんのツイッター︶ Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました! 🎓英語ですが初心者向けです!⚛️最近導入されたgetStaticProps等の関数や、 🎨CSS Modulesの解説をしています! 🗣ブログを作りながら学びます 🤗ご感想お待ちしております!https://t.co/R4j9vpAQoc — S

Satoh_D 2020/04/25

js
React

リンク

React基礎 · GitBook

React基礎レッスン Lesson 01: 環境構築 Lesson 02: ES2015について Lesson 03: 関数型の書き方 Lesson 04: 初めてのコンポーネント Lesson 05: 初めてのinline style Lesson 06: 初めてのprops Lesson 07: 配列からの展開 Lesson 08: フォームの定義 Lesson 09: フォームによるデータ追加 Lesson 10: 総合課題「目的特化型電卓を作ってみよう」おまけ Appendix 01: 様々なコンポーネントの書き方 Appendix 02: コンポーネントのstate Appendix 03: コンポーネントのライフサイクルメソッド Appendix 04: JSX vs. createElement Appendix 05: PropTypes Appendix 06: p

Satoh_D 2017/02/13

リンク

React.jsとCSS3で長女のためにWEB絵本を作った話 - Qiita

まずはこちらの動画をご覧ください。こちらは娘が2歳半の頃に児童館で撮影したものです。かわいい・・・生後1000日近くともなると、子どもは自分で絵本を読むようになります。並行してひらがな覚え始めるので、親としてはガンガン絵本を読んでほしいのですが、実際には挿絵に合わせて適当な話を創をして遊んだり、まじめにひらがなを音読し始めたかと思えば数ページも読まないうちに次の絵本を引っ張り出してきては読んで、飽きてまた違う絵本に手を出すだけで、一向にちゃんと読んでくれません。ちゃんと読まない原因として、もしかして絵本に動きがないから飽きてしまうのでは、と思った自分はもしもパパが作った動く絵本があったら、娘は大喜びして本を読むようになり、どんどん集中力が身について、あいうえおもマスターしてパパ大満足！なんてことになるんじゃないだろうか。なんてことを考え、実際にWEB絵本を作成して娘に見せるま

Satoh_D 2016/04/08

リンク

はてなブックマーク

タグ

関連タグで絞り込む (8)

Reactに関するSatoh_Dのブックマーク (15)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス