Антон Спирин

Потому-что когда вы вызываете метод на объекте:
obj.method(); // вызываем метод
или:
this.method(); // вызываем метод
Ссылка на объект указанная перед точкой будет использована в качестве контекста и будет доступна в функции, через ключевое слово this.

Когда вы передаете метод без вызова:
onClick={obj.method} // не вызываем метод
или:
onClick={this.method} // не вызываем метод
Передается лишь метод, а контекст теряется.

Чтобы не терялся контекст при передаче метода в слушатель, можно использовать функцию bind. На вашем примере:

class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color: 'red'
    };
    this.changeStylesForCaption = this.changeStylesForCaption.bind(this); // привязываем контекст
  }  
  
  changeStylesForCaption() {
    this.setState({
      color: 'black'
    });
  }

  render() {
    return (
      <h1 onClick={this.changeStylesForCaption} style={{ color: this.state.color }}>gleb</h1>
    );
  }

}

Стрелочные функции контекста не имеют и используют контекст того окружения, где они определены.

Потому-что документацию читать надо.

const replies = '#react-root > div > main > div > div > div > div > div:nth-child(2)';

const goTo = async () => {
  page.evaluate(replies => {
    return document.querySelector(replies).children[0].innerText;
  }, replies);
};

express-ipfilter

const express = require('express');
const path = require('path');

const app = express();

app.use('/public', express.static(path.join(__dirname, '/public'));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/index.html'));
});

Скорей всего ошибка в редьюсере. Передаете в spread оператор null или undefined.
{ ...someValue }

Примерно так это делается без использования redux:

const Example extends Component {
  state = {
    select: 'default value',
  };
  
  postData(data) {
    fetch('api/somePath', {
      method: 'post',
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    }).then(res => res.json())
      .then(data => {
        // do something with data
    });
  }  

  handleChange = e => { /* ... */ };  

  handleSubmit = () => {
    const { select } = this.state;

    this.postData({ select });
  };

  render() {
    return (
      <Form>
        <Select value={this.state.select} onChange={this.handleChange} />
        <Button onClick={this.handleSubmit}>Submit</Button>
      </Form>
    );
  }
}

Если имеется ввиду вызов вне компонентов React или async aciton, то так:
В вашей точке входа:

export const store = configureStore();

// some code

В целевом файле:

import { store } from './index';
import { someAction } from './actions/some';

store.dispatch(someAction());

Но это не очень хорошая практика. Правильней написать asyncAction и вызывать его.

const initialState = {
  type_transport_id: null,
  brand_id: null,
  automodel_id: null,
  year: null,
  body_id: null,
};

export default function model(state = initialState, action) {
  const { type, payload } = action;

  switch(type) {
    case SET_TYPE:
      return {
        ...initialState,
        type_transport_id: payload,
      };
 
    case SET_BRAND:
      return {
        ...state,
        brand_id: payload,
        automodel_id: null,
        year: null,
        body_id: null,
      };

    default:
      return state;
  }
}

Либо кейс SET_BRAND можно еще так представить:

case SET_BRAND:
  return {
    ...initialState,
    type_transport_id: state.type_transport_id,
    brand_id: payload,
};

Одно слово:

const word = 'real';
const regexp = new RegExp(`${word}\\w*`, 'ig');

string = 'really, reality, super, universe';

console.log(string.replace(regexp, 'BOOM'));  // BOOM, BOOM, super, universe

Демо.

Массив слов:

const words = ['real', 'super'];
const regexp = new RegExp(`(${words.join('|')})\\w*`, 'ig');
const string = 'really, reality, super, universe';

console.log(string.replace(regexp, 'BOOM'));  // BOOM, BOOM, BOOM, universe

Демо.

Как работают Thunk?

Вы имели ввиду асинхронные действия и промежуточное ПО redux-thunk?

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

Правильно.

Сам вызов store.dispatch() синхронный. Но если туда передается не объект, а функция такая как addPost, то до редьюсеров она не доходит. Ее перехватывает redux-thunk middleware и выполняет передавая туда dispatch, getStore и опциональный третий аргумент. Ясное дело, что такая функция может быть асинхронной.

Хороший кандидат на должность Junior React Developer, по моему мнению, должен соответствовать следующему перечню требований:
1. Хорошее знание JavaScript. В React разработке используется ES6 и большинство экспериментальных фич еще не вошедших в стандарт.
2. Хорошее знание HTML и CSS. Кроссбраузерная верстка. Так же, хорошо иметь представление о том, что такое css-in-js.
3. Web APIs. Умение работать с объектной моделью документа(DOM) и все эти XMLHttpRequest, localstorage, cookie, history и прочее.
4. Хорошее знание API React. Вы должны хорошо знать React, знать его возможности, понимать основные концепции и уметь ответить на большинство типовых вопросов. Для этого достаточно хорошо изучить документацию, разобрать пару типовых проектов на github и попрактиковаться. Много полезной информации, приёмов и идей можно подчерпнуть из тематических статей и докладов. Так же, на просторах интернета можно найти подборки типовых вопросов, часто задаваемых на собеседованиях. В англоязычном сегменте их больше.
5. Redux. Уверенное знание API. API библиотеки до боли пост. Знать, что такое промежуточное ПО и зачем оно. Понимать базовые концепции архитектуры Flux. Все это есть в документации и многочисленных курсах.
6. Умение работать с менеджером пакетов npm на базовом уровне.
7. Node.js. Хотя бы уметь написать простейший express/koa сервер, который будет отдавать ваше приложение и статику.
8. Webpack. Базовые знания.
9. Умение работать с git. Хотя бы знать и уметь примерять команды: init, clone, add, commit, push, pull, merge, checkout.
10. Иммутабельность. Четкое понимание зачем это надо. Знание приемов иммутабельного изменения структур данных. Это есть в официальном туториале React.
11. Статическая типизация TypeScrpt/Flow. Для начала хватит самых основ и способности понимать чужой код.
12. Функциональное программирование. Хватит знаний полученных в процессе изучения JavaScript, а так же не помешает знать, что такое каррирование, чистые функции и рекурсия.
13. Базовые концепции ООП. Хватит знаний полученных в рамках изучения JavaScript.
14. Асинхронный код. Понимать как его правильно организовывать. Promise, async/await.
15. Сетевые протоколы передачи данных. Вполне хватит базовых знаний о http/https, о том, что такое заголовки и какие они бывают. Хорошо знать о том, что такое websocket.
16. За плечами должен быть хотя бы один учебный проект на React. Хватит типового тестового задания.
Примеры таких заданий: 1, 2, 3(сайт может быть не доступен на территории РФ, советую отрыть через VPN и посмотреть), 4, 5. Если подобного проекта у вас нет, то будьте готовы, что потенциальный работодатель предложит вам выполнить тестовое задание и только по его результату вас, может быть, пригласят на техническое интервью. Если напишите хорошо, вас скорей всего пригласят.
17. Желателен опыт создания типовых UI элементов. Например, чтобы не вызывало трудностей написать простой кастомный чекбокс. Куча примеров реализаций типовых элементов есть на codepen.

Это не красный минимум знаний и во многих компаниях требования могут быть значительно ниже. Но соответствие вышеперечисленым пунктам будет хорошим аргументом для работодателя остановить свой выбор именно на вашей кандидатуре.

Похожий вопрос.

Здравствуйте, я абсолютный новичок.

Так начните знакомство с библиотекой с изучения документации.

Прочитав приведенные ниже пункты, вы сможете решить поставленную перед вами задачу:
Работа с формами.
Построение списков.
Если и после этого не получится, пройдите туториал.
Если есть представление как это сделать, но есть конкретные вопросы - задавайте.

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

x.lenght; // undefined
x.length; // длина коллекции

Вы путаете с ducks pattern.
Это не технология, а лишь подход к организации кодовой базы проекта.

const MyInput = props => {
  const { onChange } = this.props;
  const id = this.props['data-id'];
  const name = this.props['data-name'];
  
  return <input onChange={onChange} data-id={id} data-name={name} />;
};

либо:

const MyInput = ({ onChange, ...rest }) => <input onChange={onChange} {...rest} />;

В хандлере:

onChange = e => {
  const { id, name } = e.target.dataset;
  // do something with id and name
}

Скорей всего вы пытаетесь использовать NodeList.prototype.forEach(), который в IE не поддерживается.
Можно использовать полифилл.
Можно для перебора NodeList использовать метод массива:

var list = document.querySelectorAll( 'input[type=checkbox]' );
Array.prototype.forEach.call(list, function (item) {
  // do something
});

1. Читать, парсить .env и предавать переменные в код с помощью webpack.DefinePlugin.
2. Не тратить время и использовать готовую библиотеку, например dotenv-webpack.
3. С помощью Rails писать переменные в шаблон:

<script>
  window.env = {
    ENV_VARIABLE: '...',
  };
</script>

В подавляющем большинстве случаев, нет абсолютно никакого смысла хранить состояние форм в store.

Ответы:
1. Использую либо контролируемые компоненты, либо refs. Состояние форм, в случае с контролируемыми компонентами, хранится в state родительского компонента.
2. Все зависит от проекта и требований. Где-то достаточно пары проверок в onSubmit, а где-то форма может генерироваться по данным, полученным с сервера и валидироваться по полученным правилам.

1. С помощью любой утилиты для чтения, парсинга и импорта переменных .env в JavaScript. С webpack будет удобен dotenv-webpack
2. С помощью Rails писать в шаблон:

<script>
  window.__data = {
    ACCOUNTS: '...',
  };
</script>