使用 Reactjs 创建一个快速的天气小部件应用程序

Question

想知道有没有可以快速制作的天气widget的例子，如果轻量级就更好了

Answer 1

我想分享一些使用 JavaScript、Jquery 和 [= 创建应用程序的概念27=]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 link.

中找到

2) 我在这里使用 Jquery 创建了相同的示例：plnkr2

3) 我想知道，如果我使用本机 JavaScript 为极轻量级应用程序构建相同的内容会怎样？然后我也在这里使用 pure JavaScript 创建了相同的内容：plnkr3

使用 Reactjs 创建一个快速的天气小部件应用程序

Create a quick Weather widget app using Reactjs

javascript

jquery-plugins

yahoo-weather-api

reactjs

google-geolocation