• React、Redux入門 公式サイトとはちょっと違う角度から
    React、Redux入門 公式サイトとはちょっと違う角度から
    React、Redux入門 公式サイトとはちょっと違う角度から へのコメントはまだありません

    はじめに ここ3週間ほど死ぬほどReactとReduxやって、あれこれ分かるようになったので、これからReact+Reduxで開発を始めたい人向けに記事を書いてみます。 公式サイトの英語記事や、それを翻訳してくれているようなサイトを見てもそれなりに分かるのですが・・・ なんだかんだ言って難しい。 Reactの理解はなんとか出来ても、Reduxが特に難しい。 欲張りなんですが、とにかく両方をサーッと理解して、さっさとアプリ組みたいよという方の助けになれればと・・・ 考えていく手順 画面イメージ 画面を構築するためのコンポーネント階層図 ステート イベント 基本的にこの4つを考えればOKです。 既…

    Read more
  • React Native、Redux、Railsを使って、掲示板アプリを作ってみよう
    React Native、Redux、Railsを使って、掲示板アプリを作ってみよう
    React Native、Redux、Railsを使って、掲示板アプリを作ってみよう へのコメントはまだありません

    はじめに 前回、React NativeをAndroid Studioと組み合わせてインストールし、HelloWorldを出せるところまで たどり着きました。 今回は一足飛びで、React NativeとReduxをフロントエンドに使い、バックエンドにRailsを用いた 掲示板アプリを作ってみましょう。 前提として、Railsはそれなりにわかっている。Reactもよく分かっている。Reduxも知っている。 ぐらいのレベルを前提にしています。 出来上がったアプリは、デザイン的にどんくさいですが、これは私がまだReactNativeの スタイルの方法を学んでいないためです。まぁそれはおいおいブラッ…

    Read more
  • React Native で Hello Worldをするまで・・・
    React Native で Hello Worldをするまで・・・
    React Native で Hello Worldをするまで・・・ へのコメントはまだありません

    はじめに React Nativeを試したくなって、インストールから、あれこれしてみました。 結構苦労したので、Hello Worldを出すぐらいのところまでを、メモとして記載しておきます。 インストールは 本家のページの「Getting Started」を見ながらで大体出来るのだが・・・ Android Studio自体も初めて触ったので、ちょっと迷って、困ったのでそのへんも・・・ インストール 以下のGetting Startedに沿って始めてください。 Getting Started https://facebook.github.io/react-native/docs/getting…

    Read more
  • Rails 5.0 と React、Redux、Ajaxを組み合わせて掲示板アプリを作ってみよう
    Rails 5.0 と React、Redux、Ajaxを組み合わせて掲示板アプリを作ってみよう
    Rails 5.0 と React、Redux、Ajaxを組み合わせて掲示板アプリを作ってみよう へのコメントはまだありません

    はじめに Reduxを勉強して、ようやく大筋を理解し、Railsとの連携方法も分かったので、 Rails+React+Redux+Ajaxの組み合わせでちょっとした掲示板を作ってみました。 Rails+React+Redux+Ajaxの組み合わせで必要なノウハウはだいたい組み込まれていると思います。 ここで紹介するソースはGitHubのここで公開していますので自由に利用してください。 対象とする読者は Railsはそこそこ知っている。Reactも勉強した。Reduxも勉強した、もしくは勉強中である という方が対象です。 Rails + React + Reduxの環境を整える これに関しては書…

    Read more
  • Rails5.0 に React、Reduxを導入して、Redux本家のTodoサンプルを動かす
    Rails5.0 に React、Reduxを導入して、Redux本家のTodoサンプルを動かす
    Rails5.0 に React、Reduxを導入して、Redux本家のTodoサンプルを動かす へのコメントはまだありません

    はじめに RailsとReact、Reduxを組み合わせてアプリを構築するための準備手順をRedux本家のTodoサンプルを使って示してみます。 React、Reduxはnpm(node_modules)でインストールしたものを使うこととします。 最終的に動いた形のイメージはこんな感じ。 最終的なソースツリーはこんな感じ Railsアプリの新規作成、React導入

    足りないGemを3つ追加して、bundle install 末尾に追記

    bundle install…

    Read more
  • Redux Todoサンプルを npmとwebpackで最小の環境を作って動かす
    Redux Todoサンプルを npmとwebpackで最小の環境を作って動かす
    Redux Todoサンプルを npmとwebpackで最小の環境を作って動かす へのコメントはまだありません

    はじめに Reactの勉強をはじめて、大雑把に理解したら、Reduxの勉強をしたくなりますよね。 しかしまぁ・・・Reduxムズイ!! となるわけで、とにかくRedux本家にあるTodoのサンプルのソースを眺めるも・・ わかったようなわからないような状態になる。 兎にも角にも、実際に動かしてみなきゃ始まらない。そのための環境を作るのも 最初はちんぷんかんぷんだったりするのですよね・・・ なので、Redux本家にあるTodoサンプルをnpm と Webpackを使って最小環境を作って 動作させるところまでたどり着くのが今回の目標です。 Todoサンプルの内容には踏み込みません、あくまで動くところ…

    Read more
  • RailsとReactJSを用いてちょっとした掲示板を作ってみましょう vol.2
    RailsとReactJSを用いてちょっとした掲示板を作ってみましょう vol.2
    RailsとReactJSを用いてちょっとした掲示板を作ってみましょう vol.2 へのコメントはまだありません

    はじめに RailsとReactJSを用いてちょっとした掲示板を作ってみましょうというのが今回のコンセプト。 前回のVol.1は掲示板一覧を表示することだけで終わってしまいましたが、今回は本格的な 掲示板機能を実装してみます。多分長くなると思いますので、よろしくお付き合いください。 前回に引き続き、これから何回かにわたり連載する内容はGitHubの下記のURLで公開しています。 https://github.com/h-mito/rails_with_react ステートの管理やら、イベントの引き渡し方がいまいちわからないという方は、 Railsとは関係ない ToDoListの記事 を参照して…

    Read more
  • RailsとReactJSを用いてちょっとした掲示板を作ってみましょう vol.1
    RailsとReactJSを用いてちょっとした掲示板を作ってみましょう vol.1
    RailsとReactJSを用いてちょっとした掲示板を作ってみましょう vol.1 へのコメントはまだありません

    はじめに RailsとReactJSを用いてちょっとした掲示板を作ってみましょうというのが今回のコンセプト 前回に引き続き、これから何回かにわたり連載する内容はGitHubの下記のURLで公開しています。 https://github.com/h-mito/rails_with_react モデルの作成、データベースにテーブル作成 掲示板(board)、投稿ユーザー(user)、投稿(comment)の3つのテーブルを作ります。 カラムは以下のような感じです。 rails g model でモデルとマイグレーションファイルを作成します。 [crayon-5961da8137dd20065730…

    Read more
  • RailsでReactJSを使う〜準備編
    RailsでReactJSを使う〜準備編
    RailsでReactJSを使う〜準備編 へのコメントはまだありません

    RailsでReactJSを使ってみようという企画をスタートしてみます。 まずはRailsのプロジェクトを作って、ReactJSをインストールして、HelloWorldを出力するところまでの準備編です。 これから何回かにわたり連載する内容はGitHubの下記のURLで公開しています。 https://github.com/h-mito/rails_with_react Railsプロジェクト作成、ReactJSインストール

    末尾に1行追加する

    react-rail…

    Read more
  • ReactJSことはじめ vol.2
    ReactJSことはじめ vol.2
    ReactJSことはじめ vol.2 へのコメントはまだありません

    では ReactJS 第2回目いってみましょう。 今回は下図のような感じが完成図です。 単純にToDoが一覧されており、ToDoの横には削除ボタンがあり。 ToDoを追加したい場合は上部のテキストボックスに文字を入力し 追加ボタンを押す。 たったこれだけです。 まぁこのたったこれだけが結構難しいんですけどね。 ではいってみましょう。 まずは初期値となる変数をこんな感じで用意します。

    この変数がToDoリストの初期値です。 では次、画面イメージから、何個の独自クラスを定義しなきゃいけないか考えましょう。 簡単に言ってますが、これか…

    Read more

Back to Top