Антон Спирин

Хороший кандидат на должность 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 и посмотрите варианты.

Вы путаете с 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
}

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>

Где React Fiber?

Тут

Я не могу понять работает ли React Fiber на версии 16.4 уже сейчас по дефолту (видимо нет раз я могу использовать старые синтаксические конструкции)

Архитектура Fiber используется c версии 16.0

или все же нужно вместо react-dom импортить react-fiber-dom (ну или как-то по другому)

Нет.

Насколько я понял, под декораторам вы подразумевали не паттерн проектирования, частным случаем которого являются компоненты высшего порядка, а аннотации ES7 decorators:

@annotation
class MyClass { }

Если это так, то почитайте:
Компоненты высшего порядка
Декораторы ES7
Компоненты высшего порядка как декораторы

const { id } = this.state;

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

const { id } = this.state;
const newOrder = { id, ... };
const orders = [];

Проблемное меcто:

res.send(     
  Party.findAll().then(party => {
    return JSON.stringify(party);
  });
);

Исправленный вариант:
Party.findAll().then(party => res.json(party));

А еще лучше использовать async/await:

.post(async (req, res) => {
  const party = await Party.findAll();
  res.json(party);
})

или:

.post(async (req, res) => {
  res.json(await Party.findAll());
})

Вы усложняете реализацию там, где это не требуется.
Все можно сделать гораздо понятней и проще:

const mapLangTitleByCode = code => ({
  const titles = {
    1: 'English',
    2: 'Russian',
  };
  return titles[code] || 'unknown code';
});

Для пола можно вообще функцию не делать

<div className="profile-data">
  <span>Language</span>
  <span>{mapLangTitleByCode(data.q_lang)}</span>
</div>
<div className="profile-data">
  <span>Sex</span>
  <span>{data.q_sex === 1 ? 'Male' : 'Female'}</span>
</div>

Используйте react-router-dom. На сервере отдаете по корневому пути или по '*' html с приложением, весь роутинг будет происходить на стороне клиента.

Руководство по react-router.

Для решения вашей задачи, по-хорошему, не нужен redux. Если вы целенаправленно хотите реализовать с использованием redux, то перепишите пример по ссылке строчка за строчкой и попробуйте разобрать. Не получится - изучайте документацию, вы ведь вроде изучать начали. Если есть конкретные вопросы помимо "ничего не понимаю", задавайте.

1. React + koa/express + mongoDB
2. React + firebase
3. Gatsbyjs
4. Create React App
5. Next.js
6. Razzle
7. Rekit
etc

Вызов setState заменяет старый объект состояния новым. Изменения в обоих случаях вы делаете в старом.
Префиксный инкремент работает, так как в вызов setState передается значение увеличенное на единицу, постфиксный инкремент возвращает значение до увеличения.

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

Правильный вариант:

this.setState(prevState => ({ counter: prevState.counter + 1 }));

На последок добавлю, что ++this.state.counter не эквивалентно this.state.counter + 1. Префиксный инкремент эквивалентен записи:

this.state.counter += 1

или:

this.state.counter = this.state.counter + 1

Постфиксный, что-то вроде этого:

(this.state.counter = this.state.counter + 1, this.state.counter - 1)

Подключаем redux-thunk. Пишем async action:

function fetchSomeData(params) {
  return async (dispatch, getState) {
    try {
      const { data } = await Api.fetchSomeData(params);
      dispatch(fetchSomeDataSuccess(data));
      // для доступа к store можно использовать getState
      return data;
    } catch (e) {
      dispatch(fetchSomeDataFail(e));
      return e;
    }
  }
}

Подключаем к компоненту:

const mapStateToProps = state => ({ ... });
const mapDispatchToProps = {
  fetchSomeData,
};

export default connect(mapStateToProps, mapDispatchToProps)(SomeComponent);

А чего вы ожидали? Вы создаете бесполезный селектор, который ничего не выбирает, а просто пропускает через себя объект games. Затем, этот объект вы целиком передаете в connect. Естественно, при его изменении ваш компонент перерисует по цепочке все дочерние компоненты.
Делайте в компонентах Game проверку shouldComponentUpdate и сравнивайте входящие объекты:

shouldComponentUpdate(nextProps) {
  return nextProps.game !== this.props.game;
}

1. Статические данные. Зачем они определяются каждый render? Их можно вынести за пределы компонента:

const paths = [ ... ];
class Menu extends Component { ... }

А по-хорошему генерировать роуты и переключать страницы по одним и тем же данным:

import routes from './routes';

/* ... */

<Switch>
  {routes.map(route => (
    <Route
      exact={route.isExact}
      path={route.path}
      component={route.component}
    />
  )}
</Switch>

2. По какой логике используете ключевые слова const и let? Используйте const для всех переменных которые не переопределяются в коде, а let только для тех, которые переопределяются. Это заметно снижает когнитивную нагрузку с читающего код.

3. Конструкции вроде:

let
  isPrev = currPathIndex !== 0,
  isNext = currPathIndex !== paths.length - 1;

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

const hasPrev = currPathIndex !== 0;  // (1)
const hasNext = currPathIndex !== paths.length - 1; // (2)

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

(1), (2) - обратите внимание, что я заменил префикс is на has, что правильней. Для булевых переменных помимо is, можно использовать следующие префиксы is, has, should и подобные. Примеры:

isVisible
hasChildren
shouldShowCloseButton

4. Если используете много ключей из state и props можно сделать деструктуризацию:
const { isOpen } = this.state;

5. Don't repeat yourself. Код который вы используете многократно старайтесь выносить в отдельные компоненты:

<Link className="next_btn" style={ this.state.isOpen ? {visibility: 'hidden'} : null} to={paths[currPathIndex + 1].link}>
  <span>{ paths[currPathIndex + 1].title }</span>
</Link>

Его можно переписать компонентом с примерно таким интерфейсом:

<NavButton prev isVisible={!isOpen} path={prevPath} />

6. Зачем тернарки там где лучше подойдет &&?

{isOpen && this.renderСloseBtn()} // (1)
{hasPrev && <NavButton prev isVisible={!isOpen} path={prevPath} />}
{hasNext && <NavButton next isVisible={!isOpen} path={nextPath} />}

(1) - обратите внимание, что рендер кнопки вынесен в отдельный метод, так она будет создаваться только тогда, когда она нужна. В вашем же коде она определяется даже тогда когда не добавляется на страницу.

Используйте тернарный оператор в render, там где есть альтернативный вариант:

{isFetching ? <Preloader /> : <Content data={data} />}

Но не используйте вложенных:

{isSignedIn ? isMobile ? <UserMenuMobile /> :  <UserMenuDesktop /> : <MainMenu /> }

Лучше так:

{isSignedIn ? this.renderUserMenu() : <MainMenu /> }

где this.renderUserMenu:

renderUserMenu() {
  return this.props.isMobile ? <UserMenuMobile /> :  <UserMenuDesktop />;
}

7. Старайтесь не писать избыточных конструкций:

class Menu extends Component {
  constructor(props) {
    super(props);
      this.state = {
          isOpen: false,
      };
  }
}

При использовании прессета stage-0, create-react-app, jsfiddle и прочих библиотек/бойлерплейтов/сервисов, использующих плагин babel-plugin-transform-class-properties, достаточно:

class Menu extends Component {
  state = {
     isOpen: false,
  };
}