supfiger

Набросал на коленке: https://codesandbox.io/s/todo-app-13njq?file=/src/...

Ну и основной файл, если лень по ссылке переходить.

import React from "react";

import "./TodoItem.css";

const Mode = {
  VIEW: "VIEW",
  EDIT: "EDIT"
};

export const TodoItem = ({ index, item, updateItem, removeItem }) => {
  const [mode, setMode] = React.useState(Mode.VIEW);
  const [input, setInput] = React.useState(item.text);
  const inputRef = React.useRef();

  React.useEffect(() => {
    if (mode === Mode.EDIT) {
      inputRef.current.focus();
    }
  }, [mode]);

  const handleInput = event => {
    setInput(event.target.value);
  };

  const saveItem = () => {
    updateItem(index, input);
    setMode(Mode.VIEW);
  };

  const handleToggleMode = () => {
    setMode(prevMode => (prevMode === Mode.VIEW ? Mode.EDIT : Mode.VIEW));
  };

  const handleRemove = () => {
    removeItem(index);
  };

  return (
    <div className="todo-item">
      <div className="todo-item__data">
        {mode === Mode.VIEW && (
          <div className="todo-item__value">{item.text}</div>
        )}
        {mode === Mode.EDIT && (
          <div className="todo-item__form">
            <input
              type="text"
              value={input}
              onChange={handleInput}
              ref={inputRef}
            />
            <button type="button" onClick={saveItem}>
              Save
            </button>
          </div>
        )}
      </div>
      <div className="todo-item__meta">
        <div className="todo-item__controls">
          <button type="button" onClick={handleToggleMode}>
            Edit
          </button>
          <button type="button" onClick={handleRemove}>
            Remove
          </button>
        </div>
        <div className="todo-item__time">{item.time.toLocaleString()}</div>
      </div>
    </div>
  );
};

Указать вы можете что угодно и на любом этапе изучения, просто это мало кому интересно, на "теги" никто не смотрит, это шум. Работодателю важно ваше умение решать задачи, а вовсе не то, чтобы вы прочитали блоки документации.
Можете решать задачи, пользуясь Реактом? Значит, знаете Реакт.
Чем сложнее задачи можете решать, тем лучше знаете. Зная только про main concepts - на любом реальном проекте вы потеряетесь и ничего толкового сделать не сможете.

А также, сколько времени у вас потребовалось на main и advanced?

Несколько часов, чтобы ознакомиться с документацией. А перед этим 10 лет делать всё то же самое, только без Реакта.
Ничего архисложного там нет. А вот вывести на уровень автоматизма, выработать хорошие практики и обрести какую-то экспертность - это месяцы и годы постоянной практики.

Куки исключены, браузер не сохраняет их и не хранит историю.

1. Про evercookie слышали? А про Web Fingerprint?
На хакере перечислена масса способов хранить ID на вашем компе без использования Куков и кэша, а технология Web Fingerprint позволяет хранить цифровой отпечаток компа, браузера на сервере банка: Фингерпринтинг конкретного ПК с точностью 99,24%, не спасает даже смена браузера.

Если вы - клиент банка и заходили в его интернет-банкинг, он легко может вас опознать при использовании того же браузера и того же компа.
А если у вас на мобиле установлено приложение интернет-банкинга - вы вообще под колпаком :)

2. Если вы лазите по инету залогиненым в Вконтакте/Яндексе, то через backdoors в их API можно определить ваш профиль и все ваши данные.
Сайт Соцфишинг работает на этом принципе.
Сам банк тоже может использовать соцфишинг и ставить невидимый ифрейм на своё меню, и при клике вы автоматически авторизуетесь через аккаунт, например, Вконтакте. Зная ваш ID на Вконтакте, ваш телефон легко узнаётся, их базы регулярно сливаются и продаются

PS: Узнать как конкретно вас "слил" и каким образом - невозможно без исследования конкретной ситуации.

потому что всё перерендеривается, и фокус теряется

можно решить подобным хаком, а вообще послушаю, будут ли другие варианты

setTimeout(() => {
   textInput.current.focus()
}, 0)   // сработает в следующем цикле event loop-a после рендера

По className'му бы взял, но тут же мне нужно фокус ставить в том Todo, на который я нажал

можно добавлять инпуту data- атрибут типа айдишника, и выбирать нужный как-то в духе document.querySelector('input[data-id="456"]')

1. Слушай скролл.
2. Задавай условия изменения цвета (сколько проскролено).
3. Меняй цвет.

К бутстрапу это никакого отношения не имеет. Только JS.

как-то так:
https://codepen.io/vityareabko/pen/YzwXRWE

Либо с помощью добавления псевдоэлемента

function tableString(arr, numCols, colSpacing = 3) {
  const numRows = Math.ceil(arr.length / numCols);
  const rows = Array.from(
    { length: numRows },
    (n, i) => arr.slice(i * numCols, (i + 1) * numCols)
  );
  const widths = Array.from(
    { length: numCols },
    (n, i) => Math.max(...rows.map(m => (m[i] ?? '').length))
  );

  return rows
    .map(n => n.map((m, i) => m.padEnd(colSpacing + widths[i], ' ')).join(''))
    .join('\n');
}


const arr = [
  '11111', '22222222', '33333333', '444', '11', '222', '3333',
  '4444444', '11111111', '222222', '33333333', '4', '1',
  '2222222222', '3', '44444444444444',
];

console.log(tableString(arr, 4));
console.log(tableString(arr, 3));
console.log(tableString(arr, 3, 8));

Начал изучать MobX на этом ресурсе, встал вопрос.

Так вы изучайте дальше - ответ на ваш вопрос в восьмой части этого руководства.

Эти уровни - абстракция, причем зависящая от компании. Пройдите несколько собеседований и спросите, что думает о вас интервьюер.

Юниор чаще всего - это программист с в основном теоретическими знаниями, либо наоборот только практическими знаниями. Он умеет решать более-менее стандартные задачи. Юниора обязательно надо учить. При получении нового задания он "создает" свое решение.

Мидл - знания уже подкреплены опытом, может (в отличии от юниора) предсказывать последствия тех, или иных решений. Может решать задачи по проектированию модуля, или его части. Получив новое задание - может скомпоновать из уже существующих решений свое и реализовать его.

Синьйор - понимает не только то зачем использовать ту, или иную технологию, а еще и как она работает, например почему при HL форин ключи сожрут io hdd. Может спроектировать и вести средний по размерам проект. Получив новое задание он уже знает как его решить кучей способов, выбор заключается только в правильности интеграции решения.

-----------------

Многое зависит от интервьюера.
У меня был случай, собеседование на php senior developer: поговорили про HL оптимизации, архитектурные предложения для решения неких задач, способы оптимизации и т.д., а потом:
- перейдем к практике: что произойдет в таком коде:
$a = 5 + '5abc' + 'abc5';
- произойдет следующее: я посмотрю blame скрипта и поговорю с автором этой строчки, что бы узнать, что такого хренового в жизни может произойти, что бы он позволил себе это написать.
- ну, тут вопрос на приведение типов
- 10, но вы в своей практике с подобным сталкивались?
- нет
- вот и я не сталкивался...

string.trim().length > 0

Да ладно, парни. Ну хватит уже, к чему такие сложности? Берём и читаем. Вообще совсем не обязательно читать про архитектуру и абстракции именно по своему языку, хотя javascript в этом плане родился уродом.

Ок. Полиморфизм ни в коем случае нельзя рассматривать отдельно от других фундаментальных понятий - абстракция, инкапсуляция и наследование. Объект и подобные прилагаются из аксиом (хотя это-то тоже аксиомы).

Собственно, представим себе рядом стакан, кружку, чайник, кофемашину, велосипед и скейт. Что между ними всеми общего? Ну как минимум то, что они есть. То есть это - объекты, которые были созданы. Но как они были созданы? Скорее всего на заводе производителя по чертежам. Ок, чертежём назовём конструктор. Ну а класс? А что это такое? А его нет в нашей вселенной - эта сущность есть абстракция, что живёт лишь в наших мыслях. В реальном мире её нет и никогда не будет, такова уж физика - ей по барабану, что птицы и млекопитающие имеют дальних родственников - она лишь обеспечивает возможность естесственного отбора. А уж родственников друг другу находим мы, люди.

С объектами и классами разобрались, а что же там с нашими стаканами и велосипедами. Мы уже поняли, что всё это объект, то есть грубо можно все объекты наследовать от какого-нибудь суперпредка, суперкласса, что и реализовано в некоторых языках. Но что другого общего между скейтом и стаканом, например? Конечно, можно углубляться и считать, что они все из молекул, и они все из твёрдых веществ. Однако это всё бред и СПГС, так что ответ прост - да ничего. То есть это совершенно разные объекты с совершенно разным функционалом. Более того - естесственно компьютерные модели и иерархии будут сильно отличатся от физик и химий. И это нормально, вопрос об адекватностях моделей ставиться лишь когда модель неадекватна, а до тех пор пилить можно что угодно, лишь бы работало.

Вот. У нас есть супер-предок Object, от которого дефолтно наследуются все объекты. Допустим, то что объекты состоят из атомов и есть то, что наследуют все объекты. Но все дополнения и правки - полиморфизм. Так, из атомов мы слепили колёса и приделали на доску - ок, это скейт. На него можно встать и катиться, а сильно извернувшись и полетать в трёх метрах над землёй, прямо таки излучая своё яркое эго. В то время как стакан - это мы слепили из атомов плотную ёмкость, из которой вода не выливается под действием силы тяжести. И прямое применение стакана - налив воды опрокинуть его над ртом, чтобы вода вытекла прямо в желудок. Так делают настоящие пацаны, не заботясь об икоте или страхе утонуть, так что вот - полиморфизм.

Однако что с остальным? У нас ещё абстракция, инкапсуляция и наследование. Ок, начнём с наследования, так оно наиболее близко. Вот что у нас общего между стаканом и кружкой? Ну в оба можно налить воду, но у кружки есть ручка чтобы держаться. То есть можно придумать некий общий класс - ёмкость. Однако что это за класс? Можно например за этот класс взять стакан, тогда все ёмкости по дефолту стаканы, а всё остальное - видоизменённые стаканы. Но кому-то больше нравяться кувшины, например некоторые чики насят их на голове, считая что это удобно. Ну и пусть носят, но как-то же решить надо, что главнее и идеальнее. Так вот - недостяжимый идеал и есть главный - это называется абстрактный класс. То есть ёмкость, что невозможно создать, для которого нет полного чертежа. А все чертежи, что дополнили до полного - есть наследованные классы от класса ёмкость.

Тут мы подошли к абстракции. Вот такое иерархическое наследование приводит нас к, возможно главной, идее ООП. Вот мы взяли и выделили всё, куда можно налить воду в отдельный класс, нарисовали общий чертёж, но специально не доделали его, оставив зазор для будущих творцов, и назвали чертёж - ёмкость. Тысячи лет изобретатили всех миров создают свои ёмкости, одна лучше другой. Для разных людей - по разному, конечно. Но каждый раз группировать молекулы стекла определённым образом - непростая задача. Поэтому ремесленники пошли на хитрость, они создали тайный совет ремесленников мира и решили делиться друг с другом своими наработками. То есть создавать мелкие чертежи и объявлять классом, например, извлистой ручки в форме ленты Мёбиуса, например. Возможно такая ручка удобно только инопланетным существам, но чертёж создан и к нему можно ссылаться при создании своего чертежа. Таким образом мы абстрагируемся от низкоуровневой задачи "формирования ёмкостей посредством перемещения молекул" к "конструированию ёмкости посредством совмещения деталей, элементов". Это и есть абстракция.

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

Таким образом, абстракция невозможна без инкапсуляции и наследовании, как невозможен полиморфизм без, собственно, наследования. Ну а полиморфизм невозможен ещё и без инкапсуляции, которая банально бесполезна без наследования и полиморфизма. Вот такие тут треугольники с пирогами. Жаль только про пирог наврали. И про день рожденье.

k == kilo == 10^3
https://ru.wikipedia.org/wiki/%D0%9A%D0%B8%D0%BB%D0%BE-

К - это тысяча, потому что kilo.