Михаил Р.

Есть ли способ полностью локально хранить переменные в браузере без участия сервера?

Есть - LocalStorage

чтоб прям вот как надо)

const env = process.env;
const __DEV__ = env.NODE_ENV === "development";

const BASE_CSS_LOADER = {
  loader: "css-loader",
  options: {
    importLoaders: 2,
    sourceMap: true,
    minimize: true
  }
};
const CSS_MODULES_LOADER = {
  loader: "css-loader",
  options: {
    importLoaders: 2,
    localIdentName: "[name]__[local]___[hash:base64:5]",
    modules: true,
    sourceMap: true,
    minimize: true
  }
};
const POSTCSS_LOADER = {
  loader: "postcss-loader",
  options: {
    sourceMap: true,
    plugins: [autoprefixer],
    minimize: true
  }
};
const STYLE_LOADER = __DEV__ ? "style-loader" : MiniCssExtractPlugin.loader;
config.module.rules = [].concat(config.module.rules, [
  {
    test: /\.module\.scss$/,
    use: [
      STYLE_LOADER,
      CSS_MODULES_LOADER,
      POSTCSS_LOADER,
      "sass-loader?sourceMap"
    ]
  },
  {
    test: /\.module\.css$/,
    use: [STYLE_LOADER, CSS_MODULES_LOADER, POSTCSS_LOADER]
  },
  {
    test: /\.scss$/,
    exclude: /\.module\.scss$/,
    use: [
      STYLE_LOADER,
      BASE_CSS_LOADER,
      POSTCSS_LOADER,
      "sass-loader?sourceMap"
    ]
  },
  {
    test: /\.less$/,
    exclude: /\.module\.less$/,
    use: [
      STYLE_LOADER,
      BASE_CSS_LOADER,
      POSTCSS_LOADER,
      "less-loader?sourceMap"
    ]
  },
  {
    test: /\.css$/,
    exclude: /\.module\.css$/,
    use: [STYLE_LOADER, BASE_CSS_LOADER, POSTCSS_LOADER]
  }
]);

Если запрос делать из браузера, то в настройках браузера сначала надо ввести этот прокси-сервер, и все запросы, включая fetch() пойдут через него.

Если из Node.js, то, например, модуль TooTallNate/node-https-proxy-agent позволит в параметрах fetch() указывать прокси, через который выполнять подключение.

fetch('https://www.google.com',{ agent:new HttpsProxyAgent('http://127.0.0.1:8580')})
.then(function(res){
    //...
})

Эта штука нынче затмила по популярности particles.js. Постоянно все о ней спрашивают, в том числе и на тостере:
Можно ли использовать чужой js код?
Как правильно вытащить код? с этой страницы...

Чувак, все на много проще, смотри где они это взяли)
https://paveldogreat.github.io/WebGL-Fluid-Simulation/

render() {
  const { res } = this.state;
  const shouldFlimDisplayShown = !!res;

  return (
    <div>
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="title">Enter title</label>
        <input id="title" name="title" type="text" />
        <button>Send data!</button>
      </form>
      {shouldFlimDisplayShown && <FilmDisplay filmName={res}/>}
   </div>
  );
}

import React from 'react';

class FilmDisplay extends React.Component {
   constructor() {
    super();

    this.state = {
      filmData: null
    };
  }

  componentDidMount() {
    this.fetchMovie();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.filmData !== this.props.filmData) {
      this.fetchMovie();
    }
  }
 
  fetchMovie() {
    const { filmName } = this.props;
    const URL = "http://www.omdbapi.com/?t=" + filmName + "&apikey=6540f2ec&";

    fetch(URL).then(res => res.json()).then(json => {
      this.setState({ filmData: json });
    });
  }

  render() {
    const { filmData } = this.state;

    if (!filmData) return <div>Loading</div>;
  
    return <div>{JSON.stringify(filmData)}</div>;
  }
}

export default FilmDisplay;

Ума не приложу как вы вообще что-то разрабатываете не ознакомившись с документацией.
TextInput
Handling Text Input
В документации React тема контролируемых компонентов, так же полностью раскрыта.

Геннадий Уваров, чтобы это сделать, вам нужно добавить в head страницы теги:

<meta property="og:title" content="">
<meta property="og:site_name" content="">
<meta property="og:url" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">

Далее нужно каждому мета-тегу заполнить параметр content=""

За что отвечает каждый тег:
og:title - заглавие страницы, он же тайтл. Можете скопировать из тега title.
og:site_name - название сайта.
og:url - ссылка страницы, где вы добавляете этот код. Если это однастраничник, то это просто ссылка на главную сайта. Если сайт на CMS или самописный и у него много страниц, то вам придется для каждой указать свой тег, со своей ссылкой.
og:description - описание страницы. Можете скопировать из тега description для страницы, на которую добавляете теги.
og:image - ссылка на картинку, что характеризует страницу. Можете указать ссылку на лого сайта, или нарисовать конкретную картинку для этих целей.

Ой, ну это холиварная тема. На первый взгляд, webstorm из коробки может больше, чем VS Code. Но VS Code отлично допиливается расширениями, причем очень круто. Расширения пишутся тоже довольно легко, как к браузеру. Да и на мой взгляд, VS Code работает шустрее, чем webstorm, и жрет меньше памяти (я помню про electron) чем webstorm.

У вас путь от корня хранилища до значения теперь не state.count, а state.count.count.
Рекомендую установить расширение Redux Dev Tools и добавить в проект.

bindActionCreators получает на вход объект с AC, либо функцию и возвращает объект с AC, обернутыми в вызов dispatch или в случае с функцией функцию обернутую в dispatch.

Если вы передаете в connect вторым аргументом объект:

const mapDispatchToProps = {
  getProducts,
};

То ваш объект в процессе вызова connect будет передан в вызов bindActionCreators и каждый AC будет обернут в вызов dispatch.
Этот вариант записи, в вашем случае, является предпочтительным, так как он короче.

Ручное оборачивание AC в dispatch:

const mapDispatchToProps = (dispatch, ownProps) => ({
  getProducts: () => dispatch(getProducts()),
});

Тут можно использовать второй аргумент ownProps, ограничить количество принимаемых AC аргументов или поменять их порядок, а так же передать дополнительные функции, которые не надо оборачивать в dispatch.

Вызов bindActionCreators на объекте с AC:

cosnt mapDispatchToProps = dispatch => bindActionCreators(
  {
    getProducts,
  },
  dispatch,
);

В использовании такого варианта записи нет особого смысла, так как первый вариант записи короче.
Но можно ее видоизменить:

const mapDispatchToProps = (dispatch, ownProps) => ({
  ...bindActionCreators(
    {
      ...productsActions,
      ...usersActions,
      ...ordersActions,
    },
    dispatch,
  ),
  () => getSomeOther(ownProps.someProp),
  notNeedsToWrapInDispatch,
})

В таком виде можно передать в bindActionCreators много AC как есть и отдельно передать дополнительные AC обернутые в dispatch, которые будут использовать ownProps или функции которые не надо оборачивать в dispatch.

Вместо

values.forEach(value => {
    if(element.value === value) element.selected = true;
  });

Можно использовать

if(values.includes(element.value)) element.selected = true;

https://developer.mozilla.org/ru/docs/Web/JavaScri...

forEach работает с массивом, а у вас коллекция узлов (NodeList ). И советую использовать не getElementsByClassName, а querySelector/querySelectorAll. Всё-таки кроссбраузерней, да и удобней, когда селектор сложный.

var dependent = document.querySelectorAll('.dep');
[].forEach.call(dependent, function(item, i, arr) {
    alert(i + ": " + item + " (массив:" + arr + ")");
});

Вариант второй - преобразуем NodeList в массив и работаем с ним уже соответственно:

var dependent = [].slice.call(document.querySelectorAll('.dep'));
dependent.forEach(function(item, i, arr) {
    alert(i + ": " + item + " (массив:" + arr + ")");
});

правильно ли я все понял?

нет

"Получить стандартное событие" - откуда вы это взяли? Испытываете проблемы с пониманием английского текста - можете попробовать русский вариант.

<h1 className={`class_${url}`}>Hello, world!</h1>

<h1 className={'class_' + url}>Hello, world!</h1>

если вы планируете работать с базой напрямую, то пдо.
если планируете использовать более высокоуровневые абстракции/орм, то этим вопросом задаваться не стоит (они уже сами все реализовывают).

Вопрос хороший, но неправильно сформулирован.
Поскольку тут на самом деле два вопроса - какой драйвер использовать и уже потом - как правильно соединяться.
Ответ на первый вопрос очевиден. Если выбирать из mysql_connect, mysqli и PDO, то достаточно зайти на страницу мануала, посвященную каждому варианту, и посмотреть, что там написано. Ну или попробовать использовать в своем коде и посмотреть что получится.

А вот вопрос, как правильно подключаться в двух оставшихся вариантах, действительно важный, и ответ на него, как обычно, почти никто не знает, поскольку все друг у друга списывают статьи не 2-х, а 22-х летней давности. К счастью, есть сайты с актуальной информацией.

Теоретически, можно использовать mysqli. Но не нужно. Потому что это низкоуровневый драйвер и пользоваться им без подготовки очень неудобно. Но если вот прям так приспичило, то вот как правильно соединяться используя mysqli

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

Но правильным ответом, если выбирать из перечисленных трех, будет PDO. Здесь тоже не так просто, поэтому смотрим как правильно соединяться используя PDO - учитывая те же ключевые моменты, которые указаны выше.

Хорошим вариантом будет использовать высокоуровневую абстракцию типа redbean. Но поскольку нормальной документации по нему нет, а есть только пара хайповых видео, где он используется, причем без каких бы то ни было объяснений и разбора основ, то я бы рекомендовал редбин уже опытному разработчику, а не начинающему. Но в любом случае как в нем соединяться, написано в документации

Пароль в базе данных не шифруется а хэшируется. Делается это с посощью функции password_hash