2018-04-18

create-react-appの使い方

React.js javascript

正直webpackだとかbabelだとかbrowserifyとか全くわからない。

そんなアホな僕にも使えるツール、それがcreate-react-app

reactの開発には基本create-react-appとES6( ecmascript2015)だけあれば基本いいみたいだ。

そしてnpmはcreate-react-appと組み合わせるとまたすごくなる。

まずは適当なディレクトリでPowershellかterminalを開いて

create-react-app myapp

でappを作る。

f:id:devilmakelie:20180418102503j:plain

cd myapp

npm start

でアプリのモックが表示される。

これを起点にアプリを作っていく。

構造はこんな感じになっている。

簡単に説明する。

.
├── node_modules
├── package.json
├── public
├── README.md
└── src

重要なのはpackage.json

【package.json】

作ったアプリに対してどんなモジュールが必要だとか、スクリプトが出来るかとか、そういったことを定義するファイル。

このファイルに定義されていない限りたとえnpm install --global 【モジュール名】でインストールされたモジュールだろうと読み込まれない。

【src(ディレクトリ)】

ここにアプリ本体を書いていく。最初にあるファイルたちは全部削除してOK

①必要なモジュールのインストール

必要なモジュールはmyappディレクトリでpowershellかterminalを開いて

npm install --save 【モジュール名】

で必要なモジュールをインストール出来る。ちなみに--saveオプションを付けておけばpackage.jsonに自動的に登録されてインポートできるようになるスゴイ

②テスト

npm startでテスト出来る。ちなみにホットリロード式になっているのでセーブさえすれば即座に変更が反映される。スゴイ

③完成したアプリをアップロードできる形にする。

npm run buildでpublicディレクトリにアプリがパブリッシュされる。これをアップロードすればいいらしい。スゴイ

スゴイ。

2018-04-18

nodeインストールからcreate-react-appまで

javascript React.js

node.jsのインストールからcreate-react-appまでを簡単に解説する。

【流れ】

nvmインストール
nodeインストール
create-react-appインストール

【nvm】
nodeをインストールする前にこのバージョン管理ツールをインストールしておくと後が楽

インストール方法はこっち

mosapride.com

【node.js】
nvmをインストールしたらnvmを使ってnode.jsをインストールする。

nvm install 【node.jsのバージョン】でインストール出来る。ちなみに

nvm install latestで最新のStableバージョン

nvm install ltsで長期サポート(Long Term Support)のバージョンが入る。

ちなみに複数インストールした場合nvm use 【nodeのバージョン】で使うバージョンを指定できるが、最初はいらない。

【npm】 node.jsをインストールしたらこちらが使えるようになる。

【create-react-app】 reactのいろいろな環境設定を一発でやってくれるツール。便利。

npm install --global craete-react-app

で入る。

2018-04-16

reduxの理解の仕方。

redux javascript

redux難しいなって思ってたけど実はそうでもなかった。

公式のcounter-vanillaが一番わかりやすかった。

github.com

一番重要なことはここの画像をお借りしたい

f:id:devilmakelie:20180416113124p:plain

(state,action) => state

大切なのはコレ。

stateとactionで新しいstateを作って
新たなstateで描画し直す。

これを行うためのフレームワークだった。

画にするとこんな感じ。

f:id:devilmakelie:20180416115700j:plain

これを書いて理解するために何度も言うようだが公式のcounter-vanillaが最もわかりやすかった。

自分なりにコメントを入れたのでよかったら参考にしてほしい。

<!DOCTYPE html>
<html>
<head>
  <title>basic example</title>
  //reduxの読み込み
  <script src = "https://unpkg.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
  <div>
    <p>
      Clicked:<span id = 'value'>0</span>times
      <button id = 'increment'>+</button>
      <button id = 'decrement'>-</button>
      <button id = 'incrementIfOdd'>Increment if odd</button>
      <button id = 'incrementAsync'>Increment async</button>
    </p>
  </div>
  <script>

  //reducerの作成　actionの登録。
  //(state,action)=>(state)の形で返すための1歩目
    function reducer(state,action){
      //stateの初期値を設定する
      if(typeof state === 'undefined'){
        return 0
      }
      switch(action.type){
        case 'INCREMENT':
          return state +1
        case 'DECREMENT':
          return state -1
        default:
          return state
      }
    }

//(state,action)=>(state)の2歩目
//storeの作成。stateをファイルから分離させて別のところにする作業

    var store = Redux.createStore(reducer)

    var valueEl = document.getElementById('value')

    function render(){
      valueEl.innerHTML = store.getState().toString()
    }
    render()

//reduxにrenderを登録する。難しい理論はリンクに掲載してある。
//これで"dispatch"関数が実行されたら返り値に応じてrenderされるようになる。

    store.subscribe(render)

//actionの作成
//これはSQLで言うところのクエリの発行。"dispatch"関数によってクエリを発行し、
//戻って来た値でrenderされる。

    document.getElementById('increment')
      .addEventListener('click',function(){
        store.dispatch({type:'INCREMENT'})
      })

    document.getElementById('decrement')
      .addEventListener('click',function(){
        store.dispatch({type:'DECREMENT'})
      })
    document.getElementById('incrementIfOdd')
      .addEventListener('click',function(){
        if(store.getState()%2 !== 0){
          store.dispatch({type:'INCREMENT'})
        }
      })
    document.getElementById('incrementAsync')
      .addEventListener('click',function(){
        setTimeout(function(){store.dispatch({type:'INCREMENT'})},1000)

      })
  </script>
</body>
</html>

考えが今までのデータベースとHTMLといった関係から違う種類のものに変化しているので
そこに注意する。混ざってる

(state,action)=>state

何度も書いてるがこれがreduxのキモである。

2018-04-15

にっくき tracker-miner-f

うちのPCがスゲぇ音立ててた。

tracker-miner-fってプロセスと

tracker-extract ってプロセスがめっちゃ占有してた。

gist.github.com

とりあえずtopコマンドで表示されたPIDをKILLした。

なんやこれ

2018-04-15

■

React.js javascript redux

redux、そびえ立つ難しさよ。

https://redux.js.org

なんとなく何が難しいのかわからない、本当にヤバイ状態なので今自分にわかっていることをまとめる

React

reactjs.org

言わずとしれたすっごいフレームワーク。何でも出来る。ただしやってることはprops渡してcomponent描画してるだけ。

propsには何でも渡せる。functionだって渡せる！！

<header />
<main />
<title />
<footer />

みたいに（最終的には）すっごく単純に見せれる。

Redux

https://redux.js.org/redux.js.org

端的に言うとprops管理するためのフレームワーク。なぜこれが必要かと言うと

componentに子componentをもたせるとどこまでprops渡したのか複雑なアプリになってくるとわからなくなってくるため、storeで一元管理する。

これをデータの流れを作ることでシンプルに利用しよう、というわけらしい。

2018-04-06

create-react-native-app → npm start できなかった。

React.js javascript

centOS7でreact-native-app作ろうと思ったらできなかった。

github.com

watchmanがないらしい。

てことでソースからインストール。

facebook.github.io

$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v4.9.0  # the latest stable release
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install

npm startでバーコード表示されたから行けたかと思ったけど無理だった。

経過わかったら書きます。

2018-03-30

車で～時間圏内がどこからどこまでか

雑記

f:id:devilmakelie:20180330172236j:plain

Google Mapを使用したサービスのIsochrone and Isodistance Map Demoというサービス

を利用する。Githubページはコチラ。

これでどこまでかが一目瞭然。

使い方はマップ内にフラッグを立ててその後

f:id:devilmakelie:20180330172213j:plain

duration(距離)とdriving(車)にチェックしてCompute Polygonボタンを押してしばらく待てばOKです。

これは便利。

Yado_tech

旅館＋ITとはなんぞ