Настраиваем create-react-app: HTTPS, SSL, PROXY, SCSS, немного про DEPLOY

Рет қаралды 7,901

Елена Литвинова — Искусство Веб-разработки 🛸

Күн бұрын

Создадим create-react-app. Научимся настраивать https, ssl, proxy, scss на реальном тестовом задании, которое решала разбирала в прошлом видео.
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский KZfaq: @webelart_en
💁🏼‍♀️ Инстаграм: / webelart
🦄 LinkedIn: / webelart
❤️ Ссылка на голосовалку по видео: forms.gle/ahhftfZQNN6QVEVc9
❤️ Исходники к заданию (react + ssl) / iskhodniki-k-app-57522640
Ссылки, которые разбирала в видео:
🍀 Документация - create-react-app.dev/docs/get...
🍀 HTTPS - create-react-app.dev/docs/usi...
🍀 Proxy - create-react-app.dev/docs/pro...
🍀 Переменные окружения: create-react-app.dev/docs/add...
🍀 SCSS - create-react-app.dev/docs/add...
🍀 mkcert - github.com/FiloSottile/mkcert
🍀 Deploy DigitalOcean - www.digitalocean.com/communit...
Видео, которые упоминала:
⭐️ Разбираем тестовое задание на senior frontend developer в Лондоне | react + node js - • Про собеседования и за... - • Разбираем тестовое зад...
00:00 введение.
00:23 о тестовом задании
03:03 документация create-react-app
05:35 создаём react app
13:55 https & ssl
25:34 stylus & scss
28:57 поговорим о deploy
Рекомендую посмотреть ВСЕ ВИДЕО на моём канале! 😈
Я рассматриваю различные темы веб-разработки. На текущий момент: профессиональный JavaScript, вёрстка, примеры на чистых технологиях (React, NodeJs, JS, CSS, HTML) и опыт в 10+ лет.

Пікірлер: 29

@love_renata_russia 14 күн бұрын

Большое спасибо!

@theoty-js 2 жыл бұрын

Клёвый канал, Елене респект за такие ролики

@Dmitrijserg Жыл бұрын

Лена, ты супер. Спасибо за контент, буду у тебя учиться.

@suslikest3708 2 жыл бұрын

Канал топовый по фронту уже давно смотрю и много узнал нового👍😀

@egoist2956 2 жыл бұрын

Лайкос!

@____Olga__ 2 жыл бұрын

beautiful Helena, thank you .

@webelart 2 жыл бұрын

❤❤❤

@daeriofrixell199 Жыл бұрын

использую только create-react-spp, ибо ток этому и научился ахахах было бы здорово увидеть подробный видос про хостинг/релиз сайта. В русском ютубе такого вроде нет

@Ramosok 2 жыл бұрын

круто!

@dima__rx5fw3rm1n 9 ай бұрын

CRA для React - это как Spring Boot для Spring - конфиги сами настроили. А в случае чего - дописали ручками

@webelart 9 ай бұрын

Ой, я уже не помню, что я там делала. Было года 2 назад.

@dima__rx5fw3rm1n 9 ай бұрын

Хорошо структурировали. Надеюсь, благодаря вам перестанут игнорить CRA из-за NextJS, который, все-же, больше для статики) Осталось только пару линтеров, TypeScript и корсы настроить для запросов (хэдеры). И вот уже в целом норм для стартапа и не только) А проксю на NestJS сделать как точку входа в бэк? Типа отсева от DoS-атак?

@webelart 9 ай бұрын

Спасибо :) NestJs кстати не юзала. NextJs не так плох кстати, но для небольших проектов. А так мне нравится, когда всё сам структурируешь, больше контроля и меньше магии и неожиданных моментов. Например, мне до сих пор не нравится в next реализация картинок, да и после сборки не смотря на высокий performance, куча каких-то лишних выгрузок, подключений в html, оберток. И еще он у меня как-то с CSS заглючил, когда я доклад готовила.

@deniskotov 2 жыл бұрын

Лен, я только начал изучать Реакт. И он в паре с редаксом кажется мне значительно сложнее чистого js. Подскажи, как его проще учить? Редакс сложно идет.

@webelart 2 жыл бұрын

Привет, Денис! Когда в прошлом только начинала изучать редакс тоже было очень не просто впилить в концепцию. Мне кажется здесь очень важна практика, чтобы сам попробовал и сам написал. И только после этого как правило концепции усваиваются. То с чего стартануть, можно поискать на ютубе уроки по redux и вместе построить приложение, сначала по уроку, либо книгу купить (обычно в них есть практика), либо пойти на курс. Мне тема с курсами нравится если тема совсем новая (допустим новый язык) + там и домашку есть и вопрос можно задать. Из любимых learn.javascript (learn.javascript.ru/courses/react ). После круто уже на работе допустим внедрять в рабочий проект, чем больше практики, тем больше опыта и понимания.:)

@deniskotov 2 жыл бұрын

@@webelart спасибо! Так и сделаю🙏💕

@lesjoni8347 Жыл бұрын

Redux стал проще с toolkit

@IvJaiN 2 жыл бұрын

Здравствуйте! Раз вы не использовали create-react-app, то в своей повседневной работе обычно создавали свою кастомную настройку вебпака?

@webelart 2 жыл бұрын

Здравствуйте! Да, когда не использую create-react-app, то собственная :)

@user-yq3rz6ug7f 2 жыл бұрын

Некоторые работодатели указывают в требованиях умение верстать под реакт. Вы могли бы рассказать, как это? Или где об этом можно почитать? (В интернете очень много источников и на самом деле непонятно, где надежная информация)

@webelart 2 жыл бұрын

Реакт - это javascript библиотека. Он позволяет строить интерфейсы, т.е. клиентскую сторону (есть html, css, js), то реакт он позволяет рендерить html через js, благодаря чему можно сократить время перехода между вкладками и перезагрузки страниц целиком, а загружать только необходимую информацию. Официальная документация реакта находится здесь reactjs.org, в целом она довольно хорошая, но возможно потребуется помощь и разъяснения если вы новичок и еще не работали с подобными библиотеками. Здесь можно попробовать на какой-нибудь курс сходить чтобы показали, помогли настроить, вопросы можно было позадавать. Вероятно после курса не будет все 100% понятно, но какие-то основы появятся. Мне нравятся курсы на learn.javascript.ru/courses, но здесь важна база JavaScript, в целом перед изучением реакт нужно понимание JS, т.к. реакт это либа на нём. Также я ещё бывало книжки в прошлом покупала на новую технологию :) Самое крутое обучение - это реальная практика, например, пойти куда-то стажироваться с базовым набором знаний веб-технологий, который у вас есть. Это будет очень круто, вы так и на реальных проектах начнёте работать и постепенно в код погружать, да и стажировка подразумевает, что коллеги будут помогать и объяснять :)

@user-yq3rz6ug7f 2 жыл бұрын

@@webelart ух ты! Спасибо за такой развёрнутый ответ. Да я проходила у них курс по js для новичков. И впечатление осталось хорошее.

@user-ze3cb8gi8i Жыл бұрын

А я установив "HTTPS=true react-scripts start" в scripts.start , при запуске получаю ошибку ""HTTPS" не является внутренней или внешней командой, исполняемой программой или пакетным файлом." Можете подсказать как найти причину?