Что нужно иметь и знать в фреймворке React джуну?

sim3x, Спасибо! Добавил примеры.

Что нужно иметь и знать в фреймворке React джуну?

sunblossom,

человек, который имеет в копилке каждый из ваших пунктов, по определению не может не иметь опыта.

какой из приведенных пунктов по-вашему невозможно иметь без опыта работы?

ИМХО, теория без практики - хуже, чем практика без углубленной теории. теория без практики - хуже

Ничто не запрещает человеку учиться и совмещать теорию с практикой. Более того, процесс изучения ЯП и сопутствующих технологий, по-хорошему, должен вмещать больше практики, чем теории. Для получения практического опыта программирования не обязательно работать программистом, достаточно писать код.
Совсем другое дело продолжительный опыт работы в реальных проектах. Именно его наличие и знания полученные из этого опыта и отделяют программиста уровня Middle от Junior.

Что нужно иметь и знать в фреймворке React джуну?

Андрей Федосеев, sunblossom, какие из приведённых пунктов вас смущают?

sunblossom, для Middle в требования ко всему этому еще и около двух лет опыта работы. Junior боевого опыта может и не иметь.
Во всех компаниях, где я работал и куда будучи джуном пробовался, требования были примерно на этом уровне. Сам бы я кондидата со знаниями ниже этих рассматривал как трейни или стажера. Конечно, по каждому пункту можно сделать небольшие поблажки. Особенно, если кандидат подает большие надежды.
Вы, наверно, путаете с уровнем стажера. Ему еще простительны неуверенные знания JavaScript или неумение написать простейший запрос на сервер.
Возможно, где-то требования пониже, но думаю там и зп соответствующая.
Уверен, завтра в ответах и комментариях отпишутся другие React разработчики и поделятся своим мнением и опытом.

Как написать форму(select) на react?

Stergy, с переменной окружения приходит строка ее надо парсить:
const array = JSON.parse(SOME_JSON);
Во втором случае это массив.

Как написать форму(select) на react?

Stergy,

[{"name1": "Some_name1", "id": 123 }, {"name2": "Some_name2", "id": 987 }]

превращается в:

[{ title: "Some_name1", value: 123 }, { title: "Some_name2", value: 987 }]

Кавычки в JavaScript для переменных не обязательны, если они не содержат запрещенных символов.
В JSON они обязательны для всех ключей.

Как написать форму(select) на react?

Stergy, вам надо привести данные из импортированного массива к одному виду. Можно попробовать использовать для этого Object.values:

const options = SOME_JSON.map(el => {
  const [ title, value ] = Object.values(el);
  return { title, value };
});

Демо

Как написать форму(select) на react?

Stergy, самый простой вариант:
1. приводим опции к единому виду:

const options = [
  {
    title: "Some name",
    value: '1',
  },
  {
    title: "Some name 2",
    value: '2',
  },
];

2. JSX:

return (
  <select name="someName" value={someValue} onChange={this.handleChange}>
    {options.map(option => (
      <option value={option.value}>{option.title}</option>
    ))}
  </select>
);

Что-то более сложное думаю для вас пока будет тяжело.

Пример моего select из текущего проекта

Select:

interface Props {
  name?: string
  value?: string
  values?: string[]
  defaultValue?: string
  placeholder?: string
  options: Array<{
    title: string
    value: string
  }>
  onChange?: Function
  className?: string
  multiple?: boolean

}

interface State {
  value: string
  values: string[]
}


class DropdownSelect extends React.Component<Props, State> {

  static displayName = 'DropdownSelect';

  static Option = Option;
  static OptionsList = OptionsList;

  state = {
    value: this.props.value || null,
    values: this.props.values || [],
    isOpened: false,
  };

  get value() {
    return this.state.value;
  }

  get values() {
    return this.state.values;
  }

  componentDidMount() {
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.props.value) {
      this.setState({ value: nextProps.value });
    }
    if (nextProps.values !== this.props.values) {
      this.setState({ values: nextProps.values });
    }
  }

  componentDidUpdate(prevProps: Props, prevState: State) {
  }

  componentWillUnmount() {
  }

  shouldComponentUpdate(nextProps: Props, nextState: State) {
    return true;
  }

  handleOptionClick = value => {
    const { onChange, name } = this.props;

    onChange({ target: { name, value } });
    this.setState({ value });
  };

  handleMultiOptionChange = e => {
    const { onChange, name } = this.props;
    const target = e.target as HTMLInputElement;
    const values = _.xor(this.state.values, [target.name]);

    this.setState({ values }, () => {
      onChange({ target: { name, value: values } });
    });
  };

  getCurrentValue() {
    const { value } = this.state;
  }

  renderSimpleOptionsList() {
    const { options } = this.props;

    return (
      <OptionsList className="react-list">
        {options.map(option => (
          <Option
            key={option.value}
            isActive={this.state.value === option.value}
            onClick={() => this.handleOptionClick(option.value)}>{option.title}</Option>
        ))}
      </OptionsList>
    );
  }

  renderMultipleOptionsList() {
    const { options } = this.props;
    const { values } = this.state;

    return (
      <OptionsList className="react-list">
        {options.map(option => (
          <OptionWrapper
            key={option.value}
          >
            <StyledCheckBox
              onChange={this.handleMultiOptionChange}
              name={option.value}
              checked={(values as ArrayWithIncludes<string>).includes(option.value)}
            >
              {option.title}
            </StyledCheckBox>
          </OptionWrapper>
        ))}
      </OptionsList>
    );
  }

  renderOptionsList() {
    const { options, multiple } = this.props;

    return multiple ? this.renderMultipleOptionsList() : this.renderSimpleOptionsList();
  }

  @withRaven
  render() {
    const { options, placeholder = 'Select', className, multiple } = this.props;
    const { value } = this.state;
    const currentValue = (!multiple && value) ?
      (options as ArrayWithFind<{ title: string, value: string }>).find(option => option.value === value).title : placeholder;

    return (
      <Wrapper className={className}>
        <Dropdown closeOnClickInside={!multiple} dropdown={this.renderOptionsList()}>
          {!this.props.children && <Value>{currentValue}<ArrowDown src={require('img/newweb/ic-arrow-menu.svg')} /></Value>}
          {this.props.children}
        </Dropdown>
      </Wrapper>
    );
  }
}

export default DropdownSelect;

Dropdown:

import * as React from 'react';
import styled from 'styled-components';
import withRaven from '../../../lib/withRaven';

const Wrapper = styled.div`
  position: relative;
  display: inline-block;
`;

const Head = styled.div`
  
`;

const Body = styled.div`
  position: absolute;
  top: 100%;
  width: 100%;
`;

interface Props {
  dropdown: any
  onShow?: Function
  onHide?:Function
  className?: string
  closeOnClickOutside?: boolean
  closeOnClickInside?: boolean
}

interface State {
  isActive: boolean
}

class Dropdown extends React.Component<Props, State> {
  static Head = Head;

  static Body = Body;

  static displayName = 'Dropdown';

  static defaultProps = {
    closeOnClickInside: true,
    closeOnClickOutside: true,
  };

  state = {
    isActive: false,
  };

  wrapper: HTMLDivElement;

  getWrapperRef = node => this.wrapper = node;

  shouldComponentUpdate(nextProps: Props, nextState: State) {
    return nextProps.dropdown !== this.props.dropdown ||
      nextState.isActive !== this.state.isActive;
  }

  componentWillUnmount() {
    this.removeOutsideClickListener();
  }

  onClick = () => {
    this.setState(prevState => ({
      isActive: !prevState.isActive,
    }), () => {
      this.state.isActive ? this.onShow() : this.onHide();
    });
  };

  onWrapperClick = () => {

  };

  onHeadClick = () => {
    this.setState(prevState => ({
      isActive: !prevState.isActive,
    }), () => {
      this.state.isActive ? this.onShow() : this.onHide();
    });
  };

  onBodyClick = () => {
    if (this.props.closeOnClickInside) {
      this.setState({ isActive: false }, this.onHide);
    }
  };

  onShow() {
    const { onShow, closeOnClickOutside } = this.props;

    if (closeOnClickOutside) {
      this.addOutsideClickListener();
    }

    if (onShow) {
      onShow();
    }
  }

  onHide() {
    const { onHide, closeOnClickOutside } = this.props;

    if (closeOnClickOutside) {
      this.removeOutsideClickListener();
    }

    if (onHide) {
      onHide();
    }
  }

  addOutsideClickListener() {
    document.addEventListener('mousedown', this.onClickOutside);
  }

  removeOutsideClickListener() {
    document.removeEventListener('mousedown', this.onClickOutside);
  }

  onClickOutside = e => {
    const { onHide } = this.props;

    if (this.wrapper && !this.wrapper.contains(e.target)) {
      this.setState({ isActive: false });
    }

    if (onHide) {
      onHide();
    }
  };

  @withRaven
  render() {
    const {
      children,
      dropdown,
      className,
    } = this.props;

    const { isActive } = this.state;

    return(
      <Wrapper
        className={className}
        innerRef={this.getWrapperRef}
      >
        <Head onClick={this.onHeadClick}>{children}</Head>
        {isActive && <Body onClick={this.onBodyClick}>{dropdown}</Body>}
      </Wrapper>
    );
  }
}

export default Dropdown;

Как работать с socket io и saga?

Я пересмотрел кучу ссылок, но так и не могу догнать как лучше сделать

Варианты:
1. Делайте так, как удобней будет использовать вам в реалиях вашего проекта.
2. Делайте по любому руководству.

Как в React достучаться к дата атрибутам?

Владимир, можно еще дата атрибуты поименно передавать:

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} />;
};

Как в React достучаться к дата атрибутам?

Владимир, надо добавить передачу остальных параметров. Обновил ответ.

Как подключить ajax для отправки php формы?

Stanislav,

Уже практически переписывал все с нуля, по документации jquery пытался все сделать, но комментарии не отправляются в бд и не выводятся.

Что вы используете для форм?

campus1, а дополнительные редьюсеры, состояния store, действия и прочий бойлерплейт читаемость не уменьшают?
Еще аргумент. Вы вынесли форму в store и у вас уже все лагает.
А теперь посмотрите этот пример. Сколько перерисовок приложения инициирует взаимодействие с формой в этом примере? Нисколько.
Стоит добавить, что к вопросам оптимизации лучше подходить без фанатизма и преждевременная оптимизация там, где она не нужна, штука не очень хорошая.

Что вы используете для форм?

campus1,

А если форм допустим 30 или 50?

А какое это имеет значение?

И данные с формы допустим нужны будут children of parent component children's

Приведите реальный кейс, где подобное может понадобиться. Обычно, данные форм отправляются на сервер, ответ в свою очередь пишут в store, соседние компоненты работают, в таком случае, с ответом, а не с данными формы.

но если в проекте есть уже redux, то было бы разумно использовать store??

Нет, не разумно. Лишний код, лишние вычисления, лишние проверки, лишнее время. Объективных плюсов просто-напросто нет.

Исключения, конечно, бывают всегда. Поэтому я написал в "подавляющем большинстве случаев", а не просто "нет никакого смысла"

Как считать переменную окружения из json файла?

Stergy, вот еще, если генерируете шаблон с помощью Rails, то можете передать переменные через него в объект window с помощью тега script:

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

Тоже неплохой вариант.

Как считать переменную окружения из json файла?

Stergy, а в чем проблема? В бандл библиотека не попадет. Переменные передаются посредством Webpack.DefinePlugin, который используется в любом случае.
Вы, конечно, можете использовать утилиту fs, написать свой, довольно простой в реализации парсер и самостоятельно передавать переменные в Webpack.DefinePlugin, но зачем тратить время когда есть множество готовых решений?

Что нужно сделать перед изучением ЯП?

То исть как начать думать как программист, а не как кодер.

spoiler

Как переделать скрипт вывода подсказок с bootstrap3 на bootstrap4?

Это написано первым же пунктом в первом же разделе Что надо знать перед тем как использовать плагин.

Почему Gulp.js заменяет цикл while на for?

Eugene Zubkov, в вашем примере этого нет. Покажите исходный и сгенерированный код.

Можете подсказать Javascript редактор (Не wysiwyg. Хочу, чтобы было как на Тостере - жму на кнопку B, например, и появляется код)?

sorry_i_noob, обновил ответ. Я изменил реализацию. Теперь проще использовать атрибуты.

Можете подсказать Javascript редактор (Не wysiwyg. Хочу, чтобы было как на Тостере - жму на кнопку B, например, и появляется код)?

el.value.slice(0, start)- часть строки до выделения
el.value.slice(start, end) - выделенная часть строки
el.value.slice(end) - часть строки после выделения
wrapper - имя тега
Ну и почитайте если не знаете, что такое шаблонные строки.