Домашняя работа №6 - React

[redexp]

Видео: https://youtu.be/nLWwrNC00bg

Основная задача:

Я решил сделать плавный переход от jQuery к React и домашка будет такая - переписываем домашку dom на реакте.

1. Копируем папку react
2. В этой папке запускаем npm i. Кстати для того чтобы внутри папки react у меня получилось добавить пакет react я использовал опцию -f (force) вот так npm i -f --save react. Вообще я ни разу не сталкивался с ситуацией, что название моего проекта пересекается с названием какого-то npm пакета
3. После установки запускаем команду npx webpack serve
4. Ваша задача - дописать компонент в src/Table.js который, как вы увидите, принимает четыре параметра:
   • columns - число, количество столбцов которое должно быть у таблицы
   • rows - число, количество строк которое должно быть у таблицы
   • cell - строка типа B2 (может отсутствовать), адрес ячейки в которую вставляют данные
   • data - массив (может отсутствовать), вставляемые данные
5. Компонент Table должен возвращать такую же таблицу как и в домашке dom с инпутами и если передали cell и data то начиная с адреса ячейки в инпутах должны быть данные из массива
6. Прежде чем пушить в гит домашку, выполните команду npx webpack которая создаст папку dist и все необходимые файлы в ней. Добавьте эту папку dist в гит. Бот будет открывать файл react/dist/index.html и проверять домашку.

Усложннная задача:

Измените код так, чтобы бот мог вставлять данные в таблицу сколько угодно раз без перезагрузки страницы и данные после предыдущей вставки сохранялись в таблице. Чтобы по факту получилось идентичное поведение тому как сейчас реализована домашка dom в папке example.

[ArtemSlotin]

Дивно. Стосовно 3 пункту (webpack-dev-server) - у мене просить встановити.

[redexp]

@ArtemSlotin ты прав, я лохонулся, у меня webpack-dev-server был установлен в рутовой папке )) исправил package.json

[kononyukii]

Добрый день, можно ли в package.json и webpack.config.js добавить свои настройки по мелочи? Бот ругаться не будет?

[redexp]

@kononyukii можно

[andrewvitrenko]

@redexp я узнал что есть команда npx create-react-app. почему мы не используем её?

[redexp]

@AndriiVitrenko create-react-app для тех кто уже знает что как работает и им надоело каждый раз всё настраивать. Вы пока ничего не знаете, лучше всё самим написать, чтобы лучше понимать

[Daniel-developer5]

@redexp Перевірка буде здійснюватися за файлом ./dist/index.html?

[redexp]

@Daniel-developer5 да. Сейчас допишу, что нужно эту папку dist добавить в гит, чтобы боту было меньше работы компилить каждый ваш проект

[andrewvitrenko]

@redexp то нам нужно выгрузить только папку dist? Или всё вместе с src, json и конфигами?

[redexp]

@AndriiVitrenko всё кроме node_modules

[nedopaka]

@redexp как мы можем работать со стейтами для изменения текста в инпутах, если декларация компонента у нас в синтаксисе es5? например, в этом задании

export default function Table(props) {
}

[Daniel-developer5]

@ANScorp Я думаю можна і без стейта обійтись. Але якщо так кортить, то перероби на клас, або пиши на хуках)

[redexp]

@ANScorp компонент Table отображает то что ты ему передал. Можно сохранять данные в отдельном массиве и на компонент всегда передавать массив с уже слепленными данными

[redexp]

@AndriiVitrenko @SerhiiYahodzynskyi задавать можно только общие вопросы. Вопросы типа "Я написал вот такой код, а он не работает" - запрещены

[andrewvitrenko]

@redexp ок. просто хочу знать почему не работает цикл for внутри jsx

[redexp]

@AndriiVitrenko почему не работает цикл for внутри jsx намёк понятен?

[nedopaka]

@redexp по https://github.com/redexp/GeekHub-2020.js/issues/19#issuecomment-736026795 подход абсолютно рабочий и понятный, но, возможно, в некоторых случаях он будет затратным. Допустим, если наша таблица не 26х10 ячеек, а в 10000 раз больше - каждый раз собирать новый массив будет дорогое удовольствие. Возможно, есть еще какой-то подход для обработки подобных данных? Что можно сделать для облегчения жизни компоненту в подобной ситуации?

[redexp]

@ANScorp это не проблема компонента, а того кто придумал показать огромную таблицу данных. Запомните золотое правило - думать об оптимизации в самый последний момент. Сначала строите основную логику, чтобы всё просто работало, а потом можете заняться оптимизированием.

[Daniel-developer5]

@ANScorp Потім, якщо таблиця в тебе на 1000 комірок, ти можеш показати юзеру 100, а коли він проскролить вправо до кінця, догрузити ще 100 і так до 1000

[nedopaka]

@redexp по https://github.com/redexp/GeekHub-2020.js/issues/19#issuecomment-736804666 не, ну это понятно 😄 основная логика есть, теперь думаю про оптимизацию. Просто, я сейчас думаю с точки зрения приложения аля гугл таблицы - что мы можем оптимизировать исходя из того, что компонент у нас реактовский и требуется работать с большими объемами данных? @Daniel-developer5 твое предложение по отрисовке блоками вполне логично, но все равно, насколько я понимаю, изменения, так или иначе, все равно вносятся в единый массив с которым работает наш компонент. @redexp или в таком случае в нашем компоненте Table вместо одного массива, мы должны работать с небольшими массивами четко заданого размера? И скорее всего это будут уже не массивы, а объекты для упрощения идентификации ячеек и их содержимого.

[Daniel-developer5]

@ANScorp Я думаю, що показувати якусь таблицю на 100500 комірок взагалі тупо. Її вже краще розбити на декілька сторінок

[Daniel-developer5]

JSX теги, які повертають наші компоненти, строго повинні знаходитися в одному батьківському блоці:

import React from 'react'

const Component = () => {
  return (
    <div>
      <span></span>
      <span></span>
    </div>
  )
}

В такому коді буде помилка:

import React from 'react'

const Component = () => {
  return (
    <span></span>
    <span></span>
  )
}

Хм... Цікаво, що навіть сам гітхаб починає коряво підствітлювати наш JSX.

Якщо ми не хочемо створювати зайвих блоків, можна використати React.Fragment:

import React, { Fragment } from 'react'

const Component = () => {
  return (
    <Fragment>
      <span></span>
      <span></span>
    </Fragment>
  )
}

Або ж таку цікаву сущність, як пустий тег:

import React from 'react'

const Component = () => {
  return (
    <>
      <span></span>
      <span></span>
    </>
  )
}

[redexp]

не "пустой тег", а короткая запись, это тот же фрагмент. Можно ещё возвращать массив

function Component() {
  return [
    <input/>,
    <input/>,
  ];
}

[nedopaka]

@redexp при проверке будет учитываться возможность добавления/удаления данных через контекстное меню?

[redexp]

@ANScorp нет

[MaksymSu]

@redexp а когда проверка первая будет?

[redexp]

Извините ребята, я не могу выгребсти из своих проблем, очень может быть что я так и не успею сделать бота для этой домашки. Возможно я просто сделаю эту домашку онлайн и вы увидете как её нужно было делать и исключу только тех кто вообще ничего не запостил в гит.

[mAndrushchenko]

Когда дедлайн текущей домашки?

[Daniel-developer5]

@mAndrushchenko завжди ранок понеділка, хоча у вівторок теж чомусь перевіряє

[Daniel-developer5]

@redexp Скажіть будь ласка, зараз хуки витісняють redux? Я тільки недавно його спробував і мені якось більше сподобалася ідея централізованого стейту, ніж локальний через хуки в кожному компоненті. Чи їх можна комбінувати, кароч, як зараз модно, чи правильно писати реакт? Ну класові компоненти то ясно вже відходять на другий план, а от з цим як?

[AndreyKondakov]

@Daniel-developer5 На одном проекте можно использовать и классы и хуки и редакс). Просто если можно к примеру обойтись только реактом, то зачем редакс? Хотя все равно почти на всех проектах есть редакс и его учить все равно придется.

[Daniel-developer5]

@AndreyKondakov Ну впринципі згоден. Класи можна використовувати для специфічних методів життєвого циклу, які є тільки у них, хуки можна для невеликих данних типу контролювання елементів, зберігання значення input і тп., а редакс для головного стану та подій, які використовуються в усьому додатку. Але мені ще цікава думка @redexp, якщо можна)

[redexp]

@Daniel-developer5 зараз хуки витісняють redux? ты сравнил тёплое с мягким. Идея редакса - сделать единое хранилище информации для всего проекта и способ как изменять эту информацию в хранилище. Хуки - это технология, которая помогает приблизить stateless компоненты к функциональности классовых компонентов.

Если честно, сколько уже времени прошло, а мне всё ещё тошно от этого редакса. Идея хорошая, но реализация слишком запутанная. Я всегда пытаюсь найти библиотеку с идеей редакса, но более простой и понятной реалзиацией.

Поработав с классами на реакте, потом с хуками, я пришёл к выводу, что плюсы и минусы хуков уравниваются с плюсами и минусами классов. У меня есть проекты на классах и я вообще не вижу в них проблем, не вижу что компоненты какие-то "нечитаемые" или ещё что-то, всё понятно всё нормально. У хуков есть свои удобные плюшки, но слишком много нужно думать об оптимизации.

[oleksandr2004lataniuk]

А когда дэдлайн у этой домашки? Как и все до понедельника??

[redexp]

я не буду проверять эту домашку...

[VladFomenko]

исключу только тех кто вообще ничего не запостил в гит. Речь о этом видимо. До какого срока должно что-то появиться в гите, чтобы не удалили?

[redexp]

утро понедельника

[oleksandr2004lataniuk]

Спасибо) А то тоже проблем и дел не то, что по горло...

[redexp]

Завтра урок на 9 утра