Насколько востребован рынок react и в целом js разработки на фрилансе, в частности на upwork?

По React:
1. Очень востребован.
2. Работа стоит дороже.
3. Рынок растет.
4. Работа в серьезном фронтенде гораздо интересней, колупания в шаблонах и плагинах CMS.

Как мне отправить форму авторизации, чтобы выходили данные?

hollanditkzn, вот эта ссылка может быть вам полезна
es6-features.org/#ObjectMatchingShorthandNotation

Как мне отправить форму авторизации, чтобы выходили данные?

hollanditkzn, вместо того чтобы писать:

class UserForm extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      ...
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e){
    ...
  }

  handleSubmit(e){
    ...
  }
}

Достаточно:

class UserForm extends React.Component{
  state = {
     ...
  };

  handleChange = e => {
     ...
  };

  handleSubmit = e => {
    ...
  };
}

inline arrow functions ссылаются на контекст экземпляра и самому биндить их не надо.

Второй вопрос не понял) Но запись вида:
const { login, password } = this.state;
аналогична:

const login = this.state.login;
const password = this.state.password;

Просто код так получается лаконичней. Особенно если много параметров из props и state используете.

Как мне отправить форму авторизации, чтобы выходили данные?

hollanditkzn, вы забыли определить onChange:

<TextField
  hintText="Введите пароль"
  type="password"
  name="password"
  value={this.state.password}
  onChange={this.handleChange}
/>

Так как вы используете state для value, value будет меняться только по изменению state

Еще хорошим тоном является определять константы в render. Для login и password вместо использования this.state.login и this.state.password определить:

render() {
  const { login, password } = this.state;

  return (
    ...
    <TextField
      hintText="Введите пароль"
      type="password"
      name="password"
      value={password}
      onChange={this.handleChange}
    />
    ...
  )
}

Как мне отправить форму авторизации, чтобы выходили данные?

davidnum95, ткаки не обязательно. https://jsfiddle.net/hdyz8xmt/
Потому что:
state = { ...prevState, ...newState };
или

state = { ...{ login: 'login', password: '' }, ...{ password: 'password' } };

// result => state = { login: 'login', password: 'password' }

Все-таки не попутал)

Как мне отправить форму авторизации, чтобы выходили данные?

davidnum95, this.state в setState по-хорошему передавать нельзя. В этом случае ничего страшного, но если setState будет вызываться в разных местах, то может случиться неожиданность, так как операция асинхронная. Лучше приучать себя всегда писать безопасный вариант с передачей аргументом функции prevState => ({ ... }). Но в данном случае разницы нет.

Как мне отправить форму авторизации, чтобы выходили данные?

davidnum95, вру, чето попутал. Это же ключи, а не объекты. И верно, и нет. Правильно так:

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

Спасибо!

Как мне отправить форму авторизации, чтобы выходили данные?

davidnum95, нет смысла в этом случае. Посмотрите исходный код setState. Лишняя операция.

Будут ли проблемы, если задать * {position: relative;}?

frontendo, это единственная выгода которую вы хотите получить? Я бы проверил производительность с страницы с этой опцией, возможно относительный рендер будет дольше. https://developers.google.com/web/fundamentals/per...
Думаю помимо этого вы еще можете столкнуться с неожиданным поведением элементов при сложном взаимодействии. Не зря position: static является опцией по-умолчанию.
Я бы не мелочился и ставил relative где надо, как и делает большинство разработчиков.

Если не трудно поставьте в своем проекте и сделайте замер скорости рендера страницы. Возможно, в современных браузерах нет никакой разницы.

Почему не работает чекбокс при клике по label через id в IE8?

Зачем вам IE8? https://www.w3schools.com/browsers/browsers_explor...

Как оптимизировать webpack чтобы весил мало собирался быстрее?

frammmm, сыплю голову пеплом. Верно. Беру все свои слова обратно. Я всегда в DefinePlugin NODE_ENV определял а не process.env.NODE_ENV, а продакшн через ключ -p собирал.

Как можно вставить html в виде строки в конкретное место функции с помощью Webpack?

Ничего не понятно, особенно UPD

Будут ли проблемы, если задать * {position: relative;}?

shadobut, ох, а я и не заметил, что всем. странное желание. ) Так точно делать не надо.

Будут ли проблемы, если задать * {position: relative;}?

shadobut, можно абсолютные элементы вкладывать только в relative элементы и позиционировать относительно них. Тогда проблем не будет.

Вроде все проверил а пишет такую ошибку? Это ошибка значит что не будет работать анимация?

там же net::ERR_FILE_NOT_FOUND

Нужен ли CCS-фреймворк если есть flexbox?

Многие тянут фреймворки только из-за сетки, хотя ее написать пара минут. Если вам не нужен фреймворк и у вас есть готовый дизайн кит, проходите мимо. В серьезные проекты css фреймворки вообще лучше не тянуть.

Как запустить react из отдельных файлов?

hollanditkzn, отступы ерунда. У вас опечатка в теге script, он у вас называется sctipt.

Как запустить react из отдельных файлов?

hollanditkzn, у вас подключен модуль koa-static? Думаю ошибка, все таки, в том, что шаблон неправильно собирается.

Как запустить react из отдельных файлов?

hollanditkzn, еще вас шаблон наизнанку компилируется. div content и скрипт за телом документа, а должны быть в body. Даже не знаю браузер эту ошибку обрабатывает или нет.

Как запустить react из отдельных файлов?

hollanditkzn, точно нет в network? Попробуйте открыть вкладку network и обновить страницу.
А в express у вас прописана публичная папка?
app.use(express.static(__dirname + '/public/'));