Неделя 1: Основы JavaScript и React
Темы:
Обновление знаний по современному JavaScript (ES6+)
Введение в React: компоненты, состояние, свойства
Уроки:
Пересмотрите концепции ES6+: стрелочные функции, деструктуризация, промисы, async/await.
Пройдите базовый курс по React, создайте простое приложение "Hello World".
Изучите JSX и основы рендеринга компонентов.
Ресурсы:
Официальная документация React
Learn JS — учебник по JavaScript
Темы:
Обновление знаний по современному JavaScript (ES6+)
Введение в React: компоненты, состояние, свойства
Уроки:
Пересмотрите концепции ES6+: стрелочные функции, деструктуризация, промисы, async/await.
Пройдите базовый курс по React, создайте простое приложение "Hello World".
Изучите JSX и основы рендеринга компонентов.
Ресурсы:
Официальная документация React
Learn JS — учебник по JavaScript
ru.legacy.reactjs.org
React – JavaScript-библиотека для создания пользовательских интерфейсов
⚡2🌚2💯2
Последний урок цикла https://youtu.be/AE5vDkg0Dx8
YouTube
Реакт построение приложения (Андрей Зубков, Тёма Сенюков)
В этой лекции разберемся с фреймворком Next. Поговорим про роутинг, ssg, ssr и многое другое. Посмотрим на популярные решения для стейт менеджмента и разберемся с организацией слоя данных в приложении на примере одного из них.
Неделя 2: Введение в Next.js
Темы:
Установка и настройка окружения
Создание первого приложения на Next.js
Структура файлов и папок
Уроки:
Установите Node.js и npm на ваш компьютер.
Создайте новое приложение Next.js с помощью npx create-next-app.
Изучите структуру проекта и основные папки: pages, public, styles.
Ресурсы:
Официальная документация Next.js
Видеоуроки на YouTube по установке Next.js
Темы:
Установка и настройка окружения
Создание первого приложения на Next.js
Структура файлов и папок
Уроки:
Установите Node.js и npm на ваш компьютер.
Создайте новое приложение Next.js с помощью npx create-next-app.
Изучите структуру проекта и основные папки: pages, public, styles.
Ресурсы:
Официальная документация Next.js
Видеоуроки на YouTube по установке Next.js
nextjs.org
App Router: Getting Started
Learn how to create full-stack web applications with the Next.js App Router.
Написал небольшой виджет для Биткоина, отслеживает:
-курс
-индекс страха\жадности
-доминацию
-ставку на PolyMarket "BTC будет 100к в 2024"
Upd: оптимизировал размер css.
Пояснение, у некоторых api, есть ограничение на запросы, если значения не выводит, то нужно подождать пару минут, когда их снимут.
repo
-курс
-индекс страха\жадности
-доминацию
-ставку на PolyMarket "BTC будет 100к в 2024"
Upd: оптимизировал размер css.
Пояснение, у некоторых api, есть ограничение на запросы, если значения не выводит, то нужно подождать пару минут, когда их снимут.
repo
❤2
Неделя 3: Маршрутизация и навигация
Темы:
Файловая система маршрутизации
Динамические маршруты
Компонент Link для навигации
Уроки:
Создайте несколько страниц и настройте навигацию между ними.
Изучите динамические маршруты для создания страниц с параметрами.
Реализуйте навигацию с помощью компонента Link.
Ресурсы:
Маршрутизация в Next.js
Темы:
Файловая система маршрутизации
Динамические маршруты
Компонент Link для навигации
Уроки:
Создайте несколько страниц и настройте навигацию между ними.
Изучите динамические маршруты для создания страниц с параметрами.
Реализуйте навигацию с помощью компонента Link.
Ресурсы:
Маршрутизация в Next.js
nextjs.org
Building Your Application: Routing
Learn the fundamentals of routing for front-end applications with the Pages Router.
❤1
Попробовал переписать шпаргалку по playWright. Сама шпора бесполезная
Пока из-за недостатка опыта и способа, которым я все это завел, работает криво в некоторых местах. Визуал не смог перенести из прошлой версии, которая не была одностраничным приложением под капотом😵
Как-нибудь вернемся к этому, когда набьем руку на Next JS.
Из ачивок получилось сделать на css свойствах переключение "страниц" и допом узнал как оптимизировать tailwind, чтобы не грузился 2.5мб файл стилей, а только нужные 8 кб. Подрочили на циферки в PSI было 80, стало 100. Еще бы попросить GPT Seo написать нам😍
в repo можно сравнить версии
Пока из-за недостатка опыта и способа, которым я все это завел, работает криво в некоторых местах. Визуал не смог перенести из прошлой версии, которая не была одностраничным приложением под капотом
Как-нибудь вернемся к этому, когда набьем руку на Next JS.
Из ачивок получилось сделать на css свойствах переключение "страниц" и допом узнал как оптимизировать tailwind, чтобы не грузился 2.5мб файл стилей, а только нужные 8 кб. Подрочили на циферки в PSI было 80, стало 100. Еще бы попросить GPT Seo написать нам
в repo можно сравнить версии
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
Для изучения предмета с помощью нейросети
[SUBJECT] =предмет
[CURRENT_LEVEL]=начинающий/ средний/ продвинутый
LTIME_AVATLABLE] =время на занятия
(LEARNING_STYLE] =аудио/видео/текст/практика
[GOAL]=цель/желаемый уровень
Шаг 1: Оценка знаний
1. Разбей [SUBJECT] на ключевые компоненты
2. Оцени сложность каждого компонента
3. Укажи необходимые требования
4. Укажи необходимые знания
Распиши их в виде иерархии списка навыков
~ Шаг 2: Кривая обучения
1. Создай ключевые точки процесса обучения на основе
[CURRENT_LEVEL]
2. Структурируй темы по оптимальной кривой обучения
3. Укажи минимальное время на изучение каждой темы
4. Подгони под [TIME_AVAILABLE]
Распиши в виде таблицы с временными рамками
~ Шаг 3: Полезные ресурсы
1. Подбери учебные материалы в соответствии с [LEARNING_STYLE]:
- Видеоуроки
- Книги и статьи
- Упражнения
- Проекты
2. Оцени материалы по эффективности
3. Собери список из полезных ресурсов
Распиши подробный список материалов в порядке полезности
~ Шаг 4: Практика
1. Подготовь упражнения для каждой темы
2. Создай сценарии из реальной жизни для их применения
3. Укажи контрольные точки
4. Придумай структуру интервалов для ревью
Распиши план с расписанием упражнений
~ Шаг 5: Система отслеживания прогресса
1. Определи метрики прогресса
2. Подготовь критерии оценивания
3. Подготовь систему обратной связи
4. Внедри метрики для контрольных точек Распиши шаблон отслеживания прогресса
~ Шаг 6: Создание учебного расписания
1. Разбей обучение на ежедневные/еженедельные задачи
2. Учитывай периоды для отдыха и ревью
3. Добавь оценки на контрольных точках
4. Сбалансируй теорию и практику
Распиши подробное расписание с учетом [TIME AVAILABLE]
❤1💋1
Неделя 4: Получение данных и API
Темы:
getStaticProps и getServerSideProps
API Routes в Next.js
Клиентское и серверное получение данных
Уроки:
Научитесь получать данные на стороне сервера с помощью getStaticProps.
Создайте собственный API Route и взаимодействуйте с ним из компонента.
Изучите клиентское получение данных с помощью fetch или axios.
Ресурсы:
Получение данных в Next.js
Темы:
getStaticProps и getServerSideProps
API Routes в Next.js
Клиентское и серверное получение данных
Уроки:
Научитесь получать данные на стороне сервера с помощью getStaticProps.
Создайте собственный API Route и взаимодействуйте с ним из компонента.
Изучите клиентское получение данных с помощью fetch или axios.
Ресурсы:
Получение данных в Next.js
nextjs.org
Getting Started: Fetching Data
Learn how to fetch data and stream content that depends on data.
Неделя 5: Стилизация приложения
Темы:
Использование CSS Modules
Стилизация с помощью Styled JSX
Подключение CSS-фреймворков (Tailwind CSS, Bootstrap)
Уроки:
Примените CSS Modules для стилизации компонентов.
Изучите возможности Styled JSX для динамических стилей.
Интегрируйте Tailwind CSS в проект и примените утилитарные классы.
Ресурсы:
Стили в Next.js
Tailwind CSS с Next.js
Темы:
Использование CSS Modules
Стилизация с помощью Styled JSX
Подключение CSS-фреймворков (Tailwind CSS, Bootstrap)
Уроки:
Примените CSS Modules для стилизации компонентов.
Изучите возможности Styled JSX для динамических стилей.
Интегрируйте Tailwind CSS в проект и примените утилитарные классы.
Ресурсы:
Стили в Next.js
Tailwind CSS с Next.js
nextjs.org
Getting Started: CSS
Learn about the different ways to add CSS to your application, including Tailwind CSS, CSS Modules, Global CSS, and more.
🔥2
Неделя 6: Оптимизация и производительность
Темы:
Оптимизация изображений с компонентом Image
Динамический импорт и ленивая загрузка
Улучшение SEO с компонентом Head
Уроки:
Замените теги <img> на компонент Image для оптимизации изображений.
Реализуйте динамический импорт крупных библиотек или компонентов.
Добавьте мета-теги и заголовки страниц для SEO оптимизации.
Ресурсы:
Оптимизация в Next.js
Динамический импорт
Темы:
Оптимизация изображений с компонентом Image
Динамический импорт и ленивая загрузка
Улучшение SEO с компонентом Head
Уроки:
Замените теги <img> на компонент Image для оптимизации изображений.
Реализуйте динамический импорт крупных библиотек или компонентов.
Добавьте мета-теги и заголовки страниц для SEO оптимизации.
Ресурсы:
Оптимизация в Next.js
Динамический импорт
nextjs.org
App Router: Getting Started
Learn how to create full-stack web applications with the Next.js App Router.
💋1