Rails API + React + devise_token_authでログイン機能を実装する - Qiita
概要 主に個人開発においてRails（APIモード）+ReactでSPA（シングルページアプリケーション）を作成する事が多いのですが、ログイン（認証）部分の実装で毎度ごちゃごちゃと調べ直す事になるので、ちゃんとドキュメントとして残しておきたいと思います。 手順通りに進めれば最低限のものが作れるようになっているため、同じ様な構成のものを作成したいと考えている方は参考にしてみてください。 完成イメージ 特に何の変哲もない光景ですが、SPAでこれをやろうとするとそれなりに手間がかかったりします。 使用技術 バックエンド Ruby3 Rails6（APIモード） MySQL8 Docker フロントエンド React TypeScript Material-UI 今回は再現性を考慮してバックエンドのみDockerで環境構築していきます。 バックエンド 早速コードを書いていきましょう。まずバックエン
React TypeScript Cheatsheets | React TypeScript Cheatsheets
React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript
Next.js 12.1
We're excited to release one of our most requested features with Next.js 12.1: On-demand ISR (Beta): Revalidate pages using getStaticProps instantly. Expanded Support for SWC: styled-components, Relay, and more. next/jest Plugin: Zero-configuration Jest support using SWC. Faster Minification with SWC (RC): 7x faster minification than Terser. Self-Hosting Improvements: ~80% smaller Docker images. R
RF21 – Naman Goel – Rethinking CSS - Introducing Stylex
CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers. If you like what we do please consider subscribing → https://bit.ly/3lowyCt --- This event would not take place without the support of our sponsors: ## Gold Sponsors * Gofore → https://gofore.com * Futurice → https://www.futurice.com * Smartly → https://www.smartly.io ## Silver Spo
Reactハンズオンラーニング 第2版
Facebookが開発したJavaScriptライブラリ「React」の解説書。2013年にオープンソース化されたReactですが、ここ数年で大きな変更が加えられ、またReactを取り巻くエコシステムも大きく変化しました。本書では実際に動くコンポーネントを作りながら、最新のReactの記法について解説しつつ、最新のツールやライブラリも紹介します。初心者から中上級者まで、Reactの今をすばやく学習することができます。 賞賛の声 まえがき 1章 Reactの世界へようこそ 1.1 本書のねらい 1.2 Reactの過去と未来 1.2.1 第2版の変更点 1.3 環境の構築 1.3.1 GitHubリポジトリ 1.3.2 React Developer Tools 1.3.3 Node.jsのインストール 2章 React学習に必要なJavaScriptの知識 2.1 変数の定義 2.1.1
一番文句言われなさそうな React コンポーネントの書き方
最近 React コード生成機を作っていて「一番文句言われなさそうな React コンポーネントの書き方ってなんだ…？」と改めて疑問に思ったので考えてみました。 結論から言うと以下の形をデフォルトにするのが良さそうかなと思いました。 function vs. アロー関数 -> アロー関数 型は基本的に VFC でつけて、 children が欲しい場合は明示的に props に追加する return を省略可能な時省略するか -> しない props を destructure するか -> しない派だったけどした方がいい気がしてきた const Hoge: React.VFC<Props> = ({ title }) => { return ( <Fuga title={title} /> ) } ちなみにですが、大事な前提として TypeScript を使うことを前提としています。(型
くるみ割り書房 ft. React - BOOTH
「仕事で使える React 本」といえばコレ❗ 超・実践的な React が学べると評判の『りあクト！』シリーズ。 技術同人誌として異例の累計 2.5 万部を突破、現在 BOOTH 技術書カテゴリでも上位を独占しています。 現場のエンジニアの方々から絶大な支持をいただき、各社で読書会が開かれたり、新人研修用の教材として使われたりしています。 フロントエンド初心者の新人とその先輩の会話によって解説が進むので頭に入りやすく、React 学習時に引っかかりやすいポイントや抱きがちな疑問に対しても丁寧にフォローしていきます。 どこよりもわかりやすく、どこよりも実践的な React 本の決定版との自負を持って提供しています。 🔔 くるみ割り書房をフォローしていただくと、新刊・更新情報や紙の本の入荷状況などをメッセージで随時お知らせします。
Troubleshooting | Create React App
npm start doesn’t detect changesWhen you save a file while npm start is running, the browser should refresh with the updated code. If this doesn’t happen, try one of the following workarounds: Check that your file is imported by your entrypoint. TypeScript will show errors on any of your source files, but webpack only reloads your files if they are directly or indirectly imported by one of your e
React Error and Performance Monitoring
React Performance MonitoringQuickly identify performance issues and view full end-to-end distributed trace to see the exact poor-performing API call and surface any related React errors. Improve React performance with max efficiency, not max effort. See a Sample Transaction React Error Monitoring With Complete Stack TracesSee the error and React stack trace previously only visible in your user’s d
Ruby on Rails on React on SSR on SPA - ✘╹◡╹✘
amakan での設計を例に、RailsでSingle-Page Applicationをつくるときの自分のやり方をまとめてみます。 Gem 「JavaScriptで書かれたReactのコンポーネントからHTMLを生成する」というのをRubyでやるために、RubyのV8エンジン実装であるmini_racerというGemを使う。この処理を楽に実行するために、react_on_railsというGemも使う。 gem "mini_racer" gem "react_on_rails" View body要素内のHTMLは全てReactで生成するので、layout以外にviewのテンプレートは存在しない。 Controller 初回リクエストの場合はHTMLを返す ページ遷移時に呼ばれるリクエストの場合はJSONを返す 外部サイトからブラウザバックで戻ってきたときにJSONを見せない という要求に
2018 年 React と Redux のエコシステム総まとめ - Qiita
Angular などの JavaScript フレームワークは大規模向けに設計されており、標準で多くのエコシステムが組み込まれています。 React は単なる View ライブラリです。そのため View ライブラリを補完するためのエコシステムの選択が必須となります。 エコシステムを自由に組み合わせて開発者とプロジェクトに応じた理想的なフレームワークを作成する必要があるわけです。 これは、小規模アプリケーションから大規模アプリケーションまでの様々な要件やニーズに対応できる柔軟性が高いことを意味していますが、エコシステムを選択するためのコストが必要となります。 下記では、筆者が最低限、導入を検討する余地があると考える主要な React のエコシステムとその簡単な概要を記載しています。 筆者の独断と偏見で選択したエコシステムであることを考慮してお読みいただきたいです。 既知のエコシステム (ほ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/shadcn/status/1584971527820541953
Facebook CSS-in-JS Solution Stylex Introduced at React Finland 2021
Next.js 非公式日本語翻訳ドキュメント
GitHub - framer/motion: Open source, production-ready animation and gesture library for React
Documentation | Framer for Developers
React Hook Form - Simple React forms validation
Release Version 7.0.0 · react-hook-form/react-hook-form
React Conf Japan
React app not rendering in IE11 and below · Issue #8379 · facebook/react