Мне было интересно, есть ли пример виджета погоды, который может быть создан быстро, и было бы лучше, если бы оно было легким.Создать приложение Weather Weather, используя Reactjs
1
A
ответ
2
Я хотел бы поделиться некоторыми понятиями создания приложения с помощью 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