そこそこの感じのブログとか、メディアをコマンド一発で作ることが出来るアプリをめっちゃ気合い入れて作りました！（React + Rubyで）

それをfacebookでシェアしたところ、、、

なんと！！！！！！！！！

..................

.................

...............

.............

6いいね。。。（見てくださった方は神様や。。。）

GithubのStar数は

..................

.................

...............

.............

デデデン！！！！

2star . . .fooooooooooo!!!

てか、もともと公にリリースする前から2だったやんか
（しかも、そのうちの一人は自分。。。ort）

これは！！！！いわゆるクソライブラリを作ってしまったのか！！！！ああああ！！！！と、少し落ち込みます

いや、でもそう決めつけるのは早計だ！と

一旦待ってみようと！

見てくれた絶対数が少ないだけで、本当は良いと思ってくれる人がいるんじゃないかと！！

というわけで、Reactで作ったブログ生成アプリの使い方をお願いだから紹介させてくださいお願いします！！

※qiitaの趣旨に合うように、Reactの構成とかもちゃんと書きます！！！

Notee

以下のGIFのようなブログが一発で立ち上がります！

こちらが、Noteeで作ったブログです！

Like a cat
https://cat.closedcafe.com

Noteeのインストール

Gemfileに'notee'を追加して

Gemfile

gem 'notee'

インストールした後、rake notee:startコマンドでnoteeをごそっとインストールしてきます。（rake notee:destroyで消せるのでお気軽に行ってください！）

$ bundle install
$ bundle exec rake notee:start

NoteeのSetting

後、設定しなきゃいけないのは、reCAPTCHAだけです！

reCAPTCHAに関しては、以下のWikiを参考にしてください。

Setting Recaptcha

config/initializers/notee.rb

require 'notee'

# Recommendation using .env

Notee.configure do |config|

  # root-user
  config.notee_id = "your_name"
  config.notee_password = "your_password"

  # recaptcha
  config.recaptcha_key = "hogehoge"
  config.recaptcha_secret_key = "hogehoge"

  # blog
  config.blog_meta = {
      title: "Notee",
      url: "http://hogehoge.com",
      keyword: "hoge, hoge, hoge",
      description: "【react&rails】notee is creating CMS(blog) app by only one command.",
      og_image: "http://hogehoge.com/hoge.png"
  }

  # google-analytics
  config.google_analytics = "hogehogehogehoge"
end

この部分さえ正しくセッティングしてもらえれば、あとは何もしなくてもブログ、メディアを始めることが可能です！

# recaptcha
  config.recaptcha_key = "hogehoge"
  config.recaptcha_secret_key = "hogehoge"

Noteeの機能一覧

markdown記法でかける
書いた内容をリアルタイムにPreviewできる
画像とかも割と簡単にアップロードできる
codeはもちろんシンタックスハイライト対応
rakeコマンド１発でブログが作れる（RailsEngine使用）
Comment機能もcode1行で実現
User登録機能あり（メディア運営も可能）

ブログの初期デザインはこんな感じです！

もちろん、スマホ対応もしています！！！

ここまで読んでくださり、ありがとうございます！
よかったらリポジトリも見てみてください！！！

React

Reactの構成

noteeはrails engine製なので、RailsでReactを扱うように基本的には./frontendディレクトリの中にreactをかきます。そして、reactのコードをコンパイルして一つのファイルにしてから、assetsにぶち込む形を取っています。

そして、frontend内のディレクトリ構成は以下のようになっています。

frontend
　├ config /
　│ └ development /
　│ └ production /
　├ node_modules /
　├ src /
　│ └ javascripts /
　│　　└ actions /
　│　　└ components /
　│　　　　└ :hogehoge/
　│　　　　└ commons /
　│　　└ constants /
　│　　└ dispatcher /
　│　　└ stores /
　│　　└ utils /
　└ package.json

config /

それぞれの環境に合わせたwebpack用の指令書みたいなの

frontend/config/production.js


var webpack = require('webpack')

module.exports = {
  entry: {
    application: './src/javascripts/app.js',
  },
  output: {
    path: '../app/assets/javascripts/notee',
    filename: '[name].js'
  },

  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify('production'),
        BROWSER: JSON.stringify(true)
      }
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel?presets[]=react,presets[]=es2015,presets[]=stage-2'
      }
    ]
  }
}

productionはproductionできちんと設定しないとWARNINGがでまくります。

src/javascripts/components/commons

ここに複数画面で使用するコンポーネントをまとめて置いてあります。

src/javascripts/utils

ここに、view以外の共通で使用するコードをまとめて置いておきます。（EventEmitter系とか！）

こちらが参考になったURLです！

フロントエンドエンジニアのための「俺の最近のRailsのJS開発環境」を考察する

http://qiita.com/izumin5210/items/c642ae75f916d301456a

WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する

http://qiita.com/necojackarc/items/afa674ab10aafa9784eb

5年間開発しているRailsプロジェクトにReact + Reduxを導入した話

https://www.wantedly.com/companies/wantedly/post_articles/30026

Reactでの学び

Components群の切り分け方

今回自分は、各メインセクションとなるであろうページにごとにディレクトリを作成し、

Posts
- PostSection
  - PostPreview
  - ...
  - etc
Users
- UserSection
- UserSectionEdit
Categories
- CategorySection
  - CategoryForm
- CategorySectionEdit
...
etc

のように、親ページには全てSectionという名前をつけて管理することにしました。
何が、親で何が子なのかかなりわかりにくくなるので、親と子の判別はしっかりやったほうがいいと思います。

また、各ページで共通の部品に関しては、先ほども述べたように

Components
- Commons
  - authority
  - snackbar
  - table

のように、Commonsにまとめておき、propsを調整しながら呼び出して各ページで使用するという方法になりました。

上記の二つを徹底することでかなり見通しのいいディレクトリ構成になったと思います。
また、共通コンポーネントなどを作る際には、material-uiなどを参考に作るととても意識しやすいと思います！
出来るだけ汎用性が高いように作ることを心がけました。

EventEmitterは一箇所で管理するのがオススメ

先ほど乗せたutils/の中にEventUtilのような、Eventを管理するモジュールを使用したことでかなり全体の見通しが良くなりました。

また、Eventをちゃんとページ遷移時にdeleteしておかないと挙動が変になったり、WARNINGデタリシマス！

細かい警告やエラーはサイクルを意識すると大体消える

細々出てくるエラーは大体、サイクルを意識せずにsetstateしたり、setstate前のstateを呼び出そうとして起こります！そのときは、以下の記事を参考にどのタイミングで行うべきなのか考えると基本はうまくいくはずです。

視覚的にサイクルを意識するときはここ
http://qiita.com/kawachi/items/092bfc281f88e3a6e456

役割的にサイクルを意識するときはここ
http://qiita.com/yukika/items/1859743921a10d7e3e6b

何回も見るのでストックしておくといいと思います！！！

最後に

ここまで読んでいただいてありがとうございました！
もっと良いものを作れるように頑張ってきます！笑

紹介させていただきありがとうございました！

Notee
https://github.com/funaota/notee

※ポエム

"React"で作ったブログエンジンをお願いだから紹介させてください！お願いします！！