"React"で作ったブログエンジンの紹介

# Notee

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

https://github.com/funaota/notee

![notee_edit.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23873/8d95cfd2-bc0d-401b-b435-21a2d265990c.gif)



## Noteeのインストール

Gemfileに'notee'を追加して

```ruby:Gemfile
gem 'notee'
```

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

    $ bundle install
    $ bundle exec rake notee:start

## NoteeのSetting


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

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

[Setting Recaptcha](https://github.com/funaota/notee/wiki/Setting-reCAPTCHA)



```rb: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

```

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

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

## Noteeの機能一覧

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

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

[![mo.gif](http://gifyu.com/images/mo.gif)](http://gifyu.com/image/Swox)

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

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

https://github.com/funaota/notee

# 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用の指令書みたいなの

```js: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

![notee_facebook.png](https://qiita-image-store.s3.amazonaws.com/0/23873/2492fa3d-afba-22e1-4261-6a26db3f2f3b.png)

※ポエム