#React
19 件の記事
ReactとHistory APIを使ってrouterを自作する
ReactとHistory APIのpushState・popstateを使い、ライブラリに頼らずSPAのルーターを自作する方法を解説します。
Reactでマークダウンエディタをシャッとつくる
markedライブラリを使って、入力した内容をその場で表示できるライブプレビュー対応のマークダウンエディタを、Reactでサクッとつくる方法を解説する記事です。ビルド環境のセットアップを簡単に済ませつつ、Markdownを変換して表示するエディタを実装する手順を紹介します。
LaravelにbowerでReactを導入してみる
統合するLaravelとReact。bowerパッケージマネージャー、Babel、JSX構文、gulp/elixirによるビルド環境構築の実装手法を解説
LaravelにSPAを組み込む時に考えたディレクトリ構成とnginxのconfファイル
Laravelで作っているアプリケーションに、管理画面だけSPAを組み込もうとした際の記録です。フロントエンドとバックエンドをうまく振り分けるためのディレクトリ構成の考え方と、リクエストをルーティングするnginxの設定について、初めての試みをメモとしてまとめました。
![Reactでrequireしてたら、[BABEL] Note: The code generator has deoptimised the styling of](/ogp/react-babel-code-generator-warning.png)
Reactでrequireしてたら、[BABEL] Note: The code generator has deoptimised the styling of
Reactでrequireした際に出るBabelの「code generator has deoptimised」警告の原因と、ファイルサイズ最適化による解消方法を解説します。
React+react-redux+react-router+ES6+webpackで作るSPAボイラープレート
React・Redux・React-router・webpack・Babelで構成する、モダンなSPAボイラープレートのアーキテクチャを紹介します。
Reactでフォローボタンをつくってみる
Reactを使って、SNSのようなトグル状態とホバー時の挙動を持つフォローボタンのコンポーネントをつくる方法を解説する記事です。ボタンの状態管理や、マウスホバーに応じた表示の切り替えなど、実装のポイントを具体的なコードとともに紹介します。
React＋marked＋highlight
Reactのマークダウンエディタにmarkedとhighlight.jsを組み合わせ、シンタックスハイライト付きのコードブロックを描画する方法を解説します。
Reactで複数のinputを扱うフォームを実装する
実装するReactマルチ入力フォーム。ネストされたstateオブジェクト、controlled component、複数入力要素の状態管理パターン。
React+Reduxのディレクトリ構成検討
React+Reduxをアプリケーションに導入する際の、ディレクトリ構成について検討した内容を紹介する記事です。構成に悩んでいたときに参考になった「A Better File Structure For React/Redux Applications」という記事をもとに、機能単位でまとめるファイル構成の考え方を整理します。
ReactとReduxでSPAを構築するために参考にした記事
参考にするReact・Redux資源。SPA構築で役立つリポジトリ、記事、ReducerやAction、middleware、Redux Formの実装例集。
React Tag Autocompleteを使ってサジェスト付きタグ機能を実装する
実装するタグオートコンプリート機能。React Tag Autocompleteライブラリ、APIからのサジェスション取得、ハンドラー処理の実例。
redux-formのサーバーサイドバリデーションでpromissをいじってたら「Uncaught (in promise) error」
redux-formのサーバーサイドバリデーションで発生する「Uncaught (in promise) error」を、Promiseを返してSubmissionErrorを正しくthrowすることで解決する方法を解説します。
Laravelでajaxの際にCsrfTokenに引っかかった話
LaravelのAjaxリクエストでCSRFトークンに引っかかる問題を、VerifyCsrfTokenミドルウェアでAPIルートを除外して解決する方法を解説します。
Laravel+React+ES6+Browserify
BrowserifyとBabelのトランスパイルでReactをLaravelに組み込み、モジュール対応のモダンなES6コードを書く方法を解説します。
Laravel+React+Superagentでフォームを実装
実装するLaravel+React+Superagentのフォーム。API設計、FormRequest、JSON応答、Promise/Ajaxの実装パターンを詳細に解説
LaravelでRestAPIをつくる
LaravelのResourceControllerと認証ミドルウェアを使い、JSONレスポンスを返すREST APIをつくる方法を解説します。
OSSをはじめてみた話
GitHub上で自作のプロダクト「Rubel」を公開し、オープンソースソフトウェア（OSS）開発を始めてみた話を紹介する記事です。公開プロジェクトとして開発を進めるなかで学んだ、協働開発の基礎やOSSに取り組むことの意義について、当時の経験をもとにまとめます。
入門 React ―コンポーネントベースのWebフロントエンド開発
『入門 React ―コンポーネントベースのWebフロントエンド開発』の書評。コンポーネントベースでWebフロントエンドを構築するReactの基本を学べる一冊。これからReactに触れる人が土台をつかむのに適しており、実務レベルの発展的な内容は別書で補うとよい。