Сообщения

Сообщения за август, 2019

React-приложение Прогноз погоды на 5 дней

Изображение
Приложение, которое показывает прогноз погоды на 5 дней для определённого населённого пункта. 1. Регистрируемся здесь https://openweathermap.org/forecast5 На почту приходит API key 2. Создаём приложение my-weather-app Для этого выполняем команду create-react-app my-weather-app 3. Создаём компонент WeekContainer import React from 'react'; class WeekContainer extends React.Component {   render() {     return (       <div>         <h1>Hello World!</h1>       </div>     )   } } export default WeekContainer; 4. Добавляем компонент WeekContainer в App import React, { Component } from 'react'; import './App.css'; import WeekContainer from './WeekContainer'; class App extends Component {   render() {     return (       <div className="App">         <WeekContainer />       </div>     );   } } export default App; 5. Для по

React-приложение Прогноз погоды

Изображение
Приложение, которое показывает прогноз погоды для определённых населённых пунктов. 1. Регистрируемся здесь  https://openweathermap.org/forecast5 На почту приходит API key 2. Создаём приложение -weather Для этого выполняем команду create-react-app weather 3. Создаём компонент WeatherDisplay Пока что он отображает произвольный текст class WeatherDisplay extends Component {   render() {     return (       <h1>Displaying some Weather!</h1>     );   } } 4. Изменяем компонент App, чтобы отобразить  WeatherDisplay: class App extends Component {   render() {     return (       <div className="App">         <WeatherDisplay name={"12345"} />       </div>     );   } } name={"12345"} это props - свойство компонента WeatherDisplay, которое из компонента App можно передать в WeatherDisplay 5. В начале файла App добавляем список городов, для которых будем отображать погоду const PLACES = ["Londo

Императивное и декларативное программирование

Изображение
В статье  Пишем полноценное приложение на React с нуля за час  встретилась фраза "Иногда нам нужно добавить императивный код. React-код обычно декларативен" Так чем же отличается императивный и декларативный код? Императивный подход предполагает пошаговую инструкцию по достижению нужного результата. Декларативный подход описывает желаемый результат, а как он будет достигнут не важно. Примеры из жизни: 1. Вы решили пригласить свою половинку на свидание. Вы пришли в ресторан, подошли к администратору и сказали… Императивный подход: Я вижу, что тот угловой столик свободен. Мы пойдём туда и сядем там. Декларативный подход: Столик для двоих, пожалуйста. 2. Ваш друг прислал вам смс: "Я  у Ашана. Как мне пройти до твоего дома?" Императивный подход : Сядь на автобус 678 и выйди на остановке “Улица Победы”. Поверни направо у первого светофора. На следующем светофоре поверни налево. Номер моего дома — 134.” Декларативный подход : Мой адрес: Энск, улица Победы,