技術推進室の色川です。 ここ一年くらいランキングシェアというキュレーションメディアのフロントエンドを担当しています。その記事作成画面をReactで実装しており、先日アイテムの移動をDrag&Dropで行えるようにしたのですが、動きはガクガク、ブラウザは途中で固まる、という有様で、パフォーマンスチューニングを余儀なくされたのでその内容を紹介します。 ［ランキングシェアの記事作成画面］ ※画面は開発中のものです。（動画にしたら？との意見があったのですが、Windowsで画面を録画する方法が分からず…） Reactのパフォーマンス改善の基本Reactはコンポーネントをツリーとして管理していて、あるコンポーネントの更新が必要になるとそのコンポーネントをルートとするサブツリー全体を更新します。 引用元：Reactive, Component-based UIs with React | Consta
As we're writing the Fullstack React book, we get a lot of questions about how to build large applications with React and how to integrate external APIs. tl;dr - This post will guide you through building a full React app, even with little to no experience in the framework. We're going build a Yelp clone in React You can get the completed code here Try the demo here Download the first chapter of ou
React.jsとFlux - Qiita
今回はReact.jsとも関わりがあるFluxについて紹介したいと思います。 Flux is Architecture ↑の図はfacebookのfluxのリポジトリにあるものですが、Fluxは上記のようなArchitectureの名称です。facebook/fluxのrepositoryに行ってもらうとわかるのですが、実装としてはDispatcherの部分があるだけです。 Unidirectional data flow 先ほどの図を見てもらうとわかる通り、Fluxではアプリケーションの複雑さをなくすため、データの流れを一方向にします。 そのため全体の処理の流れはわかりやすくなりますが、Angular.jsなどで書くときに比べて冗長に感じることもあるかと思います。 しかしながら単純なデータの流れを作ることで、ある程度の規模になってアプリケーションが複雑化してもデータやイベントの流れがスパ
React v16 changes
Reactのv16がリリースされたので、変更点などを整理したいと思います。 https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/ React v16やReact Fiberについては、下記で書いたりもしているのでそちらも参考にしてみてください。 React Fiber現状確認 Capability of React Fiber React v16 and beyond React Fiber ReactはなぜFiberで書き直されたのか？Reactの課題と将来像を探
Amplify + Nx (React + Typescript) で爆速で monorepo 環境を構築する - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー9 日目の記事です。 8 日目は ポエマー masaru 氏による 少女に何が起ったか ～少女が他人のウェブサーバー構成を知るまでにやったいくつかのこと、そしてその結末～ でした。 ただのポエムかと思いきやかなりコアなセキュリティの話だったのでとても勉強になりました。 テックタッチのフロントエンドエンジニアの taka です。 最近テックタッチでは、品質を更に向上させるため、また今後開発を加速できるようにするためにコードを一新しました。 そこで Amplify と Nx を使って monorepo の開発環境を構築したので、その手順を記しておこうと思います。 ざっくり言うとこれらを使うことで、 monorepo の環境を簡単にセットアップしたい React + Typescript で開発したい ESLint や Jest などの開発ツールを使いた
Full-[Watch]! Power Season 6 Episode 12 Online Free 123Movies
Introduction Welcome to the third installment of the Learning React series. Today we will be learning about how Facebook’s Flux Architecture works, and how to use it in your own projects! If you haven’t already, I strongly recommend you check out the first two installments in this series, Getting Started & Concepts and Building a Real-Time Twitter Stream with Node and React. They aren’t a hard pre
![Full-[Watch]! Power Season 6 Episode 12 Online Free 123Movies](https://cdn-ak-scissors.b.st-hatena.com/image/square/838b975ebab624d574a4e4e56adfe89c95e02cd5/height=288;version=1;width=512/https%3A%2F%2Fwww.digitalocean.com%2F_next%2Fstatic%2Fmedia%2Fintro-to-cloud.d49bc5f7.jpeg)
This blog site has been archived. Go to react.dev/blog to see the recent posts. Today we are releasing React 15.4.0. We didn’t announce the previous minor releases on the blog because most of the changes were bug fixes. However, 15.4.0 is a special release, and we would like to highlight a few notable changes in it. Separating React and React DOM More than a year ago, we started separating React a
こんにちは！Amplifyの改善を行っている @watilde です。この記事は AWS Amplify Advent Calendar 2021 と Figma Advent Calendar 2021 の 25 日目の記事です。 Amplify Studio の発表 2021年の12月3日に開催された re:Invent にて Amplify Studio が発表されました。新機能としてFigmaでデザインしたコンポーネントを Amplify Studio にてデータベース内のテーブルのスキーマと紐付けし、可読性の高い React のコンポーネントとして出力する “Figma to code” が追加されました。 https://docs.amplify.aws/console/ 本記事では、amplifyコマンドがどのように Figma, Amplify Studio で設定したコン
TypeScript+webpack+Hypernova on RailsでSSRするときの設定ファイル - Bit Journey's Tech Blog
「Roppongi.rb #3 で「RailsエンジニアがReactを始めてSSRとReduxを導入するまで」という発表を行いました - Bit Journey's Tech Blog」あたりの話のなかで触れている、KibelaにおけるJSのビルド環境に関係する設定ファイルなどを公開します。 現在もこのときと基本的な構成は変わっておらず、すでに数ヶ月安定して運用できています。 環境 Rails v5.1 TypeScript v2.5 webpack v3.6 Hypernova*1 webpackerは不使用で、webpack-rails*2を使用 ディレクトリ構成 client/ - フロントエンド用TSコード（.ts, .tsx,.json） spec/javascripts/* - テスト用TSコード なおプロダクション用フロントエンドコードは 100% TypeScript です
React 16 β版 – 公式ドキュメント日本語訳
2017年7月24日に待望のReact 16のβ版（ベータ版）が公開テスト用として公開されました🎉。それに合わせてReactのGitHubのリポジトリでも専用のissue（#10249）が立てられました。そこにβ版のリリース内容について詳しい記述がありましたので、日本語に訳してみました。来たるReact 16の正式リリースに備えて、参考にしてもらえればと思います。 Getting Started: はじめにInstallation Instructions: インストール手順The beta has been published to NPM with the tag “next”. Regular NPM installs will continue to use the 15.6 release. To install the beta use: β版は”next”タグがついた状態で
この記事はVirtual DOMアドベントカレンダーの5日目の記事です。 Virtual DOMといえばReact。 ですが、ReactはMVCで言うViewの部分だけを担当するのであって、MVCフレームワーク的なものではありません。 なので、Model等、他の部分は自前でどうにかする必要があります。 そこで、facebookの中の人は、Reactを中心にしたアプリケーション構築パターンとしてFluxってのを提唱してます。 https://facebook.github.io/flux/ Fluxってどんな Flux、ざっくり言うと、 データは1方向に流れる イベントをActionとして定義 ロジック、データはStoreに全部入れる というアーキテクチャ。 図で言うと、MVCでは ↑みたいになるとM,C間の処理の流れムズかったのが、 Fluxだと という風にデータの流れが整理できて嬉しいで
It is blazing fast (it takes 50-100ms to re-bundle) which makes it extremely convenient for developers. It requires zero configuration to bundle such monsters like babel-core. FuseBox loves typescript, and does not require any additional configuration. It will compile and bundle your code within a fraction of a second, yet offering a comprehensive loader API. It is packed with features, and unfold
Testing is an important part of the development cycle. There is a name for code without tests: legacy code. When I first started learning React and JavaScript it was overwhelming to say the least. If you’re new to the JS/React community you’re probably feeling super overwhelmed as well. Thinking things like: Which build tool should I use? Which testing framework is right? What flux pattern should
Testing React Components with Enzyme and Mocha - Semaphore
Full-stack web developer, passionate about solving engineering problems of all kinds with elegant solutions that deliver incredible user experiences. Some thoughts & some code @ ifelse.io. @markthethomas everywhere else. Introduction React has become an increasingly popular and widely-used JavaScript application tool for developing web applications. Popular frameworks like Angular.js, Ember.js, an
What the flux?
The JavaScript Developer's Guide to Ubuntu on Windows 11 with WSL 6 months ago I've been really diving into wrapping my brain around React.js and Flux architecture the last couple of weeks. Not going to lie, I've been avoiding it. When I look at the docs and blog posts about Flux, and React, my brain goes... Things like componentDidMount, and Dispatchers, and ActionCreators, etc etc initially scar
Points of Interest This is a complete rewrite of React but we expect it to work with your existing code. If you fixed all deprecation warnings introduced in 15.x, the 16 beta should work for you. Third party libraries that relied on deprecated or unsupported APIs may need updates to work correctly with this new release. Now is a good time to file issues against libraries that have problems. (And t
webpackでReact/Reduxを本番環境用にビルド(production build)する - dackdive's blog
はじめに React に限らず、JavaScript を使ってると本番環境用のビルド（以後、production build）として圧縮や難読化を行う必要があります。 webpack にはそのためのプラグインとして UglifyJsPlugin があるのは知っていましたが、 単純にこのプラグインを適用しただけだとブラウザで以下のような warnings が出ていることがわかりました。 Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is
Update: I posted this as a Gist if the Qiita stylesheet bothers you: https://gist.github.com/justinwoo/08f9f8fcdcf865025f18 For almost a year now, I've been using this "flux" architecture to organize my React applications and to work on other people's projects, and its popularity has grown quite a lot, to the point where it shows up on job listings for React and a lot of people get confused about
@wakamshaさんの AltJS, AltCSS 課題を webpack, SCSS, TypeScript, React でやってみた | DevelopersIO
@wakamshaさんの AltJS, AltCSS 課題を webpack, SCSS, TypeScript, React でやってみた はじめに こんにちは、すわ＠秋葉原オフィスです。先日 Naoki YAMADA (@wakamsha) さんがSpeakerdeckで公開したAltJS/AltCSSに関するスライドを大変興味深く読ませてもらいました。 このスライドは社内の新卒社員向け研修の内容とのことで、最後に「課題」があったため、今回私なりに回答してみました。 …といったような、植木が執筆したブログに触発され、私が最近業務で使っている技術を織り交ぜた別解を作ってみました。 お題 JavaScript, CSS いずれも何かしらのプリプロセッサを使用すること（※HTMLは任意） ローカルサーバーの起動 ファイルを変更したら自動的にビルド処理が実行 コンテンツは「Hello, wor
React v16.0リリースノート【日本語翻訳】
2017年9月26日（火）にReactの最新バージョンとなるReact v16がリリースされました。前回のv15のリリースが2016年4月7日だったので、実に1年半ぶりのメジャーバージョンアップとなります。「Fiber」として開発されていた新しいコアアーキテクチャーが採用されたことでしょう。v16ではそれほどFiberによる劇的な変化はないようですが、今後Reactの機能を強化していく上でFiberは大きな力を発揮するとのことです。今回、Reactの公式ブログのReact v16のリリースについて書かれた投稿（React v16.0 – React Blog）を日本語に訳してみました。v15から大きな変更はありませんが、それなりに変更点はあります。当記事でぜひ確認してみてください。 React v16.0September 26, 2017 by Andrew Clark We’re ex
React 16 Umbrella ☂️ (and 15.5) · Issue #8854 · facebook/react
This list might change, just putting it out there as the first draft. Posting these together since they're related, and we don't plan more 15.x releases after 15.5 anyway. To put these changes in context, we have a few goals: (Click to show) For the past several months, we have been working on a rewrite of React codenamed “Fiber”. Initially, it won’t affect public API, but it brings several new fe
はじめに Webpackでビルドしてできあがったバンドルが、気付いたらサイズが超でかいよ！！ なんて時の犯人探しに役立つかもしれないTips。 webpack --display-modules で分析 webpackコマンドの実行時に--display-modulesオプションを付けると、インクルードしたnode_modulesやbower_components配下のモジュールについても詳細情報がわらわらと出力されるようになる。ここにサイズも出力されている。 $ webpack --display-modules Hash: 20265560bd210ea64e82 Version: webpack 1.12.12 Time: 7110ms Asset Size Chunks Chunk Names bundle.js 2.76 MB 0 [emitted] main [0] multi
TypeScript + TSLint + Prettier + Webpack環境を作成したときのメモ - Qiita
babelでいう.babelrcであるところのtsconfig.jsonで、コンパイルオプションを指定できます。 使っているTypeScriptのバージョンは2.8.3ですが、以下の記事がとても参考になりました。 tsconfig.json で指定できる全 compilerOptions をまとめた (TypeScript v2.5 版) 最終的に、tsconfig.jsonは以下のように設定しました。 { "compilerOptions": { "outDir": "./public/", "module": "commonjs", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "allowUnreachableCode": false, "a
Facebook has recently presented a new way to compose applications, an application architecture they named Flux. They reported that as modern web applications grow in complexity, this model eases the maintenance and the cognitive load required to develop them. I jumped in excitement (it’s true!) as I immediately saw the beauty of the model. But I wanted to understand it and confirm my intuition and
ReactでSpinnerを使いたい reactでspinnerのような定番のコンポーネントが必要になったときは探せば誰かが作ったものが見つかることがあるので、それをそのまま利用したり参考にして自分で作ったりすると良いです。 react spinnerというようなワードで検索すればいろいろと見つかります。 今回はspinnerの基本部分はspin.jsをReact Component化したreact-loaderを使うことにしました。 react-loaderにはOverlayの機能がなかったので機能を追加したComponentを作ってみました。 Live demoとcode code: https://github.com/enu-kuro/React-Loader-Overlay-Sample Live demo: http://enu-kuro.github.io/React-Loa
Reactコンポーネントのテスト 最近コンポーネントのテストを試していて、とりあえずFBが作っているJestというフレームワークを試していました。一通り理解してテストを完了した、というタイミングでバージョナップされていました。 う～ん日進月歩 概要 必要なものは、Reactコンポーネント、対応するテストプログラム、スナップショットファイルです。 Reactコンポーネントはテスト対象です。説明することもないですね。 そして、今まではテストプログラムで、ごにょごにょと色々していたのですが、スナップショットテストだと基本的にtoMatchSnapshot()を実行していくだけです。 楽だ～ そして、今回の肝となるスナップショットファイルですが、最終的に出力されるHTMLをそのまま記述します。renderメソッドのreturn値を記述していく感じですね。そして、キーとしてSuite(describ
JSer.info #342 - React 16 β1が公開されました。 React 16 beta · Issue #10294 · facebook/react @nextタグを指定することでインストールできます。 # Yarn yarn add react@next react-dom@next # Npm npm install --save react@next react-dom@next ES2015のMap/Setに依存してるのでpolyfillが必要となっています。 また、Fiberと呼ばれていたコア部分を書き直しも含まれていますが、基本的にはv15との互換モードで動作します。 React Fiber現状確認 - blog.koba04.com ReactDOMNodeStreamというStreamベースサーバサイドレンダリングのサポートや componentDidCa
by Michael Shilman Image credit: Simon LiuReact Unit Testing with Mocha and EnzymeA step-by-step tutorial for UI testing in Meteor.This is a short tutorial to help you test your React UI components. It presents a simple UI testing pattern I contributed to the Meteor Guide (?) and Todos sample app (?). You should read this if you: Are using React to develop your appsWant an easy way to automaticall
React & TypeScriptのプロジェクト作成 | TypeScript Deep Dive 日本語版
コピー{ "compilerOptions": { "sourceMap": true, "module": "commonjs", "esModuleInterop": true, "resolveJsonModule": true, "experimentalDecorators": true, "target": "es5", "jsx": "react", "lib": [ "dom", "es6" ] }, "include": [ "src" ], "compileOnSave": false } コピー{ "name": "react-typescript", "version": "0.0.0", "license": "MIT", "repository": { "type": "git", "url": "https://github.com/basarat/react
JSer.info #351 - React 16.0が正式リリースされました。 React v16.0 - React Blog React v16 changes - blog.koba04.com 15.6.2と共にMITライセンスへ変更されています。 Relicensing React, Jest, Flow, and Immutable.js | Engineering Blog | Facebook Code APIの基本的な互換は持ちつつコアを書きなおされたバージョンとなります。 renderがフラグメントや文字列を返せるように、コンポーネントのエラーハンドリングの改善、ReactDOM.createPortalの追加、SSRの改善など。 SSRの改善については次の記事で解説されています。 What’s New With Server-Side Rendering in Re
React Native for Windows を試してみたので備忘録もかねて手順をメモしてみました。 作業開始時点の私の環境は以下のようになります。 Windows 10 Pro 1909 (設定アプリから開発者モードに変更してください） Visual Studio 2019 16.4.2 ユニバーサル Windows プラットフォームワークロードの C++(v141) ユニバーサル Windows プラットフォーム ツール。デフォルトでチェックが入っていないので入れる。142 じゃなくて 141 なので注意 個別のコンポーネントから MSVC v141 - VS 2017 C++ ARM ビルドツール(v14.16)、MSVC v141 - VS 2017 C++ x64/x86 ビルド ツール (v14/16) の 2 つを入れる Node.js v12.9.1 (注意：現時点で最
I recently listened to a podcast where the creator of React Router, Michael Jackson mentioned a new pattern with hooks, returning a component. At first, I couldn't grasp how this would differ from just calling a render function or another React component, and it seemed to go against the whole "Components for UI, hooks for behavior" mantra. But I think I've stumbled on a use case. By the end of the
Last month I talked about one of my favorite tools for JavaScript on the front end, Browserify, which allows you to create modular code for the browser using CommonJS modules and npm. It does this by combining the dependencies into an all-in-one bundle. In development, typically you will watch your JavaScript files for changes and then recompile the bundle. If you’re including some large dependenc
おかぴのレシピ || react.js
【画像アップローダーの実装】 【関連ファイル】rj_id09 index.htmlにformタグを仕込み、入れ子にしたdivタグからmain.jsを呼び出し。 main.jsの子であるInput.react.jsで、画像アップローダー、Submitボタン(Click me!という画像ボタン)、アップした画像ファイル名の表示などを実装。 アップロードする画像をローカルから選ぶと、画像ファイル名がマウントされ、localStorage.setItemで文字列に変換。 Submitボタンを押すと、EventEmitterでイベントが発行され、画像ファイル名がブラウザ表示されます。同時に、POST送信され、サーバー上のphpファイルで値を返します。 当初、formタグをInput.react.jsのrenderに仕込んでいました。Submitボタンを押下すると、phpは正常に呼び出されるものの、値
既存のサイトにモダンな感じで React.js + TypeScript を導入する とりあえずReactをはじめるたい時はCreateReactAppとか使うと簡単に始められるのですが、基本SPA用なので、すでにあるサイトに導入とかバックエンドフレームワークに導入とか難しかったりします。 そこでWebpackを使用して既存のサイトにReactを導入する方法をご紹介します。 投稿日2020年08月26日 更新日2020年09月08日 前提条件 予めnode.jsをインストールしておいてください。 npmの初期化とモジュールのインストール 適当なプロジェクトディレクトリを作ったらnpm initでpackage.jsonを作ります。 $ npm init -y 次にWebpack関係のモジュールからインストール $ npm i -D webpack webpack-cli typescrip
webpackで、JavaScriptを個々のファイルのままminifyする - CLOVER🍀
あんまりこんなことやらないかもしれませんが、webpackでJavaScriptを結合するのではなく、個々のファイルの単位のままminifyだけしてみようと思いまして。 で、こちらを参考にしてやってみました。 Wildcards in entry points · Issue #370 · webpack/webpack · GitHub 別に、このissueの中でこの目的のことを直接やっているわけではないですが。 globを使う それで、どうするかというわけですが、globを使います。 インストール。 $ npm install --save-dev glob ソースコードが「src/scripts」配下にあったとして $ find src -type f src/scripts/sub/sub2.js src/scripts/sub/sub1.js src/scripts/sub/su
パッケージはBundleを配布しない ニコニコ生放送 PCのHTML5プレイヤーは、基本的にはTypeScriptで書かれていてビルドにはwebpack + tsloaderという構造になっています。 webpackでビルドされているのでWebpack Bundle Analyzerを使い、ビルドしたパッケージの依存をビジュアライズして調査しました。 Webpack Bundle Analyzer 実際の改善前のbundleしたファイル構造は次のような形でした。 @nicoliveから始まるものは社内のnpmレジストリに公開されている社内モジュールです。 この社内モジュールがlib/index.jsという大きな1つファイルしか持っていないことがわかります。 これは、各パッケージがbundle済みのファイルをlib/index.jsとして配布するようになっていたためです。また、そのbundl
Rename react/lib/* to react/private/* · Issue #6460 · facebook/react
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
TypeScriptの4つめ。 Lintができたらテストもちゃんとやっとく。最近覚えたJestそしてEnzymeでやります。 $ yarn add jest enzyme react-test-renderer ts-jest @types/jest -D jestとenzymeを加える他に、@types/jestが必須です。必須ではないですが@types/enzymeも加えておいたほうが今後にはより良いですがとりあえず加えなくても動きます。react-test-rendererはenzymeのpeerDependenciesなため。 // package.jsonの一部 "scripts": { "test": "jest" }, "jest": { "moduleFileExtensions": ["ts", "tsx", "js"], "transform": { "^.+\\.(t
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactを使ったプロダクトのパフォーマンスを改善した話 | GMOメディア エンジニアブログ
Fullstack React: React Tutorial: Cloning Yelp
React v15.4.0 – React Blog
Amplify StudioがどのようにFigmaデータをReact componentに変換しているのか
Fluxなフレームワーク、Fluxxorの紹介 - マルシテイア
fuse-box で JS を bundle する + HMR - Qiita
Test Driven React Tutorial
React 16 RC · Issue #10294 · facebook/react
Using RxJS for data flow instead of Flux with React - Qiita
Webpackバンドルを占めるサイズがでかい奴を探す方法 - Qiita
Flux step by step - Work Life by Atlassian
ReactでOverlay Spinner Componentを作る - Qiita
Jest 14.0のSnapshot Testingという新しい機能 - Qiita
2017-07-31のJS: React 16.0β、WebCrypto API、The JavaScript Way book
React Unit Testing with Mocha and Enzyme
2017-10-02のJS: React 16.0、Firefox 56、画像最適化 - JSer.info
React Native for Windows を試してみよう。そして型も手に入れよう。
New React Hooks Pattern? Return a Component
Speedy Browserifying with Multiple Bundles
既存のサイトにモダンな感じで React.js + TypeScript を導入する
パッケージはBundleを配布しない · Webフロントエンド パフォーマンス改善ハンドブック
TypeScriptでもJest+Enzyme - まさたか日記