Что делают эти символы в React?

Question

[hulktoster]

вопросы по React коду:

<button className={`tablinks ${i === active ? 'active' : ''}`}
            onClick={openTab}
            data-index={i}
>{n.title}</button>

1) Часто встречаю символ $ в React коде, что он делает в конкретном коде? и вообще в React для чего его используют?
2) Символ ? -это же альтернатива условию if? тогда как код который я написал выглядел бы с if? просто хочу понять такую конструкцию react но c if чтоб было более понятно.

Answer 1

[0xD34F]

1. https://developer.mozilla.org/ru/docs/Web/JavaScri...
2. https://developer.mozilla.org/ru/docs/Web/JavaScri...

Забудьте про реакт на ближайшие полгода и марш изучать js.

Comments

[hulktoster]

прочитал о шаблонных строках и тернарном операторе, и решил что мне привычнее без этих плюшек.
Переделано без использования их:

вариант №1:

.map(i){
   ...
   let classes = "tablinks"
   if(i === active){
      classes = classes + " active"
   }

   return(
       <button 
           className={classes}
           onClick={openTab}
           data-index={i}
        >
         {n.title}
      </button>
   )
}

вариант №2:

<button
  className={
    (() => {
      if (i === active) {
        return 'tablinks active';
      } else {
        return 'tablinks';
      }
    })()
  }
  onClick={openTab}
  data-index={i}
>{n.title}</button>

Правильно?

[Андрей Костяев]

hulktoster, Можно тогда вернуться к ассемблер у, если рассуждать так: "...решил что мне привычнее без этих плюшек."

[Александр]

hulktoster, какая разница что привычнее? Эти штучки у прощают чтение когда. Стандартный if-else на одно действие занимает 5 строк, новый - одну.

[hulktoster]

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

[0xD34F]

hulktoster, языки программирования называются языками не случайно. Все эти символы - тоже "реальная жизнь". И то, что вам надо "думать-переводить", говорит лишь о том, что у вас нет никакого опыта программирования. А когда появится, вам станет очень-очень стыдно за ту глупость, что вы сейчас сказали.

[hulktoster]

0xD34F, возможно, но мне кажеться что новичкам лучше начинать вот так:

if-else
вместо: "?"

писать полние строки: 'string text line 1 \n' + 'string text line 2'
вместо шаблонной:`string text line 1 string text line 2`

писать виражение : x=x+y
вместо : x+=y
и т.д.

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

Answer 2

[Александр]

Это не символы React, это символы js, а позволяют они с es6 записывать переменные прямо в строку, не разделяя ее

let lala = 'World';
console.log(`Hello ${lala}`) // res: Hello World

Работает только с обратными кавычками.

Символ ? -это же альтернатива условию if? тогда как код который я написал выглядел бы с if? просто хочу понять такую конструкцию react но c if чтоб было более понятно.

Да, это аналог if-else

Comments

[Олег Гамега]

не встречал такой записи и в браузере у меня не отрабаотлао
может нужны ковычки?
console.log(`Hello ${lala}`) // res: Hello World

[Kovalsky]

Олег Гамега, скобки, да

[Александр]

Олег Гамега, да, забыл

Answer 3

[Aleksandr]

Шаблонные строки
Тернарный оператор