Next.jsで構築するSPAビルド環境 – // もちぶろ
Next.jsの公式チュートリアルに従いプロジェクトを作成すると、既定でSPAをビルドする環境にはなっていない。 「ちょっとしたツールをつくりたいんじゃ」という場合に筆者はよくSPAを作りたくなるが、 Next.jsでSPAを作る環境を整備する上で、筆者のような初心者がつまづくポイントがいくつかあるので、 筆者が手探りで見つけた対応方法の一例をメモしておく。 必要な前提知識 HTML/CSS/JavaScriptの基本的な実装方法 Node.jsにおけるJavaScript開発作法：import文 npm/npxの基本的な使い方 Reactの関数コンポーネントによるGUIの基本的な実装方法 TypeScriptの基礎知識（無くても一応環境整備だけならできる） 必要な前提環境 OSは Linux/Windows 10/Windows 11/macOS いずれでもOK 筆者の環境は Ubunt
Getting Started: Installation | Next.js
What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwind CSS? No / Yes Would you like to use `src/` directory? No / Yes Would you like to use App Router? (recommended) No / Yes Would you like to customize the default import alias (@/*)? No / Yes What import alias would you like configured? @/* After the prom
Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた
はじめに React開発におけるNext.jsのプレゼンスが日に日に増している今日この頃ですが、Next.jsを使う必要がない小規模なSPAを作る場合の型が欲しくなり、色々調べて技術選定をした上で実際に作ってみるところまでやったので、その技術選定理由とセットアップ手順を共有したいと思います。 フロントエンドの移り変わりは速いとはいえ、割とホットな技術を選定できたと思うのでしばらくは使っていけそうです（そう思いたい…）。 前提 趣味で小規模なSPAを作る場合を想定 ルーティングなしの単機能アプリ SSRが必要ない モーダルなどの動きのあるUIが必要ない 技術スタック Vite Preact TypeScript Tailwind CSS Cloudflare Pages 技術選定理由 Vite 少し前まではこういうケースではcreate-react-appを使用していましたが、Viteに置き
正しく使う ReactContext
みなさん、 React の Context は正しく使えていますか？この記事ではパフォーマンスの観点で Context を少しでも正しく使うための方法や理由などを書いていこうと思います。 なお、この記事の内容が最も正しいと主張するつもりではありません。ぜひ PR や コメント でよりより使い方を共有してください！ 想定する読者と記事の範囲 一番この記事を読んでいただきたいのはこういった方々です Context についてなんとなくしか分かっていない とりあえず redux や recoil 等を使えば良いと思っている しばしば recoil と Context を比較するといった趣旨の記事があったりしますが、 Context について正しく使えていないが故に、適切に比較できないものがあったりします。僕自身は Context よりも recoil を使うことが多いのですが、思考停止で reco
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Less code. More speedSpend less time writing UI code and more time building a great experience for your customers. import * as React from "react"; import { Box, Center, Image, Flex, Badge, Text } from "@chakra-ui/react"; import { MdStar } from "react-icons/md"; export default function Example() { return ( <Center h="100vh"> <Box p="5" maxW="320px" borderWidth="1px"> <Image borderRadius="md" src="h
React Binding Patterns: 5 Approaches for Handling `this`
JavaScript’s this keyword behavior has confused developers for ages. There are at least five ways to handle the this context in React. Let’s consider the merits of each approach. 1. Use React.createClassIf you use React.createClass, React autobinds all functions to this. So the this keyword is bound to your component’s instance automatically: // This magically works with React.createClass// becaus
React.jsでプロダクション環境を見据える - Qiita
webpack-merge webpack-merge webpack.configをマージするためのモジュール。 共通設定ファイルと環境別の設定ファイルをマージするみたいな用途で利用する。 環境別でwebpack.configをかき分けたい。 手動でオブジェクトのdeep mergeするのはいやだ！みたいな人は使おう。 インストール npm i -D webpack-merge 設定 共通設定: webpack.config.babel.js NODE_ENV=production: webpack.config.prod.babel.js NODE_ENV=development: webpack.config.dev.babel.js import merge from 'webpack-merge'; // NODE_ENVで分岐 const config = process.en
S3 CloudFront Route 53 でReactで作ったSPAを配信する - Qiita
この記事のゴール S3 CloudFront Route 53 を使ってReact製のSPAを独自ドメインで配信します。 前提条件 以下の条件を満たしている前提で話を進めていきます。 Route 53 で独自ドメインを購入している事 AWS Certificate Managerで独自ドメインの証明書を取得している事（証明書は us-east-1 に作成されている必要があります。） 利用するSPAはサーバーサイドレンダリングが考慮されていない仕様である事 1 に関しては別に Route 53 で購入したドメインでなくても大丈夫なのですが、全ての手続きがAWS上で完結すると楽なので、この記事ではそのようにしています。 2 に関しては現時点ではCloudFrontに設定出来る証明書が us-east-1 に配置されていないと設定出来ない為です。（そのうち他のリージョンの証明書も使えるようになる
React RouterをAmazon S3で利用する
React-Routerをルーティングに利用した、SPAを Amazon S3でホスティングした際にハマったので。 多くのReactアプリケーションのルーティングでReact-Routerが使われているかと思うのですが、 Amazon S3にホスティングして、アクセスしてみると、残念ながら404エラーになってしまいます。 Amazon S3がバケット上にファイルの存在を確認できないため、404になっているのでした。 対応としては、3つのオプションがあるのかなと思っていて、 (他アイデアあれば教えていただきたい) NginxなどのProxyサーバを立てて、index.htmlへ遷移させる React-Rotuer hashHistoryを利用する Amazon CloudFrontを利用する 今回は簡潔にAWS上だけでセットアップしたい思いがあったので、 Cloud Frontを利用すること
react-router@v4を使ってみよう：シンプルなtutorial - Qiita
概要 Reactでルーティングをするためのライブラリであるreact-routerのv4の基本的な使い方を覚えるために、簡単なwebページを作ってみます。 react-routerのv4というと、v2やv3から破壊的な変更があり、かなり使いやすくなったとの評判なのですが、私はv4以前のreact-routerを使ったことはなかったので、この記事には過去のversionとの比較という観点はありません。初めて使う人が、ルーティングの概念やreact-routerの使い方がわかるチュートリアルになれば良いなと思いながら書きました。 方針としては、とにかくシンプルに小さなwebページを作ることにします。複雑な動作やサーバーとの通信はしませんし、cssもほぼ書きません。この記事はreact-routerを勉強し始めた当日に書いているので、間違っている内容があるかもしれません。ご指摘ください。 なぜr
「NetflixがReactやめて50%高速化」という記事が話題なのでReactのそもそもの嬉しさを語ります | mmjテックブログ
Netflix functions without client-side React, and it’s a good thing またまた衝撃的なニュースが飛び込んできました。Netflix が React を使うのをやめて、昔ながらのサーバーサイドレンダリングに戻して、ランディングページを 50% 高速化した、と言うものです。 結論から言えば、Netflix は React の使いどころを見誤っていたんではないか、と思います。 Isomorphic JavaScript フロントエンド界隈では、React の Next.js をはじめとして、クライアントと同じコードをサーバーサイドの Node.js で走らせて、ロードの高速化や SEO 対策を行おう、という isomorphic な SSR アプローチが盛んです。 ですが、ブラウザと Node.js で動く isomorphic j
サーバーサイドレンダリングしないReact SPAのSEO - 橋本商会
普通にwebpackと@babel/preset-envで"last 2 versions", "Safari 10"をターゲットにしてビルドしているだけ
Differences to React
Preact itself is not intended to be a reimplementation of React. There are differences. Many of these differences are trivial, or can be completely removed by using preact-compat, which is a thin layer over Preact that attempts to achieve 100% compatibility with React. The reason Preact does not attempt to include every single feature of React is in order to remain small and focused - otherwise it
制作事例解説 React + Material-UI + スクレイピング - syonx
Chase syonx.hatenablog.com what for React の基礎をチュートリアルや勉強会で学んで、その先に進めないでいたりしませんか？ きちんと技術を身につけるには、自分の手で何かを実際に作ってみることが効果的です。 React の公式チュートリアルはとてもよくできていると思いますが、 そこからもう一歩先にトライするのに提案したいのが今回ご紹介する内容になります。 制作したアプリの形式は Web アプリで、あとで読むサービスの Pocket と連携します。 先の記事で示したようにモチベーションと目的が重要なのでややニッチな題材となりますが、 試しやすさと簡潔さの点において Twitter よりも扱いやすいと思います。 構成図 技術スタック React Material-UI axios (Ajax) ESLint (airbnb) Gulp Browserify
react-router で遷移先のコンポーネントに props を渡す - present
ネストしたルートに遷移するとき、 遷移先のルートに対応するコンポーネントが、親コンポーネントの props.children にセットされている。 ここで props.children をそのまま表示せずに、 React.cloneElement で props.children を複製すると、 その際に props を渡せる。 もっとスマートな方法が提供されていたらいいんだけど、 今のところこの方法しか無さそう。 何はともあれ、ルートコンポーネントのみに状態を持たせ、子コンポーネントはステートレスにできた。 var React = require("react"); var ReactDOM = require("react-dom"); var ReactRouter = require("react-router"); var Router = ReactRouter.Router;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - react-tags/react-tags: A fantastically simple tagging component for your projects
React Router: Query Param Match?
GitHub - staltz/react-native-node: Run a separate Node.js process behind a React Native app
Can we use nodejs code inside react native application?
Facebook、ReactをMITライセンスに変更
