React-Navigation v3の変更点 - Qiita
React-Navigatorを利用してみる（基礎編） ーStack Navigatorの実装のところでハマりました。 エラー内容 Invariant Violation: The navigation prop is missing for this navigator. In react-navigation 3 youmust set up your app container directly. More info: https://reactnavigation.org/docs/en/app-containers.html エラー内容でググってみると、同じような人が！！ https://stackoverflow.com/questions/53367195/invariant-violation-the-navigation-prop-is-missing-for-this-
Reactの新Context APIとRedux is deadはどう関係するのか？
先日、reduxのメンテナであるMark EriksonさんがBlogged Answers: Redux — Not Dead Yet! という記事を書いていて「はーなんだろうなー」と流し読みしていた。 そんな折、React 16.3 がリリースされ、Context APIが刷新されたのを見て、「あ、これは確かに向き合い方ちょっと変わるかも」というのを思ったのでまとめてみる。 Redux — Not Dead Yet!を要約する元記事をざっくり要約してみるとこんな感じ Reduxはどこにも行かないよ。メンテしていくし、役割もあるよContext APIによってReduxを置き換えられるパターンはありえるよ。ただその場合、最初からReduxいらなかった可能性あるよGraphQLがReduxを置き換えることはあるかも。でもReduxのほうがハマるパターンもあるよ最近Dan Abramovさん
RailsでReduxコンテナをサーバサイドレンダリング (use Hypernova by airbnb) - Qiita
はじめに 前回の記事 RailsでReactをサーバサイドレンダリング（use Hypernova by airbnb） - Qiitaでは、ReactコンポーネントをRailsアプリで簡単にサーバサイドレンダリングに対応する方法を書きました。 最近ではReact単体ではなく、コンポーネント群の状態(State)を一元管理してデータの流れを一方向に整える開発技法Fluxを取り入れたRedux(react-redux)を用いたアプリケーションも増えてきました。 前回ご紹介したHypernovaでは、Reactコンポーネントのサーバサイドレンダリングには対応していたのですが、Reduxコンテナ1はうまくレンダリング出来ませんでした。 そこで、この記事ではReduxコンテナのサーバサイドレンダリングに対応したHypernovaのReact/Reduxバインディングであるnoriaki/hyper
RailsでReactをサーバサイドレンダリング（use Hypernova by airbnb） - Qiita
はじめに Railsにも対応しているJavaScriptのサーバサイドレンダリング用ライブラリairbnb/hypernovaが、airbnbからリリースされました。 この記事では、シンプルなRailsアプリを構築し、これまたシンプルなReactコンポーネントをサーバサイドレンダリングで表示するまでのチュートリアルを解説します。 ReactによるSPA（シングルページアプリケーション）も増え、Google等の検索エンジンでもある程度はページ内容を解釈してくれるらしいですが、サーバ側でHTMLをレンダリングして出力するサーバサイドレンダリングを利用すると、より正しくページ内容を解釈してもらえます。 Hypernovaとは A service for server-side rendering your JavaScript views Hypernovaは、JavaScriptコンポーネント
プロトタイピング - mizchi's blog
Path of Exile ってハクスラにはまってるんだけど、ゲームってやってたら作りたくなりませんか。 途中まで作った。 https://infallible-easley-5955b5.netlify.com/ 使ったもの React Redux SVG ひたすら素朴な react-redux で作るのを心がけた 他はすべて気合で0から実装 実装したもの 経路探索 カメラ ポインタシステム 当たり判定 詰んだ きれいな設計にするために副作用起こせる場所とアクセス絞ってたら無限に想定から外れて、「絶対に副作用を起こさないと詰む」みたいな箇所が増えてしまい、コードを大幅に書き直さないといけなくなったので、一旦断念。オブジェクト間のメッセージシステムをもっと念頭に置くべきだった。 React部分で困ったことはない（複雑なものもない）。当初懸念していた reducer の実行コストと描画コスト
React + Firebase でヒートマップを実装する
2018.01.12 まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI実装選手権」
2017末時点での React Component 設計のベストプラクティス - Qiita
どう考えているか、というのを聞かれたので、記事に起こしておきます。個人の意見です。 Prettier を使う 気づけばコードの整形を人間がやる時代は終わりました。 細かいコーディングスタイルでレビューの時間を取るぐらいだったら、一貫した自動整形ルールを適用すべきです。 人によっては細かいこだわりがあって prettier の規則が気に食わないかもしれず、僕も最初はそうでしたが、Atomで保存する度に自動整形を走らせる prettier の強烈な開発体験によって、最終的にそれらのこだわりを全て捨てることが出来ました。 生産性を求めるなら、現時点では最優先で導入すべきものです。 React.createClass を使わない v16 で削除されたのでいわずもがな。 同様に、 createClass でしか使えなかった mixin 周辺機能も丸ごと deprecated です。 「可能な限りは」
React Storybook入門：コンポーネントカタログがさくさく作れちゃうかもしれないオシャレサンドボックス環境 - Qiita
React Storybook は React をコンポーネント単位でサンドボックスで開発できる開発環境です。 Introducing React Storybook — KADIRA VOICE — Medium kadirahq/react-storybook: Isolate your React UI Component development from the main app React Storybookの特徴って 実際のReact Componentをサンドボックス内で呼び出してレンダリングします。よってコンポーネントの色々な状態（0件とか新着ありとか）も少ないコードでカタログ化が可能。また、actionというAPIを使ってコンポーネントのイベントをキャッチしてログに流してくれたりもします。 状態込みのスタイルガイドって非常にメンテナンスが面倒なので、これ使えたらかなり革新
React導入時の苦労話とこれからについて
2017/5/23 ヒカラボ 「大規模サービスがリスクをとってまでモダンな開発環境にリプレイスした理由～ここだけの苦労話や手法を交えお話します～ 」での発表資料です。
SPAだけじゃない！ReactとThree.jsの組み合わせはゲーム開発を変える？
Reactといえば、SPA（シングルページアプリケーション）のViewに使われるライブラリー。でもThree.jsとWebGLを組み合わせると、3Dのゲーム開発にもメリットがあるようです。 「Charisma The Chameleon」というタイトルのゲームを開発しています。このゲームは、Three.js、ReactJSおよびWebGLを使って開発しています。本記事ではこれらの技術がreact-three-renderer（R3R）を使ってどのように動作するかを説明します。 ReactおよびWebGLの紹介については、SitePointの『A Beginner’s Guide to WebGL』や『Getting Started with React and JSX』をチェックしてください。本記事および添付のコードはES6 Syntaxを使用しています。 はじめに しばらく前にPete
React+Redux入門 - Qiita
※この記事を書いたのは2016年4月です。Qiitaでは記事をアップデートするとその日付のみが表示されていまうため、新しい記事のように見えるかもしれませんが、現代ではもっと進化していることにご注意ください。素直にReact Hooks を使いましょう。あと Redux は用法用量を守って気をつけて使ってください。なんならReduxは使わない方がいいでしょう。 最近のモダンなウェブフレームワークと言えば、React+Reduxですよね。でも、なんか難しそうとか、ReactってPHPみたいにViewにロジック混ざりそうとか感じて尻込みしていませんか？それはただの誤解かもしれません。React+Reduxはそんなに難易度の高いものではありません。ただ単に、新しい概念で構成されているから、カルチャーショックのようなものがある、というだけのことです。React+Reduxに入門してみましょう。 僕自
react-railsを使ってReactのTutorialをやってみる - Qiita
はじめに react-railsという、ReactをAsset Pipelineに乗せて使えるようにしてくれるruby gemsがある。 この記事では、これを使用してReactの公式tutorialを進めていく。 公式のtutorialではサーバ側はすでに実装済みとして進んでいる。 今回はせっかくなのでtutorialを進める中でサーバ側も実装していくことにする。 ちなみに使ってみた個人的な感想としては、RailsのAsset Pipelineに乗せるならすごく順当かなー、という感じ。 browserifyを使いたい。bowerもオワコンと呼ばれてしまう。そんなこの時代。 Asset Pipelineは捨てたい感じがあるけど、既存のアプリケーションを徐々にReactコンポーネント化していく、みたいな時には良いと思う。 方針 きまぐれで、必要そうなところはReactの説明する。けど英訳とかは
react + rails 構成パターンまとめ。 - Qiita
reactを実践投入しようと思っていろいろ調べたり試した構成パターンです。サンプルレベルの情報は多いのですがいざ実務に入れようと思うといろいろと考えることが多かったのでまとめました。 とりあえずReact.jsをRailsで使いたい Production環境で使うような実践的な構成が知りたい Js界隈のトレンドをRailsプロジェクトでも使いたい js/coffeeでなく、ES6でReactを書いてみたい といった方向けです。 今回の内容は Ruby on Rails + Reactのベストプラクティスを模索してみるで書いたようにrails上でreactを使うのはreact-railsかfrontendを独立させてやればいいんだな、とざっくり頭では理解した人が、じゃあ具体的にどういう構成にすればいいんだ？と思ってやってみるといろいろとつまづくポイントがあり、そのまとめです。 目次：構成3パ
DraftJS Plugins - High quality plugins with great UX
The documentation currently represents the 4.0.0 release. For troubleshooting please checkout theFAQ Slack-like emoji autocompletion, Facebook-like stickers & mentions, and many more features out of the box to enhance your web application. Wait, but why?Facebook's rich-text editor framework DraftJS built on top of React allows you to create powerful editors. We're building a plugin architecture on
React v15をやってみよう (1) - まずはHTMLだけで - Qiita
まずはHTMLファイルだけで、React.js v15を感じてみよう。 はじめに React.js v15を始めたいけど、たくさんキーワードやツールが出てきて、環境をそろえろとか、どこから手を付けていいのかわからなくて、いつまでも始められない、初心者の方のために、この記事を書いています。 それではエディタ以外になんの武器も持っていない人も、順番に装備していきましょう。 とりあえず最初はNode.js, npmから... 今のところGrunt, Gulp, Browserify, WebPack, TypeScriptとか、全部無しで! Web/HTTPサーバーも無しで! 素のReact.jsから始めましょう。 0. Node.jsとnpmをインストール https://nodejs.org/ja/ からv6系(推奨版)をダウンロードしてインストする。 Webというかフロントエンドをやるのに
React製リッチテキストエディターDraft.jsを使ってみる - Qiita
import React from 'react'; import ReactDOM from 'react-dom'; import {Editor, EditorState} from 'draft-js'; class MyEditor extends React.Component { constructor(props) { super(props); this.state = {editorState: EditorState.createEmpty()}; this.onChange = (editorState) => this.setState({editorState}); } render() { return ( <Editor editorState={this.state.editorState} onChange={this.onChange} /> ); }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactにテストを導入したい
TechCrunch | Startup and Technology News
https://thedangercrew.com/game.html/
WYSIWYGエディタ(Trumbowyg)をReactコンポーネント化 | 株式会社テクノブレーン