react ガンマン時計

node.js の react で、ガンマン時計です。

react ガンマン時計

ガンマン時計 (@heroku)

node.js の フロントエンド向けフレームワーク react です。

  • フロントをreact。
    • 実行すると Node.js のサーバとなり動作します
    • クライアントで実行をするJavaScriptを生成します
    • ブラウザ側にdownloadして動作し、 ユーザの入出力(ブラウザインタフェース)を管理します
    • ページに「state」という情報を保持して、 ページをレンダリングします。
    • JSXという言語(Javascript拡張)でhtmlを生成します
    • SPA(Single-Page-Application)の記述が楽、な気がします
  • バックエンドは Express+MongoDBです(Angular の実験で作ったもの)。
    • こちらも Node.jsのサーバ
    • RESTのAPIを実装しています

【フロント react】

github

herokuで公開

【バックエンド express+MongoDB】

github

herokuで公開

仕様 : REST-API (CURLアクセス例)
  • GET (get all)
    • $ curl -X GET https://gunclock-api-express.herokuapp.com/gunclock
  • GET (get one)
    • $ curl -X GET https://gunclock-api-express.herokuapp.com/gunclock/5e508050de797e6001faa558
  • POST (create)
    • $ curl -X POST https://gunclock-api-express.herokuapp.com/gunclock -H 'Content-Type:application/json' -d '{ "color":"#ffcccc", "size": "15" }'
  • PUT (update one)
    • $ curl -X PUT https://gunclock-api-express.herokuapp.com/gunclock/5e508050de797e6001faa558 -H 'Content-Type:application/json' -d '{ "color":"#ccffcc", "size": "20" }'
  • DELETE (delete one)
    • $ curl -X DELETE https://gunclock-api-express.herokuapp.com/gunclock/5e50817cde797e6001faa559

[ ガンマンのページへ戻る ]