Изучаем JavaScript

  Svelte - тонкий, стройный, изящный, элегантный Основное преимущество Svelte - браузеру отдаётся уже скомпилированный код, за счёт чего обеспечивается его минимальный вес и максимальное быстродействие За эту особенность Svelte называют исчезающим фреймворком - разработчик писал код пользуясь возможностями фреймворка, а браузер получил чистый JavaScript Как и во vue, скрипты и стили пишутся внутри компонента Svelte. Отличие в том, что если в vue разметку заключали в тег template. в Svelte разметка пишется без любого ограничивающего тега. Что не скрипт и не стиль, то - разметка Любые переменные, указанные в скрипте, могут отображаться в разметку. Для этого их достаточно взять в фигурные скобки Базовый пример < script >   let name = 'World' </ script > < style >   h1 {     color : indigo ;     text-transform : uppercase ;     font-size : 4 em ;     font-weight : 100 ;   } </ style > < main > ...

Документация https://vuejs.org/guide/introduction.html  Установка Vue npm install -g @vue/cli // устанавливаем vue cli глобально vue create my-project // создаём проект npm run serve // запускаем проект Корневые директории, с которыми будем работать - public - src В public лежит файл index.html, в нём div с id="root". Сюда будет монтироваться приложение В src файл main.js в который импортируется компонент App.vue и передаётся (монтируется) в index.html import { createApp } from 'vue' import App from './App' createApp (App). mount ( '#app' ) Компоненты Каждый компонент это объект с набором полей. В поле data приходят данные, которые будет использовать компонент, в поле methods пишем функции. Чтобы создать компонент, создаём файл с его названием и расширением .vue. Для названия созданных нами компонентов обязательно использовать СamelCase, этим они отличаются, от компонентов, созданных самим фреймворком, например, компонента App  Затем заходим в файл...

 Начало работы - создаём next js проект npx create-next-app my-project Устанавливаем Tailwind npm install -D tailwindcss postcss autoprefixer  npx tailwindcss init -p Добавляем пути к файлам в tailwind.config.js module.exports = {   content: [     './pages/**/*.{js,ts,jsx,tsx}',     './components/**/*.{js,ts,jsx,tsx}',   ],   theme: {     extend: {},   },   plugins: [], }; Добавляем директивы @tailwind в файл ./styles/globals.css @tailwind base; @tailwind components; @tailwind utilities; Примеры классов flex - флекс элемент justify-end, items-center - то же, что и justify-content: flex-end и align-items: center p-2 - паддинг 2 rem или 32рх my-5 - марджин по оси у 5 rem или 80рх mt-8 - марджин топ 8 rem или 128рх mb-5 - марджин боттом 5 rem или 80рх max-w-4xl - максимальная ширина 896px https://tailwindcss.com/docs/max-width bg-blue-500 - синий цвет фона text-white - белый цвет текста text-center - текст по центру...

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