React. Почему элемент в компоненте становится пустым?

Владимир, пока что я никак не могу понять зачем нужен весь этот геморрой, если компонентного подхода я легко могу добиться, используя тот же Gulp или Webpack, где будет использован нормальный человеческий DOM без всего этого ужаса, где я подключаю абсолютно любую библиотеку и она работает!

React. Почему элемент в компоненте становится пустым?

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

React. Почему элемент в компоненте становится пустым?

Не могу понять следующее.. Вот у меня есть проверенный временем готовый написанный мной код на нативном JS без всяких React заморочек типа рефов и стейтов, где обращение к элементам происходит через querySelector(), ну и так далее всё на нативе, как правильно использовать такой код в компоненте React? И вообще правильно ли это? Как вообще все свои наработанные нативные библиотеки грамотно подключать с React?

Путь к изображению в React.js?

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

Путь к изображению в React.js?

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

Путь к изображению в React.js?

Иван В, а что касается изображений? Поместить их в public?

Ладно, пойду читать что-то типа структурирования React-приложений.

Путь к изображению в React.js?

Иван В, Всё что я пытаюсь сделать, это передать в роуте в качестве параметра имя картинки и вывести её на экран вот таким вот образом:

import { useRouteMatch, Link, useParams } from 'react-router-dom';

function UserId() {
  let { userName } = useParams();
  let userNameСap = userName[0].toUpperCase() + userName.substring(1);
  let match = useRouteMatch();
  let usersLink = match.url.split('/')[1];
  let userNameImg = './img/' + useParams().userName +'.jpg';  // ИМПОРТ В КОМПОНЕНТЕ НЕ ДЕЛАЕТСЯ! КАК БЫТЬ???

  return (
    <>
      <div className="container">
        <h1>User: { userNameСap }</h1>
        <img src={ userNameImg } alt={ userNameСap }/>
        <Link to={ `/${usersLink}` }>Назад</Link>
      </div>
    </>
  );
}

export default UserId;

Пока не получается. Мне кажется это каким-то геморроем на пустом месте. На чистом JS или PHP через $_GET['imgname'] эта задача решается в считанные секунды!
Я правда 2-й день только React изучаю :))

Путь к изображению в React.js?

Сорри!!! Ввёл в заблуждение! Я неправильно назвал картинку. Всё получилось.
Я только начал изучать React. Вообще пока не понимаю что нужно класть в папку ./public
В Gulp и Webpack всегда одна папка для разработки, другая на продакшене у меня была. Всё было просто. Тут пока не въезжаю.

Путь к изображению в React.js?

Он лежит в 'C:\OSPanel\domains\react-new-level\unit-03\src\components\UserId\img\johnson.jpg'

Путь к изображению в React.js?

Иван В, поместил изображение в папку с компонентом, делаю импорт и получаю ошибку:

Failed to compile.

./src/components/UserId/UserId.js
Module not found: Can't resolve './img/johnson.jpg' in 'C:\OSPanel\domains\react-new-level\unit-03\src\components\UserId'

Что за ерунда?

Путь к изображению в React.js?

Мда, React точно не для людей делали ))

Как правильно имортировать модуль, чтобы понравилось Webpack-у?

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

Как пойтись по массивам и собрать новые массивы?

Сергей Соколов, а, точно )) циклом же проходим! Но всё равно круто ))

Как пойтись по массивам и собрать новые массивы?

const result = [...Array(maxLength)].map(() => []);

Вот это круто! Блин, сколько лет должно пройти, чтобы научиться так писать! ))

Хорошо ли собирать массив объектов путём конкатинации строк и дальнейшего применения eval()?

WbICHA, да это нюансы, важна идея. Ну пусть будет map, хотя это здесь отнюдь не принципиально IMHO.

Мне вообще нужно было эти дополнительные аргуметы (...args) сложить во вложенный объект, а не добавлять к свойствам базового объекта arrayOfObj.

Вот попрактиковался и вот что у меня получилось:

const arrayLabels = ['India', 'Indonesia', 'Russia', 'China', 'Bangladesh', 'Nepal', 'Bhutan', 'Myanmar', 'Laos', 'Cambodia', 'Vietnam', 'Malaysia'];
const arrayData = [2467, 560, 540, 20, 114, 121, 103, 85, 17, 150, 20, 295];
const arrayBackgroundColor = ['#55E6C1', '#3B3B98', '#F97F51', '#25CCF7', '#EAB543', '#CAD3C8', '#FEA47F', '#1B9CFC', '#F8EFBA', '#58B19F', '#2C3A47', '#B33771'];
const arrayOneMore = ['zzz', 'zzz', 'zzz', 'zzz', 'zzz', 'zzz', 'zzz', 'zzz', 'zzz', 'zzz', 'zzz', 'zzz'];
// etc.

function chartDataSort(arrayLabels, arrayData, ...args) {
      console.log(`number of argents: ${args.length}`);

      const arrayOfObj = [];
      arrayLabels.map((label, i) => {
        const el = { labels: label, data: arrayData[i] || 0 };
        let argsObj = {};
        args.map((arg, a) => {
          argsObj[a] = arg[i] || 0;
        });
        el.args = argsObj;
        arrayOfObj.push(el);
      });
      arrayOfObj.sort((a, b) => parseInt(b.data) > parseInt(a.data));
/* ... */

Не хватает практики расширенной работы с объектами/массивами, долго эти вещи рожаю.
Теперь буду вымучивать формирование отдельных массивов и их return из функции ))

Хорошо ли собирать массив объектов путём конкатинации строк и дальнейшего применения eval()?

Спасибо, разобрался и всё понял – формируешь заранее и пушишь.
Единственное, у вас тут:

arrayOfObj = arrayOfObj.sort((a, b) => parseInt(b.data) > parseInt(a.data));

где `arrayOfObj = ` не нужно, так как выше он const :)

Как использовать методы в методах класса и обработчики событий в методах класса?

FODD, спасибо. Почитал про контекст, понял как это работает.

И ещё один вопрос. А вот так в методах класса корректно будет объявлять, привязывать и использовать переменную? Или лучше в конструкторе объявлять её начальное значение? Или это непринципиально?

handlerClick() {
    console.log('Link clicked', this);
    this.hide();
    this.show();
    console.log(this.counter++);
}

start() {
    this.counter = 1;
    this.mylink.addEventListener('click', this.handlerClick.bind(this, this.counter));
}

Как использовать методы в методах класса и обработчики событий в методах класса?

Короче говоря, получилось только вот таким образом:

...
handlerClick() {
    console.log('Link clicked', this);
    self.hide();
    self.show();
}

start() {
    window.self = this;             
    this.mylink.addEventListener('click', this.handlerClick);
}
...

Но такой способ мне не очень нравится. Определять self глобально как-то совсем не хочется. Как можно улучшить код?

Как использовать методы в методах класса и обработчики событий в методах класса?

Kovalsky,

start() {                
   this.mylink.addEventListener('click', () => console.log(this));
}

> Object { mylink: a#mylink }

Как использовать методы в методах класса и обработчики событий в методах класса?

Kovalsky, нормально всё с this в handlerClick — если отдельно её вызвать, всё работает, а если в качестве обработчика события, то нет. Как передать туда this? вот в чём вопрос.