【逆引きリファレンス】Vue と React の書き方 比較とまとめ - Qiita
はじめに 実務では Vue / Nuxt をメインにフロントエンド 開発をしています。この度 React の案件にアサインされることをきっかけに React の学習をはじめたのですが、 Vue でやってたことって React やとどうやってやるんや？？ Vue / React の対象表みたいなのはいくつかあるけど、Vue の Composition API や React の関数コンポーネント、フックスに対応した記事がない… ということでこの度まとめてみました。 読んだ方がええ人 普段は Vue を使用していて最近 React をはじめた人（逆も然り） 普段は Vue を使用しているが、 React にも興味がある人（逆も然り） 読む前に知っておいてほしいこと Vue は Composition API 、React は関数コンポーネントや Hooks を用いることを前提として記述していま
Next.jsの_documment..tsxと_app.tsxについてメモ - Qiita
_app.tsxとは /page/_app.tsxを作成することでAppコンポーネントをカスタマイズができる。 すべてのページコンポーネントの初期化に使われるコンポーネント。 すべてのページで共通な処理などを書くことができる。 _documment.tsxとは /page/_documment.tsxを作成することでDocumentコンポーネントをカスタマイズができる。 htmlタグやbodyタグの定義を行うコンポーネント ページ共通のheadタグなどを定義する _app.tsxの例 import { AppProps } from 'next/app' import Head from 'next/head' const App = ({ Component, pageProps }: AppProps) => ( <> <Head> <title /> <meta name='view
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 your code inside a `src/` directory? No / Yes Would you like to use App Router? (recommended) No / Yes Would you like to use Turbopack for `next dev`? No / Yes Would you like to customize the import alias (`@/*` by default)
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
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ライセンスに変更
