Сообщения

Redux

Изображение
Для простых приложений, таких как todo, используем один state, и передачу данных от него к каждому компоненту, который должен получить данные от state или может изменить их.  При этом данные проходят через все компоненты, даже если им самим эти данные не нужны, но нужны их потомкам. Эта проблема называется Property Drill Для более сложных приложений со слабо связанными компонентами возможно нахождение state в каждом компоненте. Но здесь серьёзная проблема, когда разработчик не учитывает наличие какой-то взаимосвязи компонентов, при этом приложение начинает работать неправильно, с ошибками. Эта проблема называется Fragmented State Для больших приложений со сложными взаимосвязями между компонентами используем redux При этом state выносится отдельно и есть функция reducer при помощи которой компоненты могут влиять на изменение state. События, которые влияют на состояние state называются Action Store контролирует влияние reducer и изменение state  Для работы с redux устанавливаем ...

Three.js

Изображение
Документация на русском  https://customizer.github.io/three.js-doc.ru/three.js-ru.htm Three.js Tutorials  https://sbcode.net/threejs/meshbasicmaterial/ Часть 1. Создание сцены Демо:  https://irinainina.github.io/threejs/day2/threejs8/ Часть 2. Установка Способ 1. Можно установить при помощи npm. Это предпочтительный способ, но тогда нужно будет использовать вебпак для сборки Для установки при помощи npm в папке проекта и выполните команду:  npm install --save three Импорт прописываем в начале js-файла import * as THREE from 'three'; Использование: const scene = new THREE.Scene(); Элементы управления (контролы), загрузчики и эффекты постобработки - импортируются отдельно из вложенной папки examples/jsm import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; Использование const controls = new OrbitControls(); Способ 2. Можно добавить библиотеку по ссылке с CDN При переходе по ссылке https://unpkg.com/three откроется последняя версия файл...

Прогноз погоды в 20 строк

Изображение
 1. Регистрируемся здесь  https://home.openweathermap.org/users/sign_up На указанную при регистрации почту приходит письмо с предложением подтвердить e-mail. Подтверждаем. На странице https://home.openweathermap.org/api_keys видим свой API key 2. Для получения информации о погоде создаём ссылку http://api.openweathermap.org/data/2.5/weather?q=Минск&lang=ru&appid=08f2a575dda978b9c539199e54df03b0&units=metric Здесь: Минск - название города, можно указывать на русском или на английском 08f2a575dda978b9c539199e54df03b0 - API key полученный в п.1  &lang=ru - язык отображения описания погоды (можно указать en) &units=metric - температура в градусах Цельсия (можно указать imperial для отображения температуры в градусах Фаренгейта) 3. Переходим по созданной в п.2 ссылке. Видим информацию о погоде. Для удобного её отображения можно установить расширение JSONView  https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgo...

Node Todolist

Изображение
Создание приложения, использующего NodeJS, Express, MongoDB. Источник  https://youtu.be/8bE_PBRriyU 1. Начало работы Инициализация нового приложения npm init -y Установка nodemon npm i nodemon -D В файле package.json прописываем скрипты для запуска приложения "scripts": {   "start": "node index",   "dev": "nodemon index" } Создаём файл index.js Устанавливаем и подключаем express и mongoose npm i express mongoose const express = require('express'); const mongoose = require('mongoose'); Создаём переменную app const app = express(); Создаём переменную PORT const PORT = process.env.PORT || 3000; Создаём сервер app.listen(PORT, () => {   console.log(`Server has been started on port ${PORT}`) }) Запускаем сервер командой npm run dev В консоли надпись  Server has been started on port 3000 Переходим по адресу  http://localhost:3000/  Там пока ничего ...

Node Jokes App

Изображение
Домашнее задание четвёртой темы курса Geekbrains Node JS. Необходимо создать веб-интерфейс, который позволяет получать данные из одного из нескольких сайтов (выбор возможен через форму) и указывать количество новостей на страницу. Устанавливаем модули - express - фреймворк для быстрого создания приложения - consolidate - для подключения handlebars - шаблонизатора для создания динамических страниц - request - для парсинга данных - cheerio - для фильтрации полученных в ходе парсинга данных Подключаем модули const express = require('express'); const consolidate = require('consolidate'); const path = require('path'); const request = require('request'); const cheerio = require('cheerio'); const { promisify } = require('util'); Создаём переменные Для того чтобы запрос приходил в виде промиса к которому можно применить функцию async/await const promisifyRequest = promisify(request); Порт, по которому будет работать приложе...

Деплой NodeJS на Heroku

Изображение
Видео:  https://youtu.be/wG7hX8Np1Pg В приложении меняем порт 3000 на process.env.PORT: const  PORT  =  process.env.PORT  ||   8080 Регистрируемся на Heroku  https://www.heroku.com/ Устанавливаем Heroku CLI  https://devcenter.heroku.com/articles/heroku-cli Проверяем, что Heroku CLI установился. Пишем в терминале  heroku  Выполняем команды: heroku create git init heroku git:remote -a app-name git add . git commit -m "feat: create node.js app" git push heroku master heroku open Открывается созданное приложение Команда  heroku create  сгенерирует ссылку с рандомным названием. Указать название приложения можно на этом же шаге  heroku create  unique-app-name или позже Если название в момент создания приложения не было дано, найти его можно в ответе heroku Переименовать приложение можно на странице настроек  https://dashboard.heroku.com/apps/node-jokes-app/settings Указыв...