場所ベースのtodoアプリ

私は、私はタスクを完了する必要があるアカウントにかかるtodoアプリケーションを構築するために反応を使用したい.私は家の中で「ミルクを買いません」というわけではありません.私は私のtodoアプリケーションがスマートであり、私はどこにいるか、私はどこに行くの意味を理解するタスクを示しています.

ドトミック
あなたが不慣れであるならばTodoMVC , それは、多くの助けを借りて、2012年ごろにパパOsmaniとSindrecontributors “今日の人気のJavaScript MV *フレームワークのほとんどで実装されている同じTODOアプリケーションを提供するプロジェクトとして-長年にわたって-フレームワークのためのスピードデートとしてそれを考える.”( 1 )
ToDomVCの実装を開始点として、我々は場所の機能を追加を開始する予定です.

トド反応成分で緯度と経度を加える

[]マップコンポーネントにマーカーを表示します.

また、最新のES 6と反応機能を使用してサンプルを更新するハウスキーピングの少しがあります.

//todo : "hello world "を実行する
“Hello World”をすぐに開始するための少なくとも2つのパスがあります.
あなたが働くアプリケーションから始めて、それがどのように働くかについて理解するために離れてそれをすることを望む脱構築主義者のより多くであるならば、

git clone https://github.com/tastejs/todomvc.git
cd todomvc
python -m SimpleHTTPServer

あなたは見ることができるはずですhttp://localhost:8000 そして、例/反応で見つかる反応例に移動してください.あなたがコンストラクリストのより多くの場合、空白のスレートを開始し、ピースを追加することによって構築する

npx create-react-app my-todo-app
cd my-todo-app
npm start

私はこのアプローチを好むのでcreate-react-app 終了するには、表示することができますhttp://localhost:3000 ライブリロードと基本的なハローワールド反応アプリで.

//ToDo :コンポーネントを追加する
反応コンポーネントは、ユーザーインターフェースの独立して再利用可能な部分をつくるための構成である.コンポーネントは、プロパティを入力として受け取り、レンダリングできる反応要素を返します.
todomvcはモデル,ビュー,コントローラが独立したアーキテクチャを実現することを目標とした.反応は、HTML/CSSからのJavaScriptのような人工的に別々のテクノロジーでなく、両方を含む疎に結合した構成要素によるむしろ別々の懸念を目的とします.ReactJSorgMain Concepts このデザインアプローチについてもっと詳しく説明します.
次のコンポーネントソースを確認します.デフォルトのテキスト入力ボックスを定義します.ロジックのいくつかを記述するのに役立つインラインコメントがあります.

import React, { Component } from 'react';

// This class definition is a React.Component so that we
// can use it in multiple places for the app.

class Location extends Component {

  // The constructor takes properties defined as element attributes
  // defined in JSX along with an initial default value for state.

  constructor(props) {
    super(props);
    this.state = {
      value: '0,0', // Null Island
      error: null,
    }
  }

  // When the component is rendered to the DOM for the first time
  // such as at page load we call the Geolocation API to determine
  // a latitude and longitude for the browser

  componentDidMount() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          this.setState({
            value: position.coords.latitude + ',' + position.coords.longitude,
            error: null,
          });
        },
        (error) => this.setState(
          {error: error.message}
        )
      );
    }
  }

// Respond to user input with event callback

changeLocation(evt) {
    this.setState({
        value: evt.target.value,
      }
    )
  }

  // The JSX definition for how to render this component on the page.  
  // In this case, it's a simple input field for new todo items.

  render() {
    return (
            <input
              className="new-todo"
              value={ this.state.value }
              onChange={ evt => this.changeLocation(evt) }
              />
    );
  }
}

//ToDo :マップを追加する
地図のために、我々は使用するつもりですMap Image API 静的イメージを取得するには、迅速かつ簡単な方法を提供します.パラメータはいくつかの使用になりますが、ここで基礎を解いてください.

w=600 指定した画像タイルの幅を指定し、h=300 高さ

z=10 ズームレベルを指定する

t=5 さまざまなスタイルの衛星タイル、トランジットなどから選択できるレンダリングスキームを指定します.

poitxs=1 , poitxc=black , and poitfc=yellow 関心のサイズ、背景色、および前景色の色を指定します

app_id=... and app_code=... ここの開発者プロジェクトのセクションで見つけられて、どんなAPIででも働くために必要です.

これらのパラメータの各々は、ユーザーに豊富なカスタマイズオプションを提供するためにコンポーネントの上の小道具または状態として記憶されることができました.マップイメージAPIに送る最後のパラメータはpoi= 任意のマーカーの緯度と経度のコンマ区切りのリストのために我々は配置したい.
私のToDoアプリの場合、私は場所と2つのタスクを追加しました

「図書館を返す」37.86836、122.26859

TechCrunchのためのピックアップバッジ

これらのtodo項目のために作成したいPOIクエリは以下のようになりますpoi=37.86836,-122.26859,37.784117,-122.401386 .
ここでは、それぞれで再レンダリングされるマップコンポーネントの例ですsetState() 興味のあるポイントを追加するときにコールします.

class Map extends Component {

  // For conciseness simply included all parameters in the querystring directly

  constructor(props) {
    super(props);
    this.state = {
      url: 'https://image.maps.api.here.com/mia/1.6/mapview?w=600&h=300&z=10&t=5&poitxs=16&poitxc=black&poifc=yellow',
      points: [],
    }
  }

  // Helper function to format list of points

  getPOIList() {
    if (this.state.points.length > 0) {
      let param = '&poi=';
      for (var poi in this.state.points) {
        param += poi.latitude + ',' + poi.longitude;
      }
      return param;
    }

    return '';
  }

  // Render method builds the URL dynamically to fetch the image from the
  // HERE Map Image API

  render() {
    return (
      <img
        src={ this.state.url
          + '&app_id=' + this.props.app_id
          + '&app_code=' + this.props.app_code
          + this.getPOIList()
          }
        alt="Todo Map"/>
    );
  }
}

一度定義すると、ルートコンポーネントコンポーネントなどの他のコンポーネントにこのコンポーネントを再利用できます.

<Map app_id="PUT_APP_ID_HERE" app_code="PUT_APP_CODE_HERE" />

//ToDo :ラップアップする
この最初のポストはTODAMVCを導入しました.そして、非常に基本的な反応成分のカップルがここにマップイメージAPIを活用します.今後の反応の記事では、この例には、ジオコーディングのルックアップのためのイベントの処理に対応するために、この例に深く飛び込むだろう、条件付きレンダリングでは、近くの場所でマップのクラスタリングを効率的にToDoの場所の間に取得する行列のルーティングは、場所の検索に関連するToDo項目を見つけるために、いくつかの他のプロジェクトの統合は、最終的なtodoアプリを磨くために.