Антон Спирин

А вас не смущает, что в руководстве первый webpack, а у вас четвертая версия? Остальное даже не смотрел. Ищите, что-нибудь посвежей, c тех пор как вышла эта статья многое сильно изменилось.
На github полно готовых боилерплейтов на любой вкус. В англоязычном сегменте полным полно свежих статей.

Попробуйте
git remote update
или
git merge origin/master

Можно так:
https://jsfiddle.net/rockon404/fw7g810p/

Такие задачи легко решаются через родителя:

class Parent extends Component {
  state = {
    text: 'some text',
  };

  handleClick = () => {
    this.setState({ text: 'some other text'});
  };

  render() {
    const { text } = this.state;

    return (
      <Wrapper>
        <Button onClick={this.handleClick} />
        <Text>{text}</Text>
      </Wrapper>
    );
  }
}

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

Правильно так:

npm install --only=prod
npm install --only=production

npm install --only=dev
npm install --only=development

npm install

Исправьте:

const mapStateToProps = (state) => {
  projects: state.projects
}

на:

const mapStateToProps = (state) => ({
  projects: state.projects
});

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

Смотрите как это работает. Цель алгоритма вывести простые числа в диапазоне от 2 до 10. Это 2, 3, 5 и 7.
Простое число это число которое делится лишь на само себя и единицу.
Следовательно для всех случаев когда i % j == 0 приj >=2 && j < i(i делится на j без остатка при значениях j от 2 и выше, но меньше i) число i не является простым и мы нам надо выйти из итерации цикла, но не внутреннего, в котором мы в данный момент находимся, а внешнего, так как нас больше текущее значение i не интересует. Для этого используется метка main. Вызов continue main; переносит нас на следующую итерацию внешнего цикла.

Лучше сразу писать изоморфный проект, так как есть множество ньюансов которые стоит учитывать при разработке таких приложений. На github можно найти готовые боилерплейты. На написание своего может уйти от пары часов до пары дней, в зависимости от требуемого набора инструментов. Так же вы можете посмотреть в сторону таких инструментов как next.js, razzle, after . Но точно не знаю, насколько легко, при необходимости, мигрировать с таких решений.

JavaScript роутинг.

Это не файл, а директория, которую создает ваша IDE. Найдите в корне проекта файл .gitignore и добавьте в него следующую строку:
.idea/

.visually-hidden {

  visibility: hidden;
  position: absolute;

  /* или */

  clip: rect(0, 0, 0, 0);
  position: absolute;

  /* или */

  transform: scale(0, 0);
  position: absolute;

  /* или */

  opacity: 0;
  position: absolute;
  pointer-events: none;
  user-select: none;

  /* или */

  height: 0;
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
}

UPD:

.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

Как прятать — HTML Шорты
Inclusively Hidden
Hiding Content for Accessibility
How-to: Hide Content

class Example extends Component {
  state = {
    inputValue: '',
  };

  handleChange = e => { 
    const { name, value } = e.target;
    
    this.setState({
      [name]: value,
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    //  получить состояние формы можно обратившись к this.state
  };

  render() {
    const { inputValue } = this.state;

    return (
      <form onSubmit={this.handleSubmit}>
        <input
          name="inputValue"
          value={inputValue}
          onChange={this.handleChange}
        />
        ...
      </form>
    );
  }

prompt возвращает string при нажатии Ok и null при нажатии Отмена:

var x = prompt("введите число");
console.log(typeof x); // string

Можно переписать так если надо просто приводить к числу:

var x = +prompt("введите число");
console.log(typeof x); // number при условии, что строку можно привести к числу

Строгое равенство при сравнении разных типов всегда возвращает false:
'0' === 0 // false

Если вам надо делать проверки на нажатие Отмена, ввод пустой строки или нечислового значения, приведение стоит делать после этих проверок:

var input = prompt('Введите число: ');

if (input === '') {
  alert('Пустая строка');
} else if (input === null) {
  alert('Вы нажали "Отмена"');
} else if (Number.isNaN(+input)) {
  alert('Вы ввели не число');
} else if (+input === 0) {
  alert('Вы ввели 0');
} else if (+input > 0) {
  alert('Вы ввели число больше 0');
} else {
  alert('Вы ввели число меньше 0');
}

Если вы хотите, чтобы его обтекал текст, то поменяйте местами элементы b-navbar__nav-cell и b-navbar__search местами. Так как плавающие элементы обтекают элементы расположенные ниже.

range создает диапазон range(n, m) по формуле:
n, n + 1, n + 2, ..., n + m - 1

В первом случае диапазон от 1 до 5, так как 1 + 5 - 1 = 5:
1, 2, 3, 4, 5
Во втором случае диапазон от 0 до 4, так как 0 + 5 - 1 = 4:
0, 1, 2, 3, 4

Сумма в первом случае:
{ sum: 15, count: 5 }
во втором:
{ sum: 10, count: 5 }

Другими словами n - это первое значение диапазона, m - количество элементов входящих в диапазон.

Результат, в первом случае:
x = 15 / 5;
во втором:
x = 10 / 5;

Cмотря как хотите реализовать. Если хотите открывать на той же странице, то достаточно хандлера, ключа состояния и условия в render:

class Example extends Component {
  state = {
     eventsList,
    selectedEvent,
  };

  handleSelectEvent(event) {
     this.setState({ selectedEvent: event });
  }
  
  render() {
    const { eventsList, selectedEvent } = this.state;
                
    return (
      <Wrapper>
        {selectedEvent && <EventDetails event={selectedEvent} />}
        <ul>
          {eventsList.map(event => (
            <li
              key={event.id}
              onClick={() => this.handleSelectEvent(event)}
            >
              {event.name}
            </li>
          ))}
        </ul> 
      </Wrapper>
    );
  }
}

Если хотите на отдельной странице, то лучше использовать роутер.
В примере ниже используются компоненты BrowserRouter, Switch, Route, Link из пакета react-router-dom.
Приложение оборачиваете в BrowserRouter:

<BrowserRouter>
  <App />
</BrowserRouter>

В том месте где хотите рендерить роуты:

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/events" component={EventsList} />
  <Route path="/event/:id" component={EventDetails} />
</Switch>

В компоненте списка:

class EventsList extends Component {
  state = {
     eventsList,
  };

  render() {
    const { eventsList } = this.state;
                
    return (
      <Wrapper>
        <ul>
          {eventsList.map(event => (
            <li key={event.id}>
              <Link to={`/event/${event.id}`}>{event.name}</Link>
            </li>
          ))}
        </ul> 
      </Wrapper>
    );
  }
}

В компоненте детализации, в зависимости откуда получаете элементы реализация может отличаться,
но id элемента можно получить из параметров ссылки так:

class EventsList extends Component {
  componentDidMount() {
    const elementId = this.props.match.params.id;
  }
  render() {
    ...
  }
}

React + любой css in js.

Пусть инпуты меняют только значения this.playersCount, this.cardsCount и this.numbersCount.
Никаких id для игроков не надо, пусть они просто лежат в массиве. Создавайте по клику на кнопку "создать игру" или "создать карточки":

class Game {
   // some stuff

  createGame() {
    this.players = [];

    for (let i = 0; i < this.playersCount; i++) {
     const player = new Player({
        name: `Player ${i}`,
        cards: this.createCards()
      });
   
      this.players.push(player);
    }
  }

  createCards() {
    // some stuff
  }

  // some stuff
}

export default (state = initState, action) => {
    if(action.type === 'ADD_VAL'){
        return [
            ...state,
            action.date
        ];
    }
    return state;
};

либо:

const values = (state = initState, action) => {
    if(action.type === 'ADD_VAL'){
        return [
            ...state,
            action.date
        ];
    }
    return state;
};

export default values;

Второй вариант предпочтительнее, так как именованные функции легче отлаживать.