Изучаем JavaScript

Чтобы разобраться с этой темой потратила неделю. К счастью, в современном JS всё реализуется намного проще. Асинхронный запрос с fetch выглядит так: function getData() {     const url = link;   fetch(url)     .then(res => res.json())     .then(data => {         // code     }); } Более современным и удобным считается использование async/await async function getData() {     const url = link;   const res = await fetch(url);   const data = await res.json(); }

https://www.youtube.com/watch?v=0grybmrgc2Q https://www.youtube.com/watch?v=Fxl_LU68Q5g https://www.youtube.com/watch?v=J49QqgrxCeQ https://www.youtube.com/watch?v=Tln-wtsp8do https://www.youtube.com/watch?v=3jPak-NfbQo https://www.youtube.com/watch?v=W8sobFFfYks https://www.youtube.com/watch?v=DoreDuc_O-U

1. Создаём приложение При попытке использовать для создания приложения команду create-react-app fancy-weather-react получаю уведомление Please note that global installs of create-react-app are no longer supported. Удаляю существующую версию npm uninstall -g create-react-app Выполняю команду npx create-react-app fancy-weather-react Заходим в папку проекта cd todo запускаем команду npm start Открывается страница браузера, адрес которой http://localhost:3000/ Это и есть адрес нашего проекта. https://learn-reactjs.ru/basics/state-and-lifecycle Раньше состоянием могли обладать только компоненты-классы. Однако с появлением хуков состоянием могут обладать и компоненты-функции. преобразовать компонент-функцию в класс за пять шагов: .... Заменить props на this.props в теле метода render(). специальные методы, чтобы запускать определенный код, когда компонент монтируется или демонтируется: Метод componentDidMount() срабатывает после того, как компонент был впервые ...

Прекрасное видео:   https://youtu.be/VtEwDiC5npA Есть два файла index.js, calc.js Из calc.js в index.js импортируем функции Импортируем функцию calc.js function add(a, b) {   return a + b; } export  { add } index.js import { add } from './calc'; console.log(add(3, 5)); // 8 Импорт по умолчанию calc.js function add(a, b) {   return a + b; } export default add; index.js import add from './calc'; console.log(add(3, 5));  // 8 Импортируем сайд-эффект calc.js document.querySelector('body'); body.style.backgroundColor = '#22ee44'; index.js import './calc.js'; // цвет фона стал зелёным Так тоже работает calc.js function bgc() {   const body = document.querySelector('body');   body.style.backgroundColor = '#22ee44'; } export default bgc; index.js import bgc from './calc'; bgc();

1. Идём по адресу ...node_modules\react-scripts\config\webpack.config.js 2. В файле webpack.config.js меняем строку на new webpack.DefinePlugin({   '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })' }), 3. Запускаем проект  npm start

Устанавливаем Sass глобально: npm install -g sass Теперь, если зайти в папку проекта, скомпилировать index.scss в index.css можно командой: sass index.scss index.css В папке проекта появились файлы index.css и index.css.map Файл map это связь между sass и css. Подключать в index.html следует файл index.css <link rel="stylesheet" href="index.css"> Ок. Всё работает. Но вводить команду sass index.scss index.css каждый раз, когда что-то изменил в scss-коде и хочешь посмотреть на результат, нерационально. По этой инструкции устанавливаем и подключаем Webpack https://dev.to/pixelgoo/how-to-configure-webpack-from-scratch-for-a-basic-website-46a5 Запускаем команды npm run build  // компилирует scss в css и сохраняет в папке dist npm run watch // отслеживает изменения и компилирует их  Компиляция SASS онлайн: https://www.sassmeister.com/ Переменные sass $color: red; $padding: 10px; a {   color: ...

В предыдущей теме  мы пришли вот к такому образцу кода function Animal(name, voice) { this.name = name; this.voice = voice; } Animal.prototype.say = function() { console.log(this.name, 'says', this.voice) } const dog = new Animal('dog', 'woof'); dog.say(); // dog says woof С появлением в JavaScript классов писать подобный код стало удобнее class Animal {   constructor(name, voice) {     this.name = name;     this.voice = voice;    }   say() {     console.log(this.name, 'says', this.voice)   } } const dog = new Animal('dog', 'woof'); dog.say(); Классы это синтаксический сахар. Они не создают никакой новой функциональности, но делают более простой и удобной работу с прототипами. На основе базового класса Animal  мы можем создавать дочерние классы и добавлять им новые свойства

Прототипы в JavaScript существовали с самого момента его создания. Идея прототипов следующая. Представим, что у нас есть несколько видов животных, у каждого из которых есть функция say(), которая воспроизводит голос этого животного. Но, если разные объекты имеют одну и ту же функцию, есть ли смысл хранить её внутри каждого такого объекта? Или лучше создать общий для них родительский объект, поместить в него данную функцию и дать остальным объектам доступ к ней? Этот родительский объект, хранящий функции всех его потомков, называется прототипом. Правило обращения к методам прототипа следующее. Вначале js-движок ищет функцию внутри самого объекта, если не находит - ищет в его прототипе. Но прототип - тоже объект и у него есть собственный прототип. Таким образом js-движок в поисках вызванной функции проходит по всей цепочке прототипов Перейдём от теории к коду. Вначале напишем код  животных, у каждого из которых есть функция say() Прототипов пока нет const dog...

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