История изменений

По вашей ссылке на медиум, кстати, я чётко вижу 8 строчек кода на Ванилле и 8 строчек кода на Реакте

Нет, там намного больше строк, так как ты не видишь получение button, html, не видишь как это обрамляется для того что бы на страницу можно было поместить несколько списков, а React этого не требует. Но там не на строки нужно смотреть, у React их конечно меньше, там нужно смотреть на подход. Как ты будешь получать данные со своего списка? Придется работать с DOM элементами, что то в них хранить, получать? Давай просто добавим фильтр, если ничего не введено в поле, то все результаты, если что то введено то отсеять те элементы, которые не включают в себя подстроку.

const [items, setItems] = useState(["Milk", "Bread", "Eggs"])
const [itemInput, setInput] = useState("")
const [filterInput, setFilterInput] = useState("")
function Items() {
  return filterInput.length ? items.filter(item => item.includes(filterInput)) : items;
}
return (<section>
  <ul>{ Items().map(item => (
    <li key={item}>{item}</li>
  ))  }</ul>
  <button onClick={() => setItems([...items, itemInput])}>Add element</button>
  <input value={itemInput} onChange={e => setInput(e.target.value)}/>
  Filter: <input value={filterInput} onChange={e => setFilterInput(e.target.value)}/>
</section>);

причём на Реакте это выглядит мудреней с какими-то массивами и прочим функциональным мусором

Понял, ты не знаешь что такое функциональное программирование, и что такое программирование вообще.

Учитывая, что Реакт ещё и либу многобайтную с собой тащит, тогда как ванилла – нет.

Очередное подтверждение что ты вообще ничего не знаешь, может гигабайтную?

По вашей ссылке на медиум, кстати, я чётко вижу 8 строчек кода на Ванилле и 8 строчек кода на Реакте

Нет, там намного больше строк, так как ты не видишь получение button, html, не видишь как это обрамляется для того что бы на страницу можно было поместить несколько списков, а React этого не требует. Но там не на строки нужно смотреть, у React их конечно меньше, там нужно смотреть на подход. Как ты будешь получать данные со своего списка? Придется работать с DOM элементами, что то в них хранить, получать? Давай просто добавим фильтр, если ничего не введено в поле, то все результаты, если что то введено то отсеять те элементы, которые не включают в себя подстроку.

onst [items, setItems] = useState(["Milk", "Bread", "Eggs"])
const [itemInput, setInput] = useState("")
const [filterInput, setFilterInput] = useState("")
function Items() {
  return filterInput.length ? items.filter(item => item.includes(filterInput)) : items;
}
return (<section>
  <ul>{ Items().map(item => (
    <li key={item}>{item}</li>
  ))  }</ul>
  <button onClick={() => setItems([...items, itemInput])}>Add element</button>
  <input value={itemInput} onChange={e => setInput(e.target.value)}/>
  Filter: <input value={filterInput} onChange={e => setFilterInput(e.target.value)}/>
</section>);

причём на Реакте это выглядит мудреней с какими-то массивами и прочим функциональным мусором

Понял, ты не знаешь что такое функциональное программирование, и что такое программирование вообще.

Учитывая, что Реакт ещё и либу многобайтную с собой тащит, тогда как ванилла – нет.

Очередное подтверждение что ты вообще ничего не знаешь, может гигабайтную?

По вашей ссылке на медиум, кстати, я чётко вижу 8 строчек кода на Ванилле и 8 строчек кода на Реакте

Нет, там намного больше строк, так как ты не видишь получение button, не видишь как это обрамляется для того что бы на страницу можно было поместить несколько списков, а React этого не требует. Но там не на строки нужно смотреть, у React их конечно меньше, там нужно смотреть на подход. Как ты будешь получать данные со своего списка? Придется работать с DOM элементами, что то в них хранить, получать? Давай просто добавим фильтр, если ничего не введено в поле, то все результаты, если что то введено то отсеять те элементы, которые не включают в себя подстроку.

onst [items, setItems] = useState(["Milk", "Bread", "Eggs"])
const [itemInput, setInput] = useState("")
const [filterInput, setFilterInput] = useState("")
function Items() {
  return filterInput.length ? items.filter(item => item.includes(filterInput)) : items;
}
return (<section>
  <ul>{ Items().map(item => (
    <li key={item}>{item}</li>
  ))  }</ul>
  <button onClick={() => setItems([...items, itemInput])}>Add element</button>
  <input value={itemInput} onChange={e => setInput(e.target.value)}/>
  Filter: <input value={filterInput} onChange={e => setFilterInput(e.target.value)}/>
</section>);

причём на Реакте это выглядит мудреней с какими-то массивами и прочим функциональным мусором

Понял, ты не знаешь что такое функциональное программирование, и что такое программирование вообще.

Учитывая, что Реакт ещё и либу многобайтную с собой тащит, тогда как ванилла – нет.

Очередное подтверждение что ты вообще ничего не знаешь, может гигабайтную?