hulktoster

react это целая религия декларативного подхода. Это одна из основных идей фреймворка/библиотеки. Циклы for и while , как и многое другое, в этом подходе - зло.

Если очень узко, то функция `map` в отличие от цикла "отображает" набор, то есть обрабатывает каждый элемент и возвращает новую коллекцию. Именно это нужно делать когда мы работаем с JSX. А циклы это не функции, которые могут возвращать значения, это конструкция языка с помощью которой, например, можно собирать переменные. Из-за того что JSX это декларативная штука (мы описываем ее как есть, а не получаем в результате вычислений), циклы туда просто не встроить.

Циклы это пример императивного программирования, в то время как функции высшего порядка (filter, map, reduce) – декларативного (функциональный подход). Второй подход в js более канонический (ближе к функциональным языкам) и позволяет писать гораздо более понятный и лаконичный код. При условии, конечно, что вы знакомы с этой парадигмой.

Кстати в декларативном коде не используют переменные (если писать правильно), они там просто не нужны. Только константы.

Вот посмотрите код из бекенд проекта в котором нет ни одного цикла: https://github.com/Hexlet/hexlet-exercise-kit/blob...

hulktoster, map/filter/reduce делают как раз то, что надо в реакте - преобразовывают массив с данными в массив с компонентами реакта, можно конечно и через циклы, но это будет больше писанины и будет менее наглядно

data = [........]

render() {
  return (
  <>
    { data.map(x => <MyComponent prop1={x.prop1} prop2={x.prop2} />) }
  </>
  )
}

data = [........]

render() {
  const components = []
  for(let i = 0; i < data.length; i++) {
    const x = data[i]
    components.push(<MyComponent  prop1={x.prop1} prop2={x.prop2} />)
  }

  return (
  <>
    { components }
  </>
  )
}

и это только если надо что-то замапать, а если еще фильтровать итд, то строк в цикле больше и больше

так это разные
semantic-ui-css
semantic-ui-react

Очень похоже, что добавлена директория юзера в git репозиторий.
Т.е. в командной строке, находясь в папке юзера была выполнена команда git init.
Решение - удали скрытую папку .git в этой директории (если ты туда ничего не коммитил) и сделай git init в папке с проектом, если вообще тебе git нужен.
И вообще, для чего делать eject? Сомневаюсь, что у тебя в этом есть необходимость.

function openCity(e, city) {
  document.querySelectorAll('.tablink').forEach(n => {
    n.classList.toggle('active', city === 'All' || n === e.target);
  });

  document.querySelectorAll('.tabcontent').forEach(n => {
    n.style.display = city === 'All' || n.id === city ? 'block' : 'none';
  });
}

https://jsfiddle.net/wxz2koms/

class App extends React.Component
у тебя здесь в слове class русская буква по ходу, перепиши :D

Можно вообще без js

<input list="aaaa">
<datalist id="aaaa">
  <option value="Текст1"></option>
  <option value="Текст2"></option>
</datalist>

Охренеть...

var x = 1;
var y = 2;

function sumAndShow(a, b) {
  return document.getElementById("r").innerHTML = a + b;
}

sumAndShow(x, y);

...
this.sayHi() {
        alert("Меня зовут: " + this.name);  
    }
...

Тут this ненужно

...
sayHi() {
        alert("Меня зовут: " + this.name);  
    }

Исправь:

class User {                                          
    constructor (argname) {
        this.name = argname;
    }
    sayHi() {
        alert("Меня зовут: " + this.name);  
    }
} 

var vasya = new User("Вася",20);
 
vasya.sayHi();

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

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

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

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

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

https://jsfiddle.net/s7o4hvcd/

const ScrollButton = props => {
  const onClick = () => window.scrollTo({
    top: props.scrollTo,
    behavior: 'smooth',
  });

  return (
    <div className="down" style={{ top: `${props.top}px` }}>
      Scroll to {props.scrollTo}
      <button onClick={onClick}>&#10095;</button>
    </div>
  );
};

const App = () => (
  <div className="container">
    <ScrollButton scrollTo={500} top={50} />
    <ScrollButton scrollTo={1000} top={100} />
    <ScrollButton scrollTo={2000} top={200} />
  </div>
);

.down {
  position: fixed;
}

https://jsfiddle.net/zm0x4ycj/

https://jsfiddle.net/7nqhzj9y/