アイソモーフィックJavaScriptは、クライアントサイド（ブラウザ）とサーバーサイドで同じコードを実行できるようにするためのフレームワークの総称。本書では、従来のアプリケーションが持つ問題点（読み込みの遅さ、SEO対策の困難さなど）を明らかにするところから始め、アイソモーフィックなアプリケーションの分類やアイソモーフィックさの度合いについて理解したうえで、アイソモーフィックなJavaScriptフレームワークを構築するための実践手法を解説し、Walmart、Airbnb、Facebook、Netflixといった大企業がアイソモーフィックJavaScriptを選んだ理由を明らかにします。読者は、なぜこのアプリケーションアーキテクチャーが、ページ読み込み速度やSEOコンパチビリティといった、ビジネス面でクリティカルな問題を解決するためのソリューションとして人気上昇中なのかを学べます。 賞賛

EDIT: This guide is outdated because it was made before react-router v4. I’m writing this guide because I haven’t found implementations of this setup using the new and cool (and official) create-react-app by Facebook. This is not about server-side rendering or Redux. The source code is available here: https://github.com/mrpatiwi/routed-react Why this is important?Suppose you want to start a new pr

Reactを導入して半年近くが経ちましたWantedlyでは、今年の初めからReact(+Redux)の導入に取り組み始めたので、気付けば半年近く立っていることになります。今自分がこの記事を書いているエディタから、Wantedly Adminのチケット画面まで、ある程度大きなアプリケーションを開発してきました。 そこで今回は、チームで継続的に開発していく過程で遭遇した問題と、それを解決するために導入したImmutable.jsについて紹介します。 増え続けるCallbackとAction、肥大化するStoreReactとセットで語られることが多いFluxアーキテクチャ。ここでは詳しい説明は省略しますが、とてもシンプルな考え方なので、チュートリアルなどで簡単に学ぶことができます。しかし、実際にチームで開発していくと、たしかに動いてはいるけど、綺麗とは言い難いコードが増えてしまいました。 Ac

こんにちは、プラットフォーム開発部の新卒エンジニアの松下です。 普段は会員基盤フロントエンドチームでログインやアカウント登録などの会員基盤システムの開発をしています。 早いものであと1ヶ月ちょっとで1年目が終了。春には次の新卒が入ってくるとのことで、うかうかしていられないなと思う今日このごろです。 さて本日はEnzymeを使ってReactのテストを書く方法を紹介したいと思います。 Enzymeは宿泊予約サイトのAirbnbが開発しているReactコンポーネントのテストツールです。 チームでは以前よりテスティングフレームワーク「Mocha」とアサーションライブラリ「Chai」でNode.jsアプリケーションの単体テストや結合テストを行ってきました。しかし、これらのツールだけではReactのテストを行うことができず、今回Enzymeの導入を検討することにしました。 目次 Enzymeのセットア

Reactを勉強し始めた頃は、その概念はわかったとしても、実際にコードを書いてみようとすると、どう書いていいかわからず手が止まってしまう人もいるかと思います。jQueryをバリバリ書いていた人でも、Reactを書こうとすると最初は戸惑ってしまうっていうのはよく聞く話です。ある意味Reactの書き方は特殊です。まずは書き慣れる必要があるかと思います。今回の記事では、初心者向けとしてReactの実装でよく使う基本的な構文を紹介します。今回紹介する構文を覚えれば、ほぼほぼReactの仕組みも理解できるようになり、その後の学習も楽になるかと思います。ぜひ参考にしてみてください。 ファイルを読み込む時の構文ReactでUI（ユーザーインターフェース）を実装する際は、一般的にnpm経由でreactとreact-domをプロジェクトディレクトリ内にインストールして、ファイルに読み込んで使うようにします。