Изучаем JavaScript

Приложение, которое показывает прогноз погоды на 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">         ...

Приложение, которое показывает прогноз погоды для определённых населённых пунктов. 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. В...

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

В предыдущей части мы сумели передать событие клика с кнопки элемента TodoListItem в компонент App. В  App находится массив todoDate, на основе которого формируется список дел. Но простое удаление элемента из массива не вариант - после удаления элемента реакт не будет знать, что приложению следует обновиться. Нам нужно сделать массив todoDate частью состояния App и удалять его при помощи метода setState(). Использование этого метода даёт реакту чигнал о том, что произошли какие-то изменения и приложение нужно обновить. Преобразуем App в класс и сделаем todoDate частью его состояния. Было: import React from 'react'; const App = () => {    const todoDate = [     {label: 'Learn JS', important: true, id: 1},     {label: 'Create awesome app', important: true, id: 2},     {label: 'Drink coffee', important: false, id: 3}   ];        return (       <div className="to...

При клике по кнопке с значком корзины будем удалять пункт списка. Здесь есть проблема: массив, на основе которого формируется список дел, находится в верхнем компоненте приложения App, а кнопка, при клике по которой должен удаляться элемент массива, находится в компоненте TodoListItem, который, в свою очередь, вложен в компонент TodoList. То есть нам нужно как-то передать событие клика из компонента TodoListItem в TodoList, а оттуда в App. Давайте вспоминать. Когда нам нужно было передать элементу списка событие клик, мы добавили ему свойство onClick в которое передали функцию. export default class TodoListItem extends Component {   render() {     const { label, important = false } = this.props;       return (         <span            className="todo-list-item-label"            onClick = {() => console.log(`${label}`)}>     ...

Классы в React используем в тех случаях, когда нам нужно хранить внутреннее состояние компонента, которое изменяется в ходе выполнения программы. Такое состояние называется State. State очень похоже на Props - свойства, разница только в том, что State можно изменить, а Props - нет. State это всегда объект. Хранить State можно в конструкторе export default class TodoListItem extends Component {      constructor() {     super();     this.state = {       done: false     }   } } Или при помощи полей класса (экспериментальное свойство пока ещё не вошедшее в стандарт). Дополнено:   уже вошедшее export default class TodoListItem extends Component {      state = {       done: false     };  } Напишем код. который позволяет в зависимости от значения  done добавлять к пунктам списка дел отметку о выполнении. Для этого достаточно пр...

Самое базовое событие клик. Добавляется нужному элементу при помощи свойства onClick в которое передаётся функция. export default class TodoListItem extends Component {   render() {   const { label, important = false } = this.props;     return (         <span           className="todo-list-item-label"           onClick = {() => console.log(`${label}`)}>           {label}         </span>     );   }; } Если функция содержит больше одной строки кода, помещать её в JSX нерационально. Попробуем вынести функцию из JSX  внутрь класса. Вот такой код вызывает ошибку TypeError: Cannot read property 'props' of undefined: export default class TodoListItem extends Component {   onLabelClick () {     console.log(`${ this.props. label}`);   }      render() {   const ...