Полезно ли изучать React/Redux, если хочешь работать с VueJS?

Question

[bormor]

Здравствуйте.
Хочу перейти из верстальщиков в JS Dev. Очень хотел бы работать с VueJS.

Есть ли смысл сначала хорошо освоить React/Redux, а потом Vue?
Мне это кажется полезным:
- с точки зрения рынка (вакансий с Vue очень мало, лучше войти в FE как React Dev, потом перейти во Vue)
- c точки зрения изучения хороших практик (слышал мнение что "React навязывает хорошие практики, Vue дает слишком много свободы и новичку проще накодить с душком")

Но я могу ошибаться и может лучше прямо начать изучать Vue.
Что скажете?

Comments

[sim3x]

А как переходить на вуе, если вакансий мало?

Answer 1

[Дмитрий Беляев]

Начать следует с JS и встроенного в браузер api
Фреймворк/библиотека - лишь инструмент, который лишь решает определенный круг массовых задач. Без знания основ, настанет момент, когда у библиотеки не будет готового решения/плагина - и Ваша работа встанет из-за этого.
Имея же хотя бы базовые принципы, как библиотека/фреймворк работают внутри, изучить его станет гораздо более простым делом.

По сабжу:
Зная React+Redux освоить Vue+Vuex - дело 2-3 дней
Работая с Vue возвращаться на React уже не хочется
Выводы делайте сами

Comments

[Yustas Alexu]

Работая с Vue возвращаться на React уже не хочется

А у меня наоборот. Вью как-то не понравился и я вернулся на реакт.

[Дмитрий Беляев]

Yustas Alexu, Каждому свое, добавлю так же, что у них несколько противоположные подходы к работе с данными:
React - это про иммутабельность данных, чистые функцие, прочие ФП приблуды, ООП добавляется только по вкусу как вспомогательный инструмент
Vue - наоборот мутабельность данных и реакция на изменения, ООП приблуды вроде событий, ФП - по настроению, как вспомогательный

Ну и еще момент, React мне не нравится за jsx... а писать производный код руками - то еще удовольствие
Vue же дает мне достаточно свобод в плане выбора технологий, например я могу в одном проекте писать на TypeScript те компоненты, которые будут переиспользоваться, и не тратить время на типы, для того что сделается один раз, для здесь и сейчас

Answer 2

[Антон Спирин]

Изучайте то, что больше нравится.
Хорошо знать и практиковать оба фреймворка(да, да, да: вообще-то React библиотека бла, бла, бла) нет особого смысла.
Хотите попробовать React - пробуйте.

ИМХО хорошо изучите React, на Vue переходить не захотите.

Comments

[Insolation]

Да соглашусь с Антоном)
Попробовал React, теперь не хочется переходить на другой.

P.S Если закрыть глаза на некоторые вещи, то я бы говорил что React это фреймворк (с использованиям Redux).

[Yustas Alexu]

ИМХО хорошо изучите React, на Vue переходить не захотите.

Согласен на все 100%

[Антон Спирин]

Insolation, Yustas Alexu, я не холивара ради написал и не подразумевал, что React лучше Vue =) Они разные, хоть Vue и впитал идеи React. Просто React это отличный и удобный инструмент, эффективно решающий свою задачу и при хороших и глубоких знаниях, нет никакого смысла куда-то переходить. Особенно учитывая, то количество вакансий и многообразие проектов которое есть на рынке и постоянно растет.
React из тех инструментов которые хочется использовать. Да и развивается он в правильном направлении.
Vue хороший вариант для тех кому, по каким-то не нравится JSX, да и порог входа ниже. Но если JSX нравится, то я не вижу ни одной причины писать не на React.

А css in js, по мне один из самых удобных способов писать и поддерживать модульный css.
Для Webstorm есть отличный плагин для подсветки и дополнения css в Styled Components.
Компоненты получаются очень читаемые, и их очень легко поддерживать.

import * as React from 'react';
import styled from 'styled-components';
import { Map } from 'immutable';
import { withRaven } from 'app-lib';
import { SVG } from 'app-common/components';

const Wrapper = styled.div`
  position: relative;
  margin-top: 32px;
  padding-bottom: 56.25%;
  height:0;
  overflow: hidden;
`;

const IFrame: any = styled.iframe`
  position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: #000;
`;

const Preview: any = styled.div`
  position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
  cursor: pointer;
  background-image: url(${({ src }: { src: string }) => src});
  background-position: center center;
  background-size: cover;
  background-color: #000;
`;

const StyledSVG = styled(SVG)`
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
`;

interface Props {
  data: Map<any, any>
}

interface State {
  isActive: boolean
}


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

  static displayName = 'Embed';

  state: State = {
    isActive: false,
  };

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

  node: HTMLElement;

  getNodeRef = node => this.node = node;

  onClickActive = () => {
    this.setState(prevState =>({ isActive: !prevState.isActive }));
  };

  @withRaven
  render() {
    const { data } = this.props;
    const { isActive } = this.state;

    const embed = data.getIn(['url', 'embed']);
    const preview = data.get('preview');

    return (
      <Wrapper>
        {isActive ? (
          <IFrame
            getInnerRef={this.getNodeRef}
            src={embed + '?autoplay=1'}
          />
        ) : (
          <Preview src={preview} onClick={this.onClickActive}>
            <StyledSVG src={require('img/play.svg')} />
          </Preview>
        )}
      </Wrapper>
    );
  }
}

export default Embed;

По мне не код, а песня. )

Answer 3

[Роман]

"React навязывает хорошие практики, Vue дает слишком много свободы и новичку проще накодить с душком"

На самом деле, на реакте/редакс можно писать так же плохо, как и на всем остальном :)
Если вы хотите из верстальщика перейти в JS - то я бы смотрел на Vue. Вам будет проще. А параллельно будет учить сам JS, SOLID, ООП, т.е. то, что нужно разработчику вообще, как таковому, а не только JS.

И тогда уже вам легко будет разобраться и в реакт/редакс и в любом другом фреймворке.
Желаю успехов.

П.С. Хорошие практики вам может привить Тим Лид, который будет ревьювить ваш код и подсказывать как лучше писать.

Comments

[bormor]

Спасибо за ответ.

Answer 4

[Jumandjilos]

По vue мало вакансий, поскольку он набирал популярность в 2017, и считается молодым, но я слышал, что он вроде как делался на основе react, так что да, наверное можно немного поработать с ним, а потом будет легче с vue, и он к тому времени станет более популярным

Comments

[Сергей delphinpro]

Артём Петренков, не безосновательное. Скорее всего автор неправильно выразил мысль.
Vue в самом деле впитал много хороших идей из реакта. И из других фреймворков. И вместе с тем имеет довольно низкий порог вхождения. Идеален для новичка.

[Сергей delphinpro]

Артём Петренков, мне показалось, что ваша реплика относится к фразе о похожести, а не о том, как ему учить.

Но в любом случае второй фреймворк (каким-бы он не был) освоить будет легче.
Я бы, конечно, рекомендовал бы начинать с Vue. Но автор хочет вакансий, а на реакт их действительно больше.