Rails+ReactなSPAサイトでSEOをしようとしてぶつかった壁 - オウチーノ開発者ブログ
Rejectcon 2018 レポート記事 こんにちは。オウチーノ吉川です。 去る9/29にRejectconで「Rails+ReactなSPAサイトでのSEO」について登壇してきました。 SPAサイトでSEOを行う際にぶつかった壁と、それをどのように乗り越えていったかの経緯をご紹介しました。 ちょっと内容詰め込みすぎて途中途中端折ってしまったのと、発表後にもいろいろ質問などをいただいていたのであわせて補足しながらご紹介します。 発表資料はこちらです。 なぜ経緯を紹介したのか？ 昨今のフロントエンド技術の進化速度は非常に速く、どんどん新しい技術が登場しています。 記事などでどういった技術が登場しているのかは抑えているが、実際に全てちゃんと触ってはいないという方も多いのではないでしょうか。 SSRをするためにはreact-railsやhypernovaがある、ということを知っているだけでは、
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
EnzymeでReactコンポーネントのテストを書こう - DMM.comラボエンジニアブログ
こんにちは、プラットフォーム開発部の新卒エンジニアの松下です。 普段は会員基盤フロントエンドチームでログインやアカウント登録などの会員基盤システムの開発をしています。 早いものであと1ヶ月ちょっとで1年目が終了。春には次の新卒が入ってくるとのことで、うかうかしていられないなと思う今日このごろです。 さて本日はEnzymeを使ってReactのテストを書く方法を紹介したいと思います。 Enzymeは宿泊予約サイトのAirbnbが開発しているReactコンポーネントのテストツールです。 チームでは以前よりテスティングフレームワーク「Mocha」とアサーションライブラリ「Chai」でNode.jsアプリケーションの単体テストや結合テストを行ってきました。しかし、これらのツールだけではReactのテストを行うことができず、今回Enzymeの導入を検討することにしました。 目次 Enzymeのセットア
React v16でのサーバーサイドレンダリング
React v16について書いたブログの中の、サーバーサイドレンダリングについての部分に間違いがあったので修正しつつ、v16のサーバーサイドレンダリングについて補足します。 http://blog.koba04.com/post/2017/09/27/react-v16-changes/ Hydrationしたい場合は、renderToStringまたはrenderToNodeStreamで行う必要があります。 renderToStringまたはrenderToNodeStreamには、data-reactroot以外にも変数部分を識別するためのコメントノードなどが挿入されていて、それが必要であるためです。 それでは、v15とv16でのサーバーサイドレンダリングの違いを見てみます。 以下、長いのでサーバーサイドレンダリングはSSRと略します。 v15まで ReactでSSRしたコンテンツを
ReactはなぜFiberで書き直されたのか？Reactの課題と将来像を探る
先日行われたFacebookの開発者向けイベント「F8」で、React Fiberの発表が行われていました。 といっても、React関連の新しいプロダクトが発表されたというわけではなく、Reactが一から書き直されたということのようです。 ReactはなぜFiberで書き直されねばならなかったのか？Fiberが解決しようとした課題は何なのか？ その答えを聞くために、React Fiber現状確認というブログエントリで大変詳細にFiberの事を解説されていた小林徹 (Twitter: @koba04)さんに、実際のところを詳しく伺ってきました。 React Fiberとはなんなのか、そしてReactの将来像を探ってみます。 React Fiberとは？ 白石 React Fiberってなんですか？まずは概要を教えてください。 小林 Facebookが先日のF8カンファレンスで発表した、Rea
React Native: Idea to Product in One Week
Peruse — design industry news.Over at Adjust Creative, we’ve been interested in the shared code library that React Native offers for a while now and we love pulling up our sleeves and digging into fresh technologies — especially if they can help us and our clients. We decided to develop an app to understand the workflow of producing a product with the React Native framework. The outcome of our des
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
reduxのReducerについて - fukajun - DeepValley -
Reducerについて http://rackt.github.io/redux/docs/basics/Reducers.html storeのstateを変えるための関数 現在のstateとactionを受け取り、actionを元に新しいstateを作成して返す。 最小だとstate全体を1つのreducerで更新するようにする. こんな感じ function todos(state, action) { switch (action.type) { case INPUT: return action.input default: return state } } } stateの構成が複雑になって来た場合など、stateのプロパティー毎に reducerを割り当てて値を更新するようにする場合はこんな感じで書くっぽい function todoApp(state = {}, actio
React入門 | React 0.13 日本語リファレンス | js STUDIO
JSFiddle Reactを試す最も簡単な方法は、下記のJSFiddleの「Hello World」のサンプルを触ってみることです。 React JSFiddle React JSFiddle (JSX無し) スターターキット Reactに入門するために、スターターキットをダウンロードします。 Getting Started | Reactのページの「Download Starter Kit (バージョン名)」のボタンをクリックしてダウンロードします。 スターターキットのルート・ディレクトリに、下記の内容でhelloworld.htmlを作成します。 <!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> </h
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ReactiveX/RxRuby: Reactive Extensions for Ruby
http://gaearon.github.io/react-dnd/docs-drag-source.html
GitHub - omnidan/redux-undo: :recycle: higher order reducer to add undo/redo functionality to redux state containers
GitHub - react-dnd/react-dnd: Drag and Drop for React
rchaser53/redux_DnD · GitHub