【React+TypeScript】Netflixのクローンを作るチュートリアル
【注意！】 2024年4月末にこちらの本の内容を大幅リニューアルしました！ https://note.com/terry10/n/nf0674af97617 ※こちらのZennのBookも5/7を目安にリニューアル内容を反映する予定です 多くの人に手に取って欲しいので、リニューアル後は期間限定で無料配布も検討しています。 こちらのツイートで無料配布について告知しています！ ↓ https://x.com/teriteri_code/status/1783358352447414464 --- React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションのチュートリアルです。 学べる事 - ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用 - React Hooksによるstate管理 - TypeScriptで外
ハンズオン：React チュートリアルからはじめる TypeScript と単体テスト
import { useState } from 'react'; function Square({ value, onSquareClick }) { return ( <button className="square" onClick={onSquareClick}> {value} </button> ); } function Board({ xIsNext, squares, onPlay }) { function handleClick(i) { if (calculateWinner(squares) || squares[i]) { return; } const nextSquares = squares.slice(); if (xIsNext) { nextSquares[i] = 'X'; } else { nextSquares[i] = 'O'; } on
Reactで再描画を抑える方法まとめ
この記事について 以下でReactの再描画の仕組みと抑制方法をスクラップしました。 折角なので、記事にしてまとめておきます。 再描画の確認方法 Chromeデベロッパーツールを使用すると、いつ再描画が行われているか確認することができます。 該当箇所の外枠が発光し、再描画されていることを教えてくれます。また、負荷がかかるほど外枠が黄色に近い色に変わっていきます。 再描画の基本 React Hooksではコンポーネント内で定義されているStateが更新されたとき、そのコンポーネントの再描画が行われます。 そのコンポーネントがいくつかの子コンポーネントを持つとき、それら全てが再描画の対象となります。 Inputコンポーネント 以降で使用しているInputコンポーネントです。 基本的にはinputタグをラップしているだけなので、読み進める分には飛ばしてOKです。 Input.tsx export
React開発を快適にするChrome拡張を公開したので見てください！
React Inspector というChrome拡張機能を作りました。 Chrome上でインスペクタを起動し、クリックしたReactコンポーネントのソースコードをピンポイントでエディターで開きます。(現在はVSCodeのみ対応) 追記: ↑2022/09/12 オプションページから "Open in Editor URL" を設定できるようにし任意のエディターのURLスキーマで開くことができるようになりました...! Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh GitHub: https://github.com/hand-dot/react-inspector Reactのソースコードに直接ジャンプできるのでUIか
React Server Components はウェブ開発を変えるゲームチェンジングな技術である
去年末に Facebook の人達が出した React Server Components というものが、React 界隈に激震を及ぼしていますが、速報以外でこの技術について言及している国内のブログが見当たらないため、この記事で解説してみます。間違いや分かりづらい部分があればぜひツッコミをお願いします。 React Server Components は、ただのサーバーサイドレンダリングではありません。クライアントサイドレンダリング（SPA）とサーバーサイドレンダリングを、ギアを切り替えずにいいとこ取りする仕組みです。これまでに存在した様々な技術よりも踏み込んで、フロントエンドとバックエンドの境目を曖昧にしてしまうユニバーサルな技術です。 勝手な造語としていうなら「コンポーネント指向ユニバーサルウェブ開発」とでも呼ぶべきものでしょう。 そして、これはただのユニバーサルなだけの仕組みではあり
非同期処理に疲れた方に、ReactQueryの処方箋
この記事について 本記事は、下記のReactQuery公式ドキュメントの内容をベースに、自分なりに噛み砕いてまとめたものになります。 ReactQuery公式ドキュメント サンプルコードの一部は公式サイトから引用しています。 前置き 【呼称について】 ReactQueryはSolidやVue、Svelteへの対応を進めており、現在の正式な名称はTanStackQueryになっています。 ReactQueryの方が耳馴染みのある方も多いため、この記事では、ReactQueryと呼ぶことにします。 【内部実装のイメージについて】 以下、「内部実装のイメージ」となっているアコーディオンの箇所は、ReactQueryの内部実装が実際にそうなっているということではなく、 「こういうふうなコードをイメージすると理解しやすそう」という意図で書いています。 基本的には読み飛ばしていただいても大丈夫な箇所で
【SAM + Cognito + Amplify ライブラリでログイン機能を実装した React アプリを作成】Part2 - React アプリから API 実行 - シー・エス・エス イノベーションラボ（ブログ）
みなさん、こんにちは。イノベーションLABのハヤシです。 以下の構成の Web アプリをさくっと作る手順をご紹介します。 バックエンド：Node.js の REST API（Amazon API Gateway / AWS Lambda） フロントエンド：TypeScript の React 今回は全 3 回のうちの 2 回目、フロントエンド実装編です。 必要な部分だけでも、ぜひ参考にしてみてください。 1回目はこちら↓ blog.css-net.co.jp 1. 前提条件 1-1. 想定読者 1-2. 前提条件 1-3. この手順でインストールするもの 2. フロントエンド SPA 2-1. React アプリ作成 2-2. コンポーネント分割 2-3. リポジトリに登録 2-4. Amplify ライブラリの設定 2-5. バックエンドの CORS 設定 3. 参考 1. 前提条件 1
何故くそややこしいReactを勉強しないといけないのか？ - Qiita
逃げるプログラマー、避けられない壁 Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。 自分もそういうダメグラマーの一人でした。 だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにしたのであります。 React, Angular, Vueの３大フレームワークをざっと調べてみた際に、一番取っつきやすそうだったReactをチョイス。 しょせんはHTMLとCSSとJavascript で、結局Reactは何をやっているかというと、しょせんはHT
EmacsにおけるTypescript + React JSXの苦悩と良さげな設定について - Qiita
これはEmacs Advent Calendar 2020 10日目の記事です。 前置き この記事は淡々と問題を解決する記事ではなく、つらつら苦悩が描写されている。 Typescript + React JSX問題は現在進行形で解決案がドシドシ提案されている。これもその１つとなるといいな。 始まり Emacsのコーディング体験は最高だ。だけど、Typescript + React JSXではいまいちだ。 去年まで会社で利用していたwebのフロントエンド開発はこれだ。 React Redux react-router-dom Emacsのメージャーモードはrjsx-modeを使っていた。 ところが、その１年後の2020年8月。 社内で採用しているフロントエンド周りが大きく変わった。 Typescript Next.js そのためEmacsの構成を大きく見直す必要が出てきてしまった。 下のコー
ビギナー向け、無料で最強の海外独学サイトリスト - Qiita
#お金をかけずに効率よくプログラミングを学ぶには とりあえず、メモ帳代わりにここのブログでなんか書いてみるかと思いたって、何の考えもなしに書いた一番最初に書いた記事に結構コメントや反響を頂き、意外と英語とプログラミングの話題って気になる人が多いのかなと思ったので、普段使ってメチャ便利やんという英語圏の学習用のリファレンスをリストアップしてみるよ。 前回も少し書いたのだけど、２０年前にウェブデザイナーとして、日本語しか分からない状態で色々コーディングを勉強していた時と、１０年ほど外資でプログラミングとか関係ない職種で働いた後に、英語中心でプログラミングを勉強し直した現在の違いを純粋に書いてみたわけだけど、おっさんになり、脳や集中力の衰えを勘案しても、理解の度合いが全然違うので、英語が出来るって、やっぱりプログラムを学ぶ上では大きなメリットだよねという話でした。 まず、今年に入って、もう一度プ
react.js(next.js)とvue.js(nuxt.js)の違いをソースで確認してみましょう - Qiita
概要 最近人気のフロントエンドの言語であるreact.js, vue.js, augular.jsがあります angular.jsは下落傾向で、react.jsとvue.jsはほぼ同じように人気があります この記事では、react.jsとvue.jsに対する違いと next.jsとnuxt.jsに対する違いをソースで確認してみましょう next.jsとnuxt.jsって何？ next.jsはreact.jsのSSR(ServerSideRender)フレームワークです nuxt.jsはvue.jsのSSR(ServerSideRender)フレームワークです react.jsとvue.jsは、基本的にCSR(Client Side Render)です CSR(Client Side Render)の場合、検索エンジンに露出できない短所があり、 最初のスクリプトロード時間が長いという短所があ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/shota7180/status/1640990982064984066?s=12&t=eSBsIYXgJRCmBVvjYB3Rww
Docker で React + TypeScript の開発環境（自分用メモ）
React JavaScript Tutorial in Emacs - LSP Mode - LSP support for Emacs