はじめに こんにちは@Sicut_study (Watanabe Jin)です。 去年の10月頃にReactのロードマップを投稿しておかげさまで1000いいねもすぐそこになりました そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。 エンジニアになりたい完全未経験の方や、すでにエンジニアだけどもっと自由にプログラミングができるようになりたい人をたくさん教えてきました。 👇メンバーの記事はこちらにあります その中である程度この流れで学習をすすめていけば1-2ヶ月程度でReactで自由にサービスを作れるレベルに再現性をもってレベルアップすることができると確信がもてたので、 実際にやっているカリキュラム(React部分)をすべて紹介します ロードマップは完全未経験でもできるようなものになっていますのでわかる箇所は飛ばしてもOKです。
はじめに こんにちは。サーバーサイドエンジニアの mokuo です。 最近、ミニマムな React アプリを実装する機会がありました。 社内のメンバーにアドバイスをもらいながら、今（2024年前半） React アプリをミニマムに作るならこんな感じかな、という構成になった気がするので、ご紹介したいと思います。 実例の1つとして参考にしていただけますと、幸いです。 はじめに 本文 📝 機能要件 ⚒️ 採用したツール (npm モジュール) 📁 ディレクトリ構成 👨💻 プロトタイピングの実施 🍩 おまけ コンポーネント設計について フロントエンドに DDD のエッセンスを取り入れてみたい おわりに 本文 📝 機能要件 社内の限られた CS メンバーのみが利用する、管理画面を開発しました。 バックエンドは Golang で実装される API サーバーで、認証機能以外だと、2つの機能
とある企業の面談で、「reactは運用コスト高いと思うんですけどなんで選定したんですか？」って聞かれてめちゃくちゃ困った話→Web開発の運用コストに関する様々な意見が集まる
Tonosaki @seino914 この間、とある企業の面談で、「reactを使用したWeb開発をしております」って言ったら「reactは運用コスト高いと思うんですけどなんで選定したんですか？」って聞かれてめちゃくちゃ困ったんだけど、reactって運用コスト高いんすか？？しかも末端エンジニアのワイに選定理由聞かれてもわからん。 Tonosaki @seino914 エージェントにモダンWeb開発してる企業って事で進められて面談したんだけど、面談担当者、reactアンチだったから色々とケチつけられたり、詰められたんだけど。
React19のRCが発表され数ヶ月が経ちました。Next.jsではReact19のExperimentalな機能を使った実装をいち早くしていたので、少し馴染みのあるアップデートが多かったように思います。 Next.js（特にApp Router）においてReact19のAPIやHooksをどのように使うべきかはNext.jsのドキュメントを見れば大体のベストプラクティスが見えてきます。ですが、実際の開発現場ではApp Routerを採用しているケース以外にもVite+ReactやPages Router, Remixなどと様々な実装があるのが現実です。 そこでこの記事では、特にVite+Reactのスタックを前提にReact19の新機能をいかに活用できるか整理したいと考えています。 また、React19の新機能を見た時にTanStack QueryやSWRのようなサードパーティの状態管理
State of React 2023
React has been around for 11 years, which seems hard to even grasp when you look at the current pace of web development. The reason why we're still talking about React today is that it's somehow been able to keep up, always evolving to meet the challenges thrown at it by its users. In fact, not content with merely keeping up, React is even leading the way on new innovative patterns such as Server
Modern Emacs Typescript Web (React) Config with lsp-mode, treesitter, tailwind, TSX & more - Ovi Stoica
Table of Contents Introduction Part 1: Treesitter for Typescript & TSX LSP Support Completion setup Linter setup LSP Setup Eslint (Optional) Tailwind LSP Server LSP Performance Emacs LSP Booster Structural editing Formatting buffers with Prettier Other resources Conclusion Introduction I've worked within the JS ecosystem for the past 8 years using editors like Webstorm and VSCode, I started using
【注意喚起】ReactのuseStateの値がすぐに更新されない理由を誤って理解しがちな件について - Qiita
「state 更新 反映されない」を検索するまで Reactにまだ慣れていない段階で開発をしているとuseStateの問題に詰まってこのような検索をする方は多いかなと思います。 私もその一人で、公式のチュートリアルを一通りやったにも関わらずこの問題に詰まってしまったのは忸怩たる思いでございます。 「useStateで定義した値はset関数で更新できて、useStateはフックなので実行すると画面が更新される」というのはまずReactを勉強する最初の段階で理解するでしょう。 そこで、言われた通りにuseStateで値を定義し、ユーザーの操作によって画面を更新させるコードを書きます。 import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState
IntroductionAirbnb’s frontend recently reached a major milestone: all of our web surfaces have been upgraded from React 16 to React 18, the current major version of React¹. This was a big project for a product with many surfaces, including Guest and Host pages as well as many internal tools. To safely perform this upgrade, we created the React Upgrade System: reusable infrastructure that allows us
GitHub - onlook-dev/studio: The open source, local-first Webflow alternative. Design directly in your live React site and publish your changes to code.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
React Router v6のルーティング方法を解説 - createBrowserRouterとData APIsの活用法 | DevelopersIO
こんにちは、戸田です。 今回は React Router v6.4 以降を使用する際にどのルーティング方法を使えばいいのか自分の言葉でブログにまとめました。 まず結論 シンプルなルーティングのBrowserRouterかcreateBrowserRouterで迷ったら基本的にcreateBrowserRouterを使いましょう！ 以下がサンプルコードです。 import React from 'react'; import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom'; const Parent = () => { return ( <div> <h1>Parent</h1> <Outlet /> </div> ) } const App = () => { const router = cr
Figmaは非常に優秀で、Reactのコンポーネントをよく表現できると日々感じています。 だからこそ、Reactを実装しているエンジニアとFigmaで作成しているデザイナーとで、微妙に噛み合わない…シーンが出てきます。 お互いに「あ！ここが違うのか！」ということを知っておくと、コミュニケーションが楽になるのでは？と思ったので、まとめてみます。 こんな人におすすめ Reactは実装できるが、Figmaではどんなことができるのかよく知らない Figmaでコンポーネントを作成することはできるが、どう実装されるのかよくわかっていない できるだけFigmaの設定とReactでの表現を合わせて書くようにするので、それぞれの対応表みたいな形で使ってもらえると嬉しいです。 プロパティ・Props編 Figma:プロパティ と React: props は同じものと考えてよい コンポーネントという単位で考え
React Conf 2024 Talks
Keynote (Day 1) Joe Savona, Mofei Zhang, Lauren Tan, Sathya Gunasekaran, Josh Story, Andrew Clark
UXデザイナーがClaude3.5で生成したReactアプリをエンジニアが修正し2時間でリリース！両者の作業と感想を語ります - Qiita
UXデザイナーがClaude3.5で生成したReactアプリをエンジニアが修正し2時間でリリース！両者の作業と感想を語りますチーム開発React感想文生成AIclaude こんにちは。KDDIアジャイル開発センターのサービスデザイナー よねみちです。 生成AIを用いたto Bプロダクトのスクラム開発や、お客様のDX・新規事業創出のきっかけとなるデザインスプリント支援などを行っています。 はじめに Claude3.5 SonnetおよびArtifact機能の公開から約半月が経ちましたが、皆さま触ってみましたでしょうか？ AIが生成したアプリやフロー図などのプレビューが見えて動かせちゃうあれです。今日時点は無料で使えますのでぜひ。 エックス等で様々なインフルエンサーが取り上げていますのでご存知の方は多いと思います。 「アプリが3分で完成！！」「エンジニア不要！！」なんて暴論は置いておくとして、
はじめに Vue3系をReactでBridgeする必要はあるのか？と思った、そこのあなた。大正解です。 筆者自身もニーズが不確かなまま執筆しています。ぜひ、箸休め程度に見て頂けると嬉しいです。 イメージ GifのようにReact(Next.js)上で、Vue3系のFormComponentを呼び出しています。 リポジトリ Vue Next.js React(Next.js)でVueComponentをBridgeする Vue componentの定義 先ほどのGifにあったFormComponentは以下のように定義しています。 特筆するようなことはありませんが、検証の為に分かりやすく姓・名に対応する更新用のcallbackを渡しています。 詳細は割愛させて頂きますが、onamae-formという名前でnpm packageとしてライブラリ化を行います。 <script setup lan
State of React 2023
React has been around for 11 years, which seems hard to even grasp when you look at the current pace of web development. The reason why we're still talking about React today is that it's somehow been able to keep up, always evolving to meet the challenges thrown at it by its users. In fact, not content with merely keeping up, React is even leading the way on new innovative patterns such as Server
React npm ライブラリ/パッケージの作成入門からnpm公開まで（RollupとTypeScript編） こんにちは、皆さん！今日は、RollupとTypeScriptを使用してReactのnpmパッケージを作成し、exampleディレクトリで動作確認する方法について詳しく説明します。この記事では、初心者でも分かりやすいようにステップバイステップで進めていきます。さっそく始めましょう！ React npm ライブラリ/パッケージの作成入門からnpm公開まで（RollupとTypeScript編） 作ったもの なぜ自作のライブラリを作ったか 1. 前提条件 必要なツール 2. プロジェクトのセットアップ ライブラリにはどのようにパッケージするの？（npm rollupもしくはnpm pack？） npm packとは rollupとは 使い方によって用途は分かれる 3. ディレクトリ構
オブジェクト指向を取り入れると 『可読性』『拡張性』『汎用性(=ひいては保守性)』 の三大柱(自称)が担保され、現場でドヤれる メソッド名やメンバ変数名が1~2単語で済む #ポリモーフィズム 主語.動詞(補語 | 目的語) S+V+C、S+V+O の形になる 例1: $(A).appendTo(B) 例2: user.name: string 例3: user.birthday: Date // 2021/01/02 例4: user.getAge(): number // ${3}歳 wonderful!! ツリー状のオブジェクト 例5: user.posts[n].likes[n].createdBy: User Aの投稿にイイネしたBさん 例6: user.posts[n].comments[n].likes.length コメントにイイネされた数 例7: user.posts[n]
State of React 2023
React has been around for 11 years, which seems hard to even grasp when you look at the current pace of web development. The reason why we're still talking about React today is that it's somehow been able to keep up, always evolving to meet the challenges thrown at it by its users. In fact, not content with merely keeping up, React is even leading the way on new innovative patterns such as Server
実は 学校課題の要件を見間違えており、使用するバックエンドが Django ではなく Flask だったため書き直しました😇😇😇😇😇 Django版はこちら はじめに みなさん、マイクロサービスに疲れていませんか？ バックエンドにFlask, Laravelをたてているのに、フロントエンドで別途Next.js(Node.js)をたてているのが意味わからん モダンにWebサービスをたてたいだけなのに、なぜAPIを解放しないといけないのか [Flask React アプリ構築] [検索] 単純にバックエンドはFlask, フロントエンドにReactを使いたい、それだけなのに、こんな複雑な構成にしないといけないの...？ 今回ご紹介するモジュラモノリスなアーキテクチャでは、以下のようにサクッとWebサービスを構築できます。 from flask import Flask from fl
Reactで再帰的なコンポーネントを作ってみた
はじめに こんにちは！😄 社内でTypeChallengeを元に勉強会をしているのですが、再帰的に型づけする問題に取り組んでいると、ふとこんなことを思いました。(ちなみに問題はこれです。) 「再帰的に型づけしたデータを使って何か作ってみたいなあ。そういえば、再帰的なコンポーネントも実装したことないな…作るか！🔥」 一見複雑そうに思える再帰的なコンポーネントですが、実装してみると意外と単純な構造であることが分かり、そこでの学びを記事にしましたのでよければ見ていってください！ 実装編 今回はシンプルにツリー構造のデータをリストとして出すような簡単なコンポーネントを作成します。完成系は以下になります。 データに型をつける まず、ツリー構造のデータに対して型づけを行います。以下のようにTree型を定義します。 ポイントとなるのはTreeのプロパティであるbranchの型はTree[]であること
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2024年最新版】0からReactを勉強するならこのロードマップに従え！ - Qiita
ミニマムな React Web アプリケーションの技術スタックを大公開！ - inSmartBank
React 19によって状態管理はどのように変わるのか
How Airbnb Smoothly Upgrades React
エンジニア・デザイナーに知ってもらいたいFigmaとReactの違い
Vue3系をReactにBridgeしたいと思ったそこのあなたへ
React npm ライブラリ/パッケージの作成入門からnpm公開まで - ロカオプ技術ブログ
Reactでオブジェクト指向やってみる #状態管理ライブラリ一切不要
Flask + Inertia + Vite + React で作る Web アプリの新たな選択肢