Reactjsを使って天気ウィジェットアプリを作成する

Question

すばやく作成できる天気予報ウィジェットの例があるかと思いましたが、軽量の方が良いでしょう。

Answer 1

私はJavaScriptの、jQueryのとReactjsを使用してアプリケーションを作成するためのいくつかの概念を共有したいと思いました。他のどの情報源よりも迅速に学習するのに役立ちます。ここで私はReactjsを使用したものです：

HTML：

<div style="width: 310px;display: block;float: left; padding: 20px;"> 
    <div id="weather-app"></div> 
</div> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js'></script> 
<script src="script.js"></script> 

JS：上記のコード

var Main = React.createClass({ 
    getInitialState: function(){ 
    return { 
     isLoading: true, 
     toggleForm: false, 
     isError: false 
    } 
}, 
setError: function(value){ 
    this.setState({isError: value}); 
}, 
changeLoading: function(value){ 
    this.setState({isLoading: value}); 
}, 
onToggleForm: function(value){ 
    this.setState({toggleForm: value}); 
}, 
onFormSubmit: function(c, s){ 
    this.onToggleForm(false); 
    this.refs.change.toggleForm(); 
    this.refs.front.reRender(c, s); 
    this.setState({isError: false}); 
}, 
render: function(){ 
    return (
    <div id="weather" className="weather"> 
     <ChangeBtn ref="change" isLoading={this.state.isLoading} toggleForm={this.onToggleForm} /> 
     <Front ref="front" isLoading={this.state.isLoading} isError={this.state.isError} setError={this.setError} loadCallback={this.changeLoading} toggle={this.state.toggleForm} /> 
     <Form isLoading={this.state.isLoading} toggle={this.state.toggleForm} onFormSubmit={this.onFormSubmit} isError={this.state.isError} setError={this.setError} /> 
     <Spinner isLoading={this.state.isLoading} /> 
    </div> 
) 
} 
}) 

ReactDOM.render(<Main />, document.getElementById("weather-app")); 

1）プレビューだけです。完全な例はこのplnkr1リンクで見つけることができます。

2）私はここにjQueryのを使用して同じ例を作成しました：plnkr2

3）私は、私は非常に軽量なアプリケーションのネイティブJavaScriptを使用して同じことを何を構築する場合、だろうか？次に、の純粋なJavaScriptを使用して同じものを作成しました：plnkr3