Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた
はじめに React開発におけるNext.jsのプレゼンスが日に日に増している今日この頃ですが、Next.jsを使う必要がない小規模なSPAを作る場合の型が欲しくなり、色々調べて技術選定をした上で実際に作ってみるところまでやったので、その技術選定理由とセットアップ手順を共有したいと思います。 フロントエンドの移り変わりは速いとはいえ、割とホットな技術を選定できたと思うのでしばらくは使っていけそうです（そう思いたい…）。 前提 趣味で小規模なSPAを作る場合を想定 ルーティングなしの単機能アプリ SSRが必要ない モーダルなどの動きのあるUIが必要ない 技術スタック Vite Preact TypeScript Tailwind CSS Cloudflare Pages 技術選定理由 Vite 少し前まではこういうケースではcreate-react-appを使用していましたが、Viteに置き
React 18に備えるにはどうすればいいの？ 5分で理解する - Qiita
React 18はReactの次期メジャーバージョンで、2021年の6月にalpha版が、11月にbeta版が出ました。また、Next.js 12でもReact 18のサポートが実験的機能として追加されました。React 18の足音がだんだんと我々に近づき、アーリーアダプターではない皆さんの視界にもいよいよReact 18が入ってきたところです。 特に、React 18ではServer-Side Rendering (SSR) のストリーミングサポートが追加されます。現在ReactでSSRを行いたい人の強い味方としてNext.jsが存在しているわけですが、Next.js 12でもReact 18を通してストリーミングの恩恵を受けることができます（Next.jsではSSR Streamingと呼んでいるようです）。また、厳密にはReact 18とは別ですが、React Server Comp
TypeScript + React + styled-components + Firestore + Firebase HostingでWebアプリを作り始める - Qiita
TypeScript + React + styled-components + Firestore + Firebase HostingでWebアプリを作り始めるTypeScriptFirebaseReactVSCodestyled-components TypeScript, React, styled-components, Cloud Firestore, Firebase Hostingを使ってWebサイトを公開する方法。1 「FirestoreもReactも使ったことない人(筆者もそう)」が 「Firestoreに接続するReactアプリを作り、Firebase Hostingにデプロイするまで」を簡潔にまとめました。2 VSCodeを使っています 色々な考慮を省略しています 1. Reactプロジェクトの作成 まずは必要なものインストール firebase-tools 公式の
react-boiler-plate-1
前置き 今僕が個人開発でアプリケーション作るときって以下のスタックはほぼ確定してるんですよね。 typescript express react react-router redux styled-components で、毎回そのスタックで SSR(Server Side Rendering) 対応の SPA(Single Page Application) の基盤作ってログイン機能作ってってやるわけですが、ここまでってどんなアプリケーションでもほぼ同じなんですよね。 なのでボイラープレートを作ろうと思いまして。 そしてついでなので解説記事でも書こうかなと思いまして。長すぎて何回かに分けたレベルだけれど興味ある人は読んでってくれよな。 よし、やるぞ！！ 💪 (どんな性質のアプリケーションかの考慮もせず技術スタックだったり SPA + SSR だったりを決め打ちでやってることの是非はここ
俺が考えた最強の Reactのステートレスコンポーネントの書き方 - Qiita
最近自分はこう書いてるという例。意見が欲しい。 この記事に redux は出てこない。 参考: https://qiita.com/mizchi/items/bcb1aef8d1f14f8d0b4a 構成要素 React flow styled-components recompose 以下 SFC = Stateless Functional Component /* @flow */ import React from "react" import styled from "styled-components" import pure from "recompose/pure" type Props = {| value: string |} export default pure(function Example(props: Props) { const { value } = p
【翻訳】React Native at Airbnb - Studio Andy
はじめに この記事は2018年6月20日にAirbnb社のGabriel Pealによって公開された記事を日本語に翻訳したものです。 公開にあたっては氏本人の同意を得ている最中ですが、誤訳や問題のある表現等を見つけた方は僕のTwitterアカウントまでDMいただけますと幸いです。 元記事: medium.com 本文 この記事はAirbnb社におけるReact Native体験と 次の時代のモバイルアプリケーション開発について記したブログシリーズの第一弾です。 10年前にAirbnbが立ち上がった頃、スマートフォンはまだまだ未熟なものでした。それから時が経ってより多くの人々が世界を旅するようになったこともあり、今や私たちの生活においてスマートフォンは欠かせない道具になっています。 旅行中はモバイルデバイスが数少ない、もしくは唯一の通信デバイスになるということは往往にしてあります。世界トップ
styled-componentsを使った雑なReact Presentational Componentの書き方 - Qiita
最近、仕事でReactを書く機会が多くなってきて色々試しているうちに書き方が落ち着いてきました。 [注意] 本来はクラス毎にStyledComponentsのインスタンスを作った方がいいです。自分がVueライクな感じで雑に書くための記法です。 この表記ですと、子コンポーネントに同じクラス名があたったときに、親コンポーネントのスタイルが当たるので完全なscopedなスタイルにはなりません。 （@nabeliwoさんにコメントいただきました。ありがとうございます！） 既にHTMLが存在しているときに雑にReactに移植するときの途中段階とかで役立つ書き方です import React from 'react' import styled from 'styled-components' const TodoItem = ({ className, title, description, onD
styled-componentsを使ったCSS設計 - Qiita
はじめに 自分は普段フロントエンドエンジニアとして、React Reduxなアーキテクチャのアプリを作ることが多いのですが、stylingにstyled-componentsを導入しています。今回は、styled-componentsでのCSS設計について書いてみたいと思います。 styled-componentsとは JSでstyleを記述するCSS in JSのライブラリで、2019年8月現在最も人気のあるライブラリです。タグ付きテンプレートリテラルをうまく使った独自性と、明快なAPIでCSS in JSの火付け役にもなり、同じ思想を持った亜種ライブラリ(paypal/glamorous, zeit/styled-jsx等)が続々と出て来るなどある種のブームを巻き起こしました。 そもそも、Reactの登場でフロントエンド開発が「jQueryによるhtmlへの振る舞いの後付け」というスク
これからのReactコンポーネントのスタイリングはstyled-componentsが良さそう - Qiita
前々回のprettierと前回のflowに引き続きReact Confで紹介されてたものを使うシリーズ第3弾です。 styled-componentsはSassやRadium、CSS Moduleといったスタイル系ライブラリの問題を解決するために生まれた新しいライブラリで、今Reactコンポーネントのスタイリングをするならベストの選択肢なんじゃないかと思います。 追記 2017/4/2 - jestでのテストについて追記しました。 2017/5/26 - v2について簡単に記載しました。 styled-componentsとは styled-components 所謂CSS in JSの一種でjsx内に普通にcssが書ける。 キャメルケースとかせずにcssが書けるので、(複雑なことをしない限りは)移行が楽。 props渡したりテーマ作ったり、extendできたり機能豊富。 擬似要素やmed
Reactの最新動向とベストプラクティス ── HTML5 Conference 2016セッションレポート
Reactの最新動向とベストプラクティス ── HTML5 Conference 2016セッションレポート 小林徹 2016年9月3日に東京電機大学で開催された「HTML5 Conference 2016」のセッションを特集する第二弾は筆者である私、小林徹が登壇した「 Reactの最新動向とベストプラクティス 」の内容を解説します。 Reactの現状 Reactは、2013年にFacebookが公開した、Viewを作るためのJavaScriptのライブラリーです。 https://facebook.github.io/react/ 現在のバージョンはv15.3.2です。 v1.0.0からv14.0.0までのバージョンはありません。 「すでに安定していてプロダクションでも利用できる」ことや「セマンティック・バージョニング（パッチ.マイナー.メジャー）に準拠している」ことを示すために、v0.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React/Reduxで�秩序あるコードを書く
Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ
redux-pluto
Redux のディレクトリ構成を考える