react ガンマン時計

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

• src/index.js
• src/Gunclock.js (下記のpreより、さすがに、もっと、複雑)

■react
下記で、枠組みが作られる

 $ npx create-react-app gunclocks       (枠組みをつくる:実行可能なapができる)
 $ cd gunclocks
 $ npm start                            (apの実行)

 $ ls
 README.md  node_modules  package-lock.json  package.json  public  src

■src/index.js
・Gunclockクラスで、「マークダウン」(htmlの形式
で囲んだ記述など)を、返却する
・Gunclockを、タグのように記述することで、入れ子ができる「<Gunclock />」
-----------------------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//import App from './App';
import Gunclock from './Gunclock';
import * as serviceWorker from './serviceWorker';

//ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Gunclock />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
-----------------------

■src/Gunclock.js 
・Gunclockクラスで、「マークダウン」(htmlの形式
で囲んだ記述など)を、返却する
-----------------
import React, { Component } from 'react';

export default class Gunclock extends Component {

  constructor(props) {
    super(props);
    this.state = {
      gunclocks: [],
      name: ''
    };
  }

  render() {
    const { gunclocks } = this.state;

    return (
     

      
      登録
      

        {gunclocks.map((gunclock, index) => 
{gunclock}
)}
      
     
    );
  }

}
-----------------



■参考
https://webkikaku.co.jp/homepage/blog/hpseisaku/javascript/react-start/


■heroku
$ git init
$ git add -A
$ git commit -m "gunclock-react"

$ heroku login (ブラウザで認証)

$ heroku create gunclock-react

$ heroku config:set PORT=80
$ heroku config:set GUNCLOCK_API=https://gunclock-api-express.herokuapp.com/gunclock

$ git push heroku master

https://gunclock-react.herokuapp.com/


& & ' ` "  (test for 'escape-pre')