[B! react] auientのブックマーク

巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32

(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう）そもそも、create-react-app は今は更新されてないので create-vite-app を使うべきフレームワークあり or フレームワークなし【フレームワークあり】

auient 2024/05/05

リンク

Reactを使うとなぜjQueryが要らなくなるのか - Qiita

はじめに React︵通称 React.js1︶を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。﹁jQuery くらいしか知らない﹂くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。以降では ES2015 (ES6) の文法︵アロー関数とか︶を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。以下の説明中、このアイコンで表すのは︵2023 年現在から見た︶﹃昔話﹄です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事

auient 2023/06/22

「註: お陰様でよく読まれる記事になっていますので、定期的に加筆修正やアップデートを行っています。最後の更新は 2023 年 6 月です」尊い

リンク

やさしくはじめるRemixとWeb

この資料は、2023年4月23日に開催された﹁春のJavaScript祭りOnline 2023﹂にて発表した資料になります。 https://javascript-fes.doorkeeper.jp/events/154047 Remixとは、2021年にバージョン1.0が登場したフルスタックWebフレームワークです。RemixはReact Routerを開発していたチームが主導で開発を行っています。RemixはSPAの次のアーキテクチャであるPESPAに沿って開発を行うことができる素晴らしいフレームワークです。今回の発表ではRemixに備わっている機能の紹介、そして誕生することになった時代的背景などを含めて簡単に紹介します。そして、Remix CLIに搭載されているRemix Stacksという機能を使って、実際にプロジェクトを作成しデプロイするまでの過程を含めて、時間の許す範囲で

auient 2023/04/24

リンク

React＋Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計｜ハイクラス転職・求人情報サイト AMBI（アンビ）

React＋Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計遷移なく表示コンテンツを変更できるシングルページアプリケーションでは、ページの状態管理が重要になります。現在はReactによるUI構築とReduxによる状態管理を選択しているChatworkは、jQueryなどの技術的負債と共存しながら、フロントエンド設計の見直しを重ねてきました。クライアントサイド・アーキテクトの火村智彦︵@eielh︶さんと、エンジニア採用広報の高瀬和之︵@guvalif︶さんによる解説です。クラウド型ビジネスチャットツール﹁Chatwork﹂は、2011年3月にローンチされて10年以上にわたり開発を継続してきました。このように長く続くサービスがユーザーに価値を提供し続けるには、時間経過による変化に適応するため設計の見直しが必要になります。しかし、設計を

auient 2022/10/22

リンク

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

auient 2022/09/01

react
ui

リンク

【LINE証券 FrontEnd】コンポーネントをカスタムフックで提供してみた

こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。以前の記事でご紹介した通り、LINE証券ではReactを使用しています。React 16.8で導入されたフックの機能は非常に革新的で、特にカスタムフックの概念によってReactにおけるコンポーネント設計は大きく様変わりしました。我々もフック時代のコンポーネント設計を試行錯誤しており、その結果はLINE証券にも反映されています。この記事では、その中でも我々が最近ハマっている﹁カスタムフックを通じてコンポーネントを提供する﹂という、いわば“render hooks”とも言うべき設計パターンを紹介します。今回のお題今回は、﹁いくつかのチェックボックスがあり、全部チェックを入れると次に進める﹂という典型的なパターンを題材にしましょう。次の画像では3つのチェックボックスと﹁次へ﹂ボタンが並んでおり

auient 2022/05/02

react

リンク

ウェブフロントエンドの設計力を高めるためにアプリケーションの構造を捉えてみる話 - Chatwork Creator's Note

こんにちはー。フロントエンド開発部の火村(ひむら/id:eiel)です。前回までは id:cw-himura で記事を書いていましたが、個人アカウントに切り替わりました。よろしくおねがいします。以前はサーバーサイド開発部に所属していましたが、2019年6月ぐらいからフロントエンドチームにヘルプとして無期限レンタル移籍中です。主な担当している業務は﹁難しいバグ対応﹂と﹁これからChatworkのウェブフロントエンドをどうするかを考える﹂です。昨日は期待の新人であるレオくんの入社して3ヶ月の熱烈な想いでした。アツいです。さて、今回のお題は﹁レガシーフロントエンド脱却への挑戦﹂と雑に上から投げられたのですが、未来のことを考える作業をしているので書きやすいネタがありません。あってもオチがつきません。ということで、設計に役立つかもしれない話をラフに書くことにしました。アプリケーショ

auient 2020/11/07

react

リンク

Redux の利点を振り返る

readyfor_redux_study#1 READYFOR株式会社さんで開催した、Redux 勉強会第一回の資料です。

auient 2020/06/30

react

リンク

翻訳：Rich Harris「形而上学とJavaScript」に関する見解（ReactによるDOMの抽象化の不完全性について） - yuhei blog

この記事は﹁Thoughts on Rich Harris’ “Metaphysics and JavaScript”﹂の日本語訳です。Svelteのコーディングスタイルや記事として言及している講演のスライドも併せて参照しなければ理解しづらい内容です。公開にあたっては著者のJim Nielsen氏に許諾をいただいています。要旨としては、ユーザーにとってSvelteは実際のDOMとのメンタルモデルのギャップが少なく感じられるデザインであって、結果的に、Reactより理解しやすいプログラミングモデルになっているという話です。 Svelteの考案者であるRich Harris氏は、Reactのプログラミングの側面を批判する﹁形而上学とJavaScript﹂というタイトルの最近の講演のスライドを共有しました。この講演には非常に説得力があり、Reactを利用した私の経験にも当てはまるとわかりまし

auient 2020/01/26

リンク

これからはじめるReact Hooks

Creating an Effective Media Campaign and Attracting Event Sponsors

auient 2019/09/08

react

リンク

【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog

id:daido1976 です。入社してからあっという間に1年が経っていました。直近3ヶ月ほどプライベートでフロントエンド開発の勉強をしていたのですが、ここ数年で CSS の Grid や React の Hooks が新しく導入されたことなどもあり、少し古いコンテンツだと教材として役立たない1 と感じることが多かったので、本記事では私が実際にやってみた中で 2019年時点でオススメできると判断した教材や学び方を皆さんにご紹介したいと思います。はじめにやったこと JavaScript MDN の JavaScript の部分を読む & 手を動かす JavaScript Primer を読む YouTube 動画で Promise を学ぶデバッグ方法を学ぶ React React 公式のチュートリアルを2周する egghead.io の動画で Redux を学ぶヘルシンキ大学の

auient 2019/09/04

リンク

React for Vue developers

sebdd thoughts and inspiration on designing, programming, and writing for the web For the past three years, I've been using both React and Vue in different projects, ranging from smaller websites to large scale apps. Last month I wrote a post about why I prefer React over Vue. Shortly after I joined Adam Wathan on Full Stack Radio to talk about React from a Vue developer's perspective. We covered

auient 2019/06/03

リンク

React+Storybook ことはじめ

React.js meetup #7 (LT会)の資料です。 https://reactjs-meetup.connpass.com/event/130682/

auient 2019/05/28

リンク

Recharts

Recharts - Re-designed charting library built with React and D3.

auient 2019/05/14

リンク

正真正銘のReactだけの不純物なしでReact入門

Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。それでもやっぱり﹁ReactやるならReactだけやりたい。他はどうでもいい﹂という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部

auient 2019/02/20

リンク

React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita

Facebook が開発したUI ライブラリ旧来の DOM 操作による状態管理を props や state で抽象化パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート︵状態︶管理を、ルール︵哲学︶に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ︵*個人的解釈です︶もともとはFlux と言う、データの流れを一方向に制限することで、流れを追いやすくするという、オブザーバーパターンの亜種から、さらに転じた考え方。 Redux と言う名前は﹁Reducer﹂ + ﹁Flux﹂で﹁Redux﹂だそうです。array.reduce と同じような役割を Reducer が担います。詳しく知りたい方は作者の発表をご覧ください Dan Abramov

auient 2018/02/08

リンク

【翻訳】あなたが求めていたリアクティブプログラミング入門 - ninjinkun's diary

original: The introduction to Reactive Programming you've been missing (by @andrestaltz) (translated by @ninjinkun, reviewed by @ma0e) あなたはリアクティブプログラミングと呼ばれる新しい方法が気になっている。勉強するのは大変で、良い教材がないのでさらに難しい。私が勉強を始めたときは、まずチュートリアルを探した。見つけたのは一握りの実践的なガイドだけ、しかもそれらは表面をなぞっているだけで、リアクティブプログラミングのアーキテクチャ全体像を構築しようとしてはいなかった。ある関数を理解するのに、ライブラリのドキュメントは役に立たないことがある。これを見て欲しい。 Rx.Observable.prototype.flatMapLatest(selector,

auient 2017/12/07

リンク

Twitterトレンド入り！「#React反省会」登壇資料一挙公開！ | Wantedly Engineer Blog

先日、5月10日(水)に行われた、Reactを運用する上で得た知見や失敗を共有する「React反省会」に登壇いただいた方々の資料を一挙大公開！ Twitterのトレンドにもランクインするほど大盛況だったイベントの登壇資料、見逃すと損するかも...? 1人目：天野祐介氏　サイボウズ株式会社グローバル開発本部 kintone開発チームリーダー 2人目：石井光次郎氏　株式会社マネーフォワード UI テクノロジー部 3人目：鈴木健太氏　株式会社クラウドワークスプロダクトDiv クライアントサポートG 4人目：外村和仁氏　株式会社クックパッドサービス開発部兼人事部 5人目：泉将之　ウォンテッドリー株式会社エンジニア（インターン） 6人目：森脇健人　ウォンテッドリー株式会社エンジニア　 Wantedly feedチームリーダー 7人目：zuckey氏(飛び込みLT枠 8人目：na

auient 2017/05/23

react

リンク

Reactで学ぶ！いまどきのWeb開発

FRONTEND CONFERENCE 2017のハンズオン用資料です。教科書はこちら https://github.com/fand/react-hands-on

auient 2017/03/20

リンク

React基礎 · GitBook

React基礎レッスン Lesson 01: 環境構築 Lesson 02: ES2015について Lesson 03: 関数型の書き方 Lesson 04: 初めてのコンポーネント Lesson 05: 初めてのinline style Lesson 06: 初めてのprops Lesson 07: 配列からの展開 Lesson 08: フォームの定義 Lesson 09: フォームによるデータ追加 Lesson 10: 総合課題「目的特化型電卓を作ってみよう」おまけ Appendix 01: 様々なコンポーネントの書き方 Appendix 02: コンポーネントのstate Appendix 03: コンポーネントのライフサイクルメソッド Appendix 04: JSX vs. createElement Appendix 05: PropTypes Appendix 06: p

auient 2017/02/13

リンク

はてなブックマーク

タグ

関連タグで絞り込む (14)

reactに関するauientのブックマーク (23)

お知らせ

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

今週のはてなブックマーク数ランキング（2024年6月第4週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス