ノードJSを持つジオコンプリート

Question

ノード・アプリケーションを使用して、JQueryプラグインのGeocomplete(Github example)を使用したいと思います。私はかなり新しいWebアプリケーションであり、JQueryのものをどのように統合するかを考え出すのに問題があります。

私はそうのように私のページをレンダリングしています：

render() { 
    let { input } = this.state; 

    return (
    <div className="row"> 
     <div className="col s12"> 
     <h4>Welcome!</h4> 
     <input 
      id="geocomplete" 
      placeholder="Enter a search location” 
      type="text" 
      onChange={this.onInputChange.bind(this)} 
      value={input} /> 
     <a 
      onClick={this.onSearchClick.bind(this)} 
      className='waves-effect waves-light btn'>Search!</a> 
     </div> 
    </div> 
) 
} 

例のようなものを行うに示しています）

$("#geocomplete").geocomplete() 

をしかし、私はその中には、（レンダリングを行うように見えることはできませんので、私どうしてわからないのか アイデア

ありがとうございます！

Answer 1

ブラウザで実行されるクライアントサイドのJavaScriptと、Node.jsで実行されるサーバーサイドのJavaScriptが混乱しています。

Geocompleteはクライアント側のライブラリです。したがって、レンダリングされたHTMLの<script>タグで参照する必要があります。例えば：

render() { 
    let { input } = this.state; 

    return (
    <div className="row"> 
     <div className="col s12"> 
     <h4>Welcome!</h4> 
     <input 
      id="geocomplete" 
      placeholder="Enter a search location” 
      type="text" 
      onChange={this.onInputChange.bind(this)} 
      value={input} /> 
     <a 
      onClick={this.onSearchClick.bind(this)} 
      className="waves-effect waves-light btn">Search!</a> 
     </div> 
    </div> 
    <script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> 
    <script src="/some/path/that/serves/jquery.geocomplete.js"></script> 
) 
} 

は、その後、あなたは（あなたはほぼ確実にも<script>タグを含むなってしまいます）、クライアント側のスクリプトでそれを使用することができます。

ちなみに、render()関数は純粋なJSであると考えられていますか、それともいくつかの秘密のテンプレート言語ですか？テンプレート言語の場合は、どの言語かを記述する必要があります（JSと曖昧に見えるため、人々は混乱します）。しかし、それが純粋なJSでなければならない場合は、本当に深刻な構文上の問題があります。