Next.js 2022年度リクルート エンジニアコース新人研修講義資料 - Speaker Deck2022年度リクルート エンジニアコース新人研修の講義資料です
Next.js 12.2
We're laying the foundation for the future of Next.js with 12.2: Middleware (Stable): Dynamic routing for your entire application. On-Demand ISR (Stable): Update content without redeploying. Edge API Routes (Experimental): High performance API endpoints. Edge SSR (Experimental): Server-render your app, at the Edge. SWC Plugins (Experimental): Extend compilation with your own plugins. Improvements
React周りのいつかお世話になる記事たち（随時更新）
Reactで開発をしていく上でみなさんがいつかお世話になるだろうと思った記事たちです。 （僕はお世話になりました。これからもお世話になります。） これも良かったよっていう記事があればコメントで教えてください！ 🌟 = 特におすすめ Reactを最初から学ぶ・入門 React Docs BETA 🌟 りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】 - くるみ割り書房 ft. React - BOOTH 🌟 Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス RailsエンジニアのためのNext.js入門 - hokaccha memo React Glossary + Explain Like I'm Five 🌟 React Server Components 総まとめ Reactのレンダリングに関
2021年からReactを始めるなら React Server Components 一択ではないか？
情報の新鮮さを重視しています。投稿記事は定期的に削除しています。どうしても過去記事を読みたい場合はVTeacherの「サブスク加入者のページ」からご閲覧ください。 apps.apple.com/app/vteacher/id1435002381
Reactを学ぶときに役立つ情報・本など
React公式ドキュメントのチュートリアルは古くなっているので、TypeScriptやReact Hooksで開発することも考えて参照するときにおすすめできるサイトを置いておく。 ほかにも有益な情報はあると思うが、あまり多すぎても大変なので、被りがなさそうかつ有益だと思っているリンクに絞っている。 2021年11月30日に編集 React公式ドキュメントのリニューアルが公開されるまでの繋ぎ。 New React Docs · Issue #3308 · reactjs/reactjs.org https://github.com/reactjs/reactjs.org/issues/3308 React公式ドキュメントがBeta版で公開されています。まずはこちらを参照するといいと思います！
React-pdf - Announcing react-pdf v2.0
I'm very excited to announce react-pdf 2.0 to the world! This is the culmination of almost an entire year of work and all the lessons learned since this project started all the way back in October 2016. It's crazy, I feel it was just yesterday when I was announcing 1.0 as well. In essence, this new 2.0 version is a full reimplementation of the library. Starting from scratch is always a risky move,
props のバケツリレーって何が悪いんだっけ - fsubal
#React やってて、props のバケツリレーを何か嫌がる人たまにいるんだけど、自分は props のバケツリレーそのものをそんなに悪いと思ったことがない。 「バケツリレーがつらい」ように見えるコンポーネントの大半はそもそも props の設計がおかしい場合が多く、本当の問題はそっちにあると思っている。 たとえば、次のようなバケツリレーはつらいかもしれない。ここでいう Body はサイドバーとしてフォロワーの一覧を表示し、メインコンテンツとしてフィード一覧を表示するみたいなものを想像して欲しい。フォロワー一覧の中で使う props とフィード一覧で使う props を混ぜて1つの親に渡している状況だ。
React Admin
The React Framework for B2B Apps React-admin offers the best developer experience, lets you focus on business needs, and build delightful user interfaces. const App = () => ( <Admin dataProvider={dataProvider} authProvider={authProvider} layout={Layout} dashboard={Dashboard} > <Resource name="deals" {...deals} /> <Resource name="contacts" {...contacts} /> <Resource name="companies" {...companies}
脱Reduxを試みて失敗した話、その原因と対策について
さて、年末が近づいてきましたが今年も 「Redux 使うべき使わないべきか」という話で盛り上がりましたね。 僕もずっと悩める人なのですが、@f_subal さんの Tweet や @takepepe さんの Next.js の状態管理 2020 が示すように Read 要件・Write 要件の多さで使い分けるという指針には深く納得をしました。 Redux の代替になるツールやノウハウもより活発に出てきて、Redux 以外の選択肢を考えるにあたって様々な学びがあった 1 年でした。 自分も色々と Redux 以外の選択肢を試していたのですが、その中で「やっぱ Redux を使えばよかった」と思ったときがあったので、これから Redux を剥がそうと考えている人に向けてその失敗談を語りたいと思います。 自分も手探りで正解がわかっていないところなのでアドバイス・反論・指摘などがあれば頂きたいです
まとまったCSSを別のコンポーネントに分けないでほしい話 - uhyo/blog
この記事は、ReactでCSSを書くときに関連したCSSを別々のコンポーネントに分けるのをやめようという記事です。主な理由は、スタイリングという機能が複数コンポーネントに分散するのを防ぐためです。これには修正時に複数コンポーネントにまたがって修正が必要になるのを防ぐという意味もあります。 Flexboxの例関連したCSSが複数の要素に分かれることはよくあります。その代表例がdisplay: flexです。例えばこんなレイアウトを考えてみましょう。左側のボックスの幅が決まっていて右側の幅が可変の2カラムレイアウトです。 左のカラム (100px)右のカラムこのレイアウトはおおよそ次のように実現できます。 /* 親要素 */ display: flex; /* 子要素（左） */ flex: 100px 0 0; /* 子要素（右） */ flex: auto 1 0;では、Reactではどの
TypeScript + React: Component patterns
Published on July 28, 2020 Stefan on Mastodon Reading time: 10 minutes More on TypeScript, React, Preact This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s
デザイナー向けにReactでUIを組んでみるワークショップをやってみた - freee Developers Hub
こんにちは、freeeのUXチームの id:ymrl です。 今日はアウトプット→思考デーということで、デザイナー向けにReactでUIを組むワークショップをいきなりやってみた話を書こうと思います。 私は昨年、エンジニアからデザイナーになりました 。そしてデザイナーの側に立ってみると、いろいろと効率が悪いなと思うところが多く、そこをどうにか打開できないかと思ってやってみたのがこのワークショップです。 しかしまだその状況は打開できていません。この記事はそんな中途半端な状態の話です。 freee のUI開発の現場、私の問題意識 前提として、freeeのUI開発について説明しなければいけません。 私がメインでやっているのはVibesというデザインシステムの開発です。VibesはfreeeのWebアプリケーションのUIを爆速でハイクオリティに開発できる状態を目指しています。それ以外にも、社内のアク
The Open Source Web Editor You Will Love | Edtr.io
WYSIWYGEdtr.io is a WYSIWYG in-line web editor written in React. Content created with Edtr.io looks just like the final page - select any editable element on the page, edit it in-place or drag ’n’ drop it around. Heavily CustomizableIts plugin architecture makes Edtr.io lean AND adaptable to any use case at the same time. Open SourceEdtr.io is of course Open Source and has already been adopted by
iOS NativeからReact Native に乗り換えた Shopify の話聞いてきた - tomoima525's blog
"最も使われているサービスのひとつを iOS Native から React Native に作り変えた" というアナウンスメントを出し話題となった Shopify で、まさにその内容を扱った React Native の meetup があり、参加してきたので内容と所感をまとめました。 React Native is the Future of Mobile at Shopify 発表内容 検証/導入フェーズ 技術スタック React Native がもたらした効果 途中でやめたこと 追加で登壇者に聞いたこと その他の発表 React Native for Web @twitter その他もろもろ React Native is the Future of Mobile at Shopify React Native で書き換えた話はしばらく前にアナウンスしていたのですが、Shopify
実践: React Hooks - mizchi's blog
hooks が発表されてから趣味でも現場でもずっと hooks を使っています。おかげでだいぶこなれてきて、だいたいなんのライフサイクルでも表現できるようになってきました。 最初は単に useState が state を、 useEffect が componentDidMount/componentDidUpdate を置き換えるもの、と説明を済ますつもりでしたが、 useEffect についてはライフサイクルのモデルがぜんぜん違うので、別の説明をする必要があるように感じていました。 で、その結果 React Hooks を理解するには、関数のメモ化を理解するのが最も簡単だと思ったので、その説明をしつつ、イディオムを解説していこうと思います。 最初に: React Hooks は何であり、何ではないか 関数コンポーネントが状態を持てるようにするもので、関数のメモ化のテクニックを多用しま
2020 年の React Native 開発 - tomoima525's blog
2019 年は React Native にとってはさまざまな変化があったので、それらを振返りつつこの記事では最近の React Native をめぐる状況と個人的見解について書きます。採用を検討している方、Flutter などのクロスプラットフォーム開発フレームワークと比べたいという方の参考になれば幸いです。 フラットに書くことを意識していますが、いち利用者としてのバイアスがあることをご了承ください。 開発体験 Fast Refresh Auto Linking CocoaPods の標準採用 Expo によるワンストップ開発環境構築 フレームワーク/アーキテクチャ Lean Core Android 最新の React への追随 コミュニティ What do you dislike about React Native? react-native-community 管理下のライブラリ
2020 年、 React 軸で学ぶべき技術 - mizchi's blog
なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介
React, Redux, GraphQLを学べるオンライン教材「Full Stack Open 2019」がとても良かった - FRTKL
この記事はコネヒト Advent Calendar 2019の11日目の記事です！ qiita.com はじめに 半年ほど前から新規事業のチームで仕事するようになり、主な技術スタックもPHPからGo, Next.jsへと変わりました。 その中で、特にフロントエンドのテスト周りにおいてキャッチアップ不足を感じていたのですが、たまたま見つけた*1「Full Stack Open 2019」という教材がとても良かったので紹介したいと思います。 「Full Stack Open 2019」とは fullstackopen.com フィンランドのヘルシンキ大学で実際に使われているテキストベースのオンライン教材です。 Nodeで作られたREST APIとReactを使ったSPAの実装を通して、React・Redux・Node.js・MongoDB・GraphQLが一度に学べる教材となっています。 教材
React+TypeScriptでできたミニマルな管理画面「react-admin-template」
react-admin-template https://github.com/delprzemo/react-admin-template react-admin-templateの特徴 「react-admin-template」は、以下で構成されたオープンソースの管理画面です。巨大なリファクタリング/クリーニングを回避するため、コア機能のみ提供するコンセプトになっています。 ・React ・jQueryなし ・TypeScript ・React Hooks ・Redux react-admin-templateをインストールします $ git clone https://github.com/delprzemo/react-admin-template.git React-Admin-Template # リポジトリをダウンロード $ cd React-Admin-Template
Build your own React
We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features. If you’ve read any of my previous “build your own React” posts, the difference is that this post is based on React 16.8, so we can now use hooks and drop all the code related to classes. You can find the history with the old blo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
