Reactを使ってプロダクト開発している開発者だけでなく、マネージャにも読んでほしい「Fluent React」 - ROUTE06 Tech Blog
チームでReactを使って開発していると、コードレビューをする際に、「この書き方はしない方がいいが、それを説明するには800文字くらい必要。図も描きたい。でもそれらを準備する時間はない。」ということが度々ありました。 また、フレームワークやライブラリの技術選定をする際、マネージャに「どうして技術選定が必要なのか」を説明する必要がありました。ROUTE06のマネージャはエンジニアリングへの造詣が深い方が多いので、対立構造になることはありませんが、説明するためには1000文字くらい必要で、やはり図も描きたい。時間はない。と同じ気持ちになることがありました。 参考情報として紹介できる情報がないか探してみると、「とりあえずこうすればOK」というベストプラクティスについては検索エンジンやSNSですぐに見つかります。ただ、どうしてその方法がベストプラクティスなのか、仕組みや原理を説明している情報は少な
React NativeでAWS Amplifyを使わずS3にファイルアップロードしたい - マルチパートアップロード編 - - Sweet Escape
はじめに マルチパートアップロードをするには さっそく実装する まとめ ソースコード はじめに こちらの投稿の続きにあたります。 React NativeでAWSのS3にファイルアップロードする処理を実装するにあたり、AWS Amplifyを使わずにAWS SDKを使って実装しようというものです。理由などは前回の記事に書いているのでそちらを参照してください。 前回は普通にアップロードするところまでは簡単にできるっていうところまでやったので、今回は本命のマルチパートアップロードを実装してみます。 マルチパートアップロードをするには AWS SDKを使ってマルチパートアップロードをするには、1. マルチパートアップロードの開始、 2. 各パートのアップロード、3. マルチパートアップロードの完了、という大きくわけて3つのステップが必要です。それぞれJSのAWS SDKだと、CreateMult
ReactHooksでvideoを乗りこなす
「映像プレーヤー」を作成したことはあるでしょうか？ 作成したことはなくても、おそらく日々様々なプレーヤーを利用していると思います。 HTML5で定義されるHTML Video Elementからは、メディア状態・エラー・DRM複合処理・広告再生・読み込み、などブラウザごとに多種多様なイベントが発生します。プレーヤーはこのイベントに加え、ユーザーから入力される複雑な操作も併せて処理する必要があります。UIや内部要件を実装するには、このイベント制御を適切にハンドルし、のりこなすことが必要不可欠です。 今回のセッションでは、複雑な処理をReactHooksを用いてHTML Video elementを制御する手法を、現在映像サービス「GYAO!」でプロダクションで使用されているプレーヤーを事例に、フロントエンドの観点からご紹介します。
React+Electronアプリを作ってみよう
こんにちは。前置きは抜きにすぐ作ります。 Create Application 01: create-react-app まずはcreate-react-appです。なかったらnpm install -g create-react-appしてください。 うまくいったらyarn startで起動しましょう。しましたか？うまくいってるのを確認したら即刻ジョブ止めましょう。もう二度とyarn startを実行することはありません。 02: install Some Package 以下のパッケージをインストールしてください。最新ので問題はないはずです。すべてインストール時に--dev-dependenciesを付けることを忘れないでください。まあ忘れてもいいです。 electron npm-run-all 03: setting up Electron こちらのgistを参照してください。 次に
A Complete Guide to useEffect — overreacted
You wrote a few components with Hooks. Maybe even a small app. You’re mostly satisfied. You’re comfortable with the API and picked up a few tricks along the way. You even made some custom Hooks to extract repetitive logic (300 lines gone!) and showed it off to your colleagues. “Great job”, they said. But sometimes when you useEffect, the pieces don’t quite fit together. You have a nagging feeling
4 Examples of the useState Hook
There are a bunch of React hooks, but useState is the workhorse. It’s the one you’ll use most often. Here we’ll cover useState with simple types, as well as useState with objects and arrays. We’ll also see a couple ways of storing multiple values. FYI if you’re brand new to React, I suggest pausing here and reading my React tutorial first – it covers all the important basics – and then come back h
Call child method from parent
I have two components: Parent component Child component I was trying to call Child's method from Parent, I tried this way but couldn't get a result: class Parent extends Component { render() { return ( <Child> <button onClick={Child.getAlert()}>Click</button> </Child> ); } } class Child extends Component { getAlert() { alert('clicked'); } render() { return ( <h1 ref="hello">Hello</h1> ); } } Is th
ReactをTypeScriptで書く3: React編 | dkrkのブログ
メモです。 そして前回からの続きです。 追記: 2019/07/16 全体的に項目を修正しました。 Function Component Function Componentの基本形はReact.FC型を使用する。 ジェネリクスにpropsの型を指定することができる。 PropTypesなどで指定していたpropsの型指定が、型エイリアスに移っただけ。 import * as React from 'react'; // Introのpropsのtype aliasを定義 type ContentProps = { title: string; } // React.FC型を用いる // ジェネリクスにIntroPropsを指定 const Content: React.FC<ContentProps> = props => { return ( <> <h2>{props.title}<
React + TypeScriptのESLintルールをカスタマイズしたり、Airbnbのやつを導入するぞ。 | Ginpen.com
何もしないでそのままでも十分かもしれない。 先にまとめ 最近の react-scripts は ESLint を含んでいるので別途インストール不要 設定は .eslintrc.js を作成して extends: ['react-app'] する Airbnb のルール設定を使う場合はもうちょい頑張る 元々 create-react-app してない場合も同じ Airbnb ルール利用時の手順概要 ESLint 初期化 ESLint の設定を更新 コードを recommended な状態へ対応 想定環境 Node.js v10.16 react-scripts v3.1 TypeScript v3.5 ESLint v6.1 @typescript-eslint/eslint-plugin v1.13 React アプリの準備 create-react-app でテンプレートから作成します。
Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編) | Casual Developers Note
create-react-appを使わないでReactの開発環境を構築する方法を紹介します。 はじめに 近年のJavaScriptフレームワークはCLIを使ってワン・コマンドで設定できるようになっています。Reactではそのためのコマンドとしてcreate-react-appが提供されています。creat-react-appは簡単にReactを設定できる反面、設定が隠蔽されてしまい、細かい設定をするためにはejectする羽目になります。しかし、ejectをしてしまえば最後、create-react-appがアップデートされてもアップデートできなくなってしまいます。では、プロダクションなどで設定を細かく設定して管理したい場合はどうすればよいでしょうか？そういう人は自分でゼロから設定しましょう。 ということで、今回はcreate-react-appを使わないで、Reactの開発環境を構築してい
Extend Create React App with AirBnB’s esLint config, Prettier, Flow and React Testing Library.
Note: this guide assumes that you are familiar with Create React App, so it’s supposed you already have a local project ready to go and you know all the basics. 1. Extend ESLint configuration with AirBnB’s linting rules and PrettierAirBnB created a real popular Javascript Style Guide. Using it in your projects will ensure your code has a level of clarity that makes reading and maintaining easier f
Everything you need to know about React’s Context API | HackerNoon
React is one such UI library which gets frequent upgradation in terms of new features and concepts within months. One such additional concept or feature in version 16.3 gives us Context API which is an upgraded version of old concept of context in React which allow components to share data outside the parent-child relationship.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
15 Best React Notification Plugins – Bashooka
Computed Properties in React
MobX with React
Data Fetcher component using Hooks and Render Props
GitHub - yymm/hooks-canvas-sample: A example canvas animation using react hooks.
GitHub - samie820/hooks-state-management
Electron-Forge + React + TypeScript = Awesome!
Getting Started with Electron, Typescript, React and Webpack - SitePen