コメントはまだありませんTweetはじめにReactでファイルアップロードを実装してみたくて、どのような方法があるのか調べてみた。使ってみたら、これがかなりいい!!あまりに気に入ってしまったので、react-dropzoneでアップロード対象のファイルを選んで、axiosでPOSTして、サーバーサイドのRailsでファイルを保存するところまでをざっと紹介します。Reactのことは分かっている前提ですすめますので、あしからず。ファイルをドロップする場所があり、その右側にドロップされたファイルを列挙する場所がある。画面下部にアップロード対象ファイルのプレビュー表示。一気に貼り付けちゃいましたので、ざっと説明しておきます。タグで、ドラッグドロップでファイルをアップロードできる機能ができちゃいます。acceptプロパティで受け付ける画像の種類(ファイルの種類)を指定し、onDropでドラッグドロップされた時の処理を実装します。今回はonDropで受付可能なファイル、不可能なファイルを引数で受け取り、ステートを変えて、ドロップ領域の右側にそれらのファイル名を列挙します。同時に、画面下部に受付可能なファイルのプレビューを表示しちゃいます。これがいとも簡単なんです。オブジェクトを作り、そこにアップロード対象のファイルを詰め込んで、axiosでPOSTします。これだけなんですよ、ホント便利ですね。何個のファイルがアップロードされるかは不定なので、file_1、file_2、file_3のような連番の名前をつけておきます。ここにファイルをドロップしてください。rejected)}>ここにファイルをドロップしてください。Uploadサーバーサイドの実装Railsの実装になります。最初に渡ってきたパラメーター(:name)に従ってフォルダを作ります。file_1、file_2、file_3と連番でアップロードされてきたファイルをそのフォルダに保存します。1endendデザインCSSとりあえず、適当ですが、こんな感じで。tokenというエラーが出て悩まされました。分かってなかったようです。:null_sessionとして、とりあえず何でも受け付けるようにする。ReactでSPAを作り、Twitter認証(OAuth)でログインする。2017年夏版2017年7月29日フロントReactJS、バックエンドRailsという構成でサービス立ち上げに関わってた。Macはほとんど使わないんでわからないんだけど、Windowsはほんともっさり動作だよね。dockerを使って、Rails(サーバーサイド)の環境を1つ、React(node)(クライアントサイド)の環境を1つ作る。両環境ではChromeとAtomが動かせて、開発できるようになるところまでが目標です。自体触るのが初めてだったので、基本的なことから記載しておきます。加えて初心者なので、間違えがあったらごめんなさい。docker自体のインストールはあちこちに記載されているので、そちらを参照ください。ubuntuのイメージを検索します。Webpackを使って、Sassをコンパイルする方法です。実際に動いた例を示しておきます。ES6をノーマルなJavascriptに変換するときとの合わせ技の方法も記載しておきます。--save-devこんな感じのフォルダツリーにsassがあると仮定します。webpack.config.jsを以下のような内容で作成します。Nativeを初めて10日ほどが立ちました。画面デザインが難しいですね。時には隠れてしまうケースもあります。layoutを諦めて、固定ピッチで画面デザインをしてやること。いうのを計算で求めてやるのが、一番スマートかなとい...ReactでSPAを作り、Twitter認証(OAuth)でログインする。GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。なんかは使えそうにない。前回のGoogle編に続き、今回はTwitter編。あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。実装のエキス部分だけを記載してみます。Developerにア...ReactでSPAを作り、Google認証(OAuth)でログインする。GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。なんかは使えそうにない。あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。実装のエキス部分だけを記載してみます。React+Redux+RailsでSPAアプリを作ることになったので、あれこれ調べたのでメモです。なるとコンテンツ制御の仕組みが必要です。そこで登場するのがReact-Router-Dom。あれこれ調べて、なんとか動くところまでたどり着いたので、メモを公開します。React-Routerは古いようで、React-Router-Domにしてみました。ここ3週間ほど死ぬほどReactとReduxやって、あれこれ分かるようになったので、これからReact+Reduxで開発を始めたい人向けに記事を書いてみます。なんだかんだ言って難しい。Reactの理解はなんとか出来ても、Reduxが特に難しい。基本的にこの4つを考えればOKです。date*日本語が含まれない投稿は無視されますのでご注意ください。Ryzenで使用時に定期的にフリーズする。axiosを使ってファイルアップロードを実装してみる(バックエンドはRails)ReactでSPAを作り、Google認証(OAuth)でログインする。64bitで使えるようにする。Ryzenで使用時に定期的にフリーズする。64bitで使えるようにする。