Как обновить npm на windows.

Сегодня мы разберем очень простую, на первый взгляд, но часто вызывающую вопросы, задачу - как правильно обновить npm (пакетный менеджер) на windows.

Очень часто проблема возникает, казалось бы ниоткуда, например: перестает правильно устанавливаться приложение create-react-app после его обновления или не устанавливаются какие-либо пакеты.

Если вы сталкивались с проблемой установки и запуска приложения React после обновления, используя npx, то сегодня мы найдем самое простое решение.

Первое, что нам нужно сделать это:

Запустить Windows PowerShell от имени администратора.

Я буду показывать на своем windows 8.1 (64 bit), но это мало будет отличаться от других версий (7 и 10). Чтобы открыть эту оболочку - Windows PowerShell, нам нужно нажать правой кнопкой мышки на окошко виндовс - ⊞ ( слева внизу - первое в трее) и выбрать, в появившемся списке - "Запустить Windows PowerShell от имени администратора". Обратите внимание, что именно Windows PowerShell, а не КС- командную строку(!!!)

Если этой команды нет в списке, как у меня, то просто нажимаем кнопку "Windows" - ⊞ Win (между левым Ctrl и Alt) и ищем в разделе "Приложения" => "Служебные - Windows" => Windows PowerShell

Как только вы нашли Windows PowerShell, то нужно нажать на нее правой кнопкой мышки и в выпадающем списке выбрать - "Запустить от имени администратора"

После этого сразу откроется окно Windows PowerShell и первое, что нам нужно сделать, это позволить исполнятся нужному сценарию. Для этого нужно ввести:

Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force

Более подробно о этом вы можете прочитать в статье Роберта Шелдона - Защита сценариев PowerShell

Теперь нам нужно исполнить само обновление - поочередно ввести вот эти две команды:

npm install --global --production npm-windows-upgrade
npm-windows-upgrade

Если вы просто хотите обновить npm до последней версии, то команда такая:

npm-windows-upgrade --npm-version latest

После этого ваш пакетный менеджер обновится и это избавит вас от многих неприятностей при установке пакетов и работе с приложениями.

Если для запуска новой версии create-react-app, вам не помогло обновление пакетного менеджера, то я настоятельно рекомендую вам прочитать мою статью о том, как исправить эти проблемы:Что нового в приложении Create React App 3

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook. Пишите мне - kolesnikovy70 почта gmail.com

Удачного кодирования!                                                                                                                                                              

Телеграм канал - Full Stack JavaScript Developer

---

Помочь проекту (любая валюта). DONATE

Мои настройки VSCode.

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

Посмотрите настройки для отдельного проекта в моем блоге - Кастомизация темы VSCode.

Расширения:

1. Code Runner
2. ESLint
3. Prettier - Code formatter
4. Bracket Pair Colorizer
5. ES7 React/Redux/GraphQL/React-Native snippets
6. vscode-styled-components
7. Russian Language Pack for Visual Studio Code
8. Live Server
9. Sass
10. Sass Formatter
11. Highlight Matching Tag
12. Reactjs code snippets
13. Markdown PDF

Как правило, о назначении того или иного расширения, можно догадаться из его названия. Если, нет, то пройдите по ссылке и посмотрите в описании.

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

Настройки settings.json

Некоторые настройки вы можете увидеть в файле settings.json.Чтобы открыть его в windows, достаточно посмотреть в папке пользователя ( у меня это C:/Users/YaroslavW) в папку AppData.

Эта папка, обычно, является скрытой, поэтому вам необходимо вначале произвести несколько простых настроек - Отображение скрытых файлов.

Еще один простой способ найти этот файл это в открытом редакторе VS Code пройти по пути :

File -> Preferences -> Settings -> Extensions -> Scroll down and find "Edit in settings.json"

откроется часть кода из этого файла, но зато вы сможете легко узнать к нему путь

После этого пройти по пути - AppData/Roaming/Code/User/settings.json и открыть его в VS Code:

settings.json

{
  "editor.fontSize": 18,
  "window.zoomLevel": 1,
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 1px",
          "borderStyle": "dotted",
          "borderColor": "white",
          "borderRadius": "5px",
          "overviewRulerColor": "white"
        }
      },
      "right": {
        "custom": {
          "borderWidth": "0 1px 0 0",
          "borderStyle": "dotted",
          "borderColor": "white",
          "borderRadius": "5px",
          "overviewRulerColor": "white"
        }
      }
    }
  },
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "razor": "html",
    "plaintext": "jade"
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "Javascript": "html"
  },
  "terminal.integrated.fontSize": 16,
  "editor.formatOnPaste": true,
  "editor.tabSize": 2,
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.formatOnSave": true,
  "emmet.triggerExpansionOnTab": true,
  "files.autoSave": "afterDelay",
  "editor.minimap.enabled": false,
  "workbench.colorTheme": "Solarized Dark",
  "typescript.tsserver.watchOptions": {
    
  
  }
}

Вы можете изменить настройки на те, которые вам нравятся, благо, что в интернете масса примеров. Там же вы можете найти настройки этого файла по умолчанию.

Не забывайте, что для каждого проекта можно задать собственные настройки в таком же файле setting.json, только поместив его в корне проекта в папку имя которой начинается с точки:.vscode.

Но это уже другая история...

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook. Пишите мне - kolesnikovy70 почта gmail.com

Удачного кодирования!                                                                                                                                                              

Телеграм канал - Full Stack JavaScript Developer

---

Помочь проекту (любая валюта). DONATE

Следует ли использовать React Context поверх Redux в приложении React?

Перед тем как знакомиться с новым материалом, я рекомендую вам посмотреть основы в моем блоге и на гитхабе в моих переводах:

• JS & ES
• Статьи на gitHub

Обязательно прочитайте:

• Redux - простое руководство.
• Как использовать Redux в ReactJS с реальными примерами.
• React . Детальный обзор Context API
• React. Как использовать «useContext» в React Hooks
• Передача данных между родственными компонентами в React с использованием Context API и React Hooks.
• React хуки и функциональные компоненты.
• Шаблоны React.

Redux - это библиотека, которая помогает управлять состоянием вашего приложения.

Redux следует использовать в средних и больших одностраничных приложениях со сложным потоком данных.

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

С другой стороны, в версии 16.3 React команда представила Context, который также помогает управлять состоянием React - приложения.

Зачем нам нужен инструмент управления состоянием - state

Если у нас есть несколько компонентов, которые совместно используют один и тот же фрагмент данных, и у них нет родительских и дочерних отношений, то для решения проблемы используют Redux. В Redux у нас есть один фрагмент идентичных данных (identical data), который синхронизирован со всеми компонентами, которые используют этот фрагмент данных.

Одним из решений может быть использование event raising в Angular и использование props в React. Позже в большом коде это решение превратится в спагетти событий ( event spaghetti) и в React - приложении, мы будем сталкиваться с проблемой получения (доступности) props - так называемым - prop drilling.

Со всей базы кода мы начнем получать события, и будет сложно отслеживать их все. Таким образом, поток данных становится непредсказуемым. Facebook столкнулся с этой проблемой еще в 2014 году, поэтому они представили Flux Architecture.

Redux - это упрощенная и легкая реализация Flux Architecture.

Основные преимущества Redux

• Отделенная, расцепленная архитектура
• Тестируемость
• Отличная поддержка инструментов в Chrome, Firefox
• Простая реализация функций отмены / повтора - выкл./вкл.

Когда использовать Redux

В следующих случаях мы можем использовать redux:

• Один и тот же фрагмент данных в нескольких местах
• Несколько (views) - представлений, которые должны работать с теми же данными в синхронизации
• Данные могут быть изменены несколькими действиями / несколькими пользователями

Прежде чем мы получим context, для решения проблемы использовали redux, такой как спагетти - event spaghetti и prop drilling. Redux приносит много сложности для простых приложений. Позже React - команда представила контекстную концепцию для простоты.

С помощью контекста - context мы можем передавать данные по нашему дереву компонентов без prop drilling. Таким образом, в одном компоненте мы предоставим некоторый контекст или общие данные, а в другом компоненте мы будем использовать данные.

Теперь мы увидим, как мы можем использовать контекст поддерживаемым и инкапсулированным образом с помощью typescript и React - хуков. В нашем примере мы будем использовать понятия действий - actions, редуктора - reducer и состояния - state из redux. Итак, сначала мы рассмотрим основные концепции Redux.

Основная концепция Redux

• Хранилище - Store - один объект JS, который содержит состояние приложения.
• Действия - Actions - Обычный объект JS, представляющий, что что-то произошло. Подобные события.

{type: ‘USER_LOGGED_IN’}


• Редуктор Reducer- функция, которая определяет, как состояние state изменяется в ответ на действие - action. Это не меняет состояние. Возвращает новое состояние.

В Redux мы не обновляем напрямую состояние. Сначала мы отправим действие (action). Оно попадет в хранилище (store). Хранилище (store) передает действие (action) корневому редуктор (reducer). На основе действия редуктор (reducer) возвращает новое состояние (state), и хранилище (store) обновляется внутри.

На картинке показано изменение состояния компонента при клике

Использование контекста в приложении React

Для демонстрации идея состоит в том, чтобы создать компонент ,mark>Header, который будет отвечать за отображение кнопки «Вход» или «Выход из системы» в зависимости от состояния из хранилища - store. Мы отправим действие action LOGIN и LOGOUT из компонента Header.

Мы сделаем все 5 простых шагов.

1. Create Actions - Создать действия
2. Create State - Создадим состояние
3. Create Reducer - Создадим редуктор
4. Create Context - Создадим контекст
5. Create Header component - Создадим сам компонент Header

1 - Создание действий - Actions

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

Action.ts

export enum Action {
  LOGIN = "LOGIN",
  LOGOUT = "LOGOUT"
}

Создание состояния - State

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

state.ts

export interface StateType {
  username: string | null;
}
export const initialState: StateType = {
  username: null
};

Создание редуктора - Reducer

Pure Function или Чистая функция - это такая функция, которая при получении однинх и тех же данных на входе, всегда получаем один и тот же выход из функции, то функция является чистой функцией. Так что побочных эффектов не будет. Это дает нам легкую тестируемость и простой способ реализации функций отмены / возврата.

Если вы забыли некоторые возможности JavaScript, то я рекомендую вам посмотреть статьи в моем блоге - ES6 и JS

Далее мы создадим редуктор. Редуктор это чистая функция. Это функция с двумя аргументами. Первый - это состояние по умолчанию с типом StateType, а второй - объект с props- свойствами type и полезной нагрузки - payload. Свойство type определяет тип действия, а payload содержит дополнительные данные от диспетчера.

Reducer.ts

import { StateType, initialState } from "./state";
import { Action } from "./Action";
export type ActionType = {
  type: Action;
  payload?: StateType;
};
const reducer = (state: StateType, { type, payload }: ActionType) => {
switch (type) {
    case Action.LOGIN:
      return { ...state, ...payload };
  
    case Action.LOGOUT:
      return initialState;
default:
      return state;
  }
};
export default reducer;

Для action -действия LOGIN мы передадим имя пользователя в качестве полезной нагрузки - payload, когда мы отправим действие - action. Для выхода из системы нам не нужны никакие данные в качестве полезной нагрузки -payload. Мы просто сбросим состояние до начального значения state.

4 - Создадим контекст -Context

Теперь мы создадим контекст. Сначала мы определим ContextType, а затем создадим Store. После этого мы создадим StoreProvider.

Context.tsx

import React, { createContext, Dispatch, useReducer } from "react";
import reducer, { ActionType } from "./Reducer";
import { StateType, initialState } from "./state";
export interface ContextType {
  state: StateType;
  dispatch: Dispatch<ActionType>;
}
export const RootStore = createContext({} as ContextType);
export const RootStoreProvider: React.FC = ({ children }) => {
const [state, dispatch] = useReducer<React.Reducer<StateType, ActionType>>(reducer, initialState);
const value = { state, dispatch };
return <RootStore.Provider value={value}>{children}</RootStore.Provider>;
};

Теперь мы обернем наш корневой компонент этим RootStoreProvider для доступа к хранилищу - store глобально.

index.tsx

const App = () => {
  return <RootStoreProvider>....</RootStoreProvider>;
};

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

5 - Создадим сам компонент Header

Header/index.tsx

import React from "react";
const Header = () => {
  const username = null;
  const toggleLoginLogoutHandler = () => {};
  return (
    <div
      style={{
        backgroundColor: "#dee5ec",
        padding: 10,
        display: "flex",
        justifyContent: "space-between",
      }}
    >
      <div>
        <p>Header</p>
        {username && <p>Logged in as {username}</p>}
      </div>
      <button onClick={toggleLoginLogoutHandler}>
        {username ? "Logout" : "Login"}
      </button>
    </div>
  );
};
export default Header;

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

import React, { useContext } from "react";
import { RootStore } from "../../Context";
import { Action } from "../../Action";
const Header = () => {
  const {
    state: { username },
    dispatch
  } = useContext(RootStore);
const toggleLoginLogoutHandler = () => {
    if (username) {
      dispatch({ type: Action.LOGOUT });
    } else {
      dispatch({ type: Action.LOGIN, payload: { username: "Ashraful" } });
    }
  };
.......

Наконец, обновите корневой компонент.

.......
import Header from "./src/components/Header";
const App = () => {
  return (
    <RootStoreProvider>
      <Header />
    </RootStoreProvider>
  );
};

Вот и все. Мы внедрили React context со всеми концепциями Redux - компонентов. Вот ссылка на полный код.

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook. Пишите мне - kolesnikovy70 почта gmail.com

Удачного кодирования!                                                                                                                                                              

Телеграм канал - Full Stack JavaScript Developer

---

Помочь проекту (любая валюта). DONATE

Что нового в Create React App 3.3.

Create React App - это программа, которая позволяет нам легко создавать новый проект React и строить его из артефактов, которые мы можем развернуть у себя на компьютере, запустив ее из командной строки.

Он создан командой React и создает основу для приложения.

В этой статье мы рассмотрим новые интересные функции, доступные в Create React App 3.3, включая некоторые функции ES2020.

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

• Что нового в приложении Create React App 3
• React.js Настройка окружения. - здесь подробно про create-react-app
• и React + Webpack 4 + Babel 7 Руководство по установке. - здесь о самостоятельной настройке вашего реакт-проекта (Webpack, Babel, etc.)

Пользовательские шаблоны

Мы можем использовать пользовательские шаблоны для создания нашего проекта React с помощью Create React App 3.3.

Например, если мы хотим создать приложение TypeScript React, мы можем запустить:

npx create-react-app foo-app --template typescript

Где foo-app - это название проекта нашего приложения.

По умолчанию поставляется с двумя шаблонами:

• cra-template
• cra-template-typescript

Нам не нужно указывать опцию --template, чтобы использовать первый шаблон, поскольку он используется по умолчанию. Чтобы найти дополнительные шаблоны, мы можем перейти на веб-сайт NPM и выполнить поиск шаблонов, введя в нашем браузере следующее:

https://www.npmjs.com/search?q=cra-template-*

Затем мы можем удалить префикс cra-template-prefix при установке опции template.

Мы также можем создать новый шаблон, создав файлы со следующей структурой:

my-app/
  README.md (for npm)
  template.json
  package.json
  template/
    README.md (for projects created from this template)
    gitignore
    public/
      index.html
    src/
      index.js (or index.tsx)

Опциональные операторы связывания и объединения

Эта функция скоро будет выпущена в ES2020. Мы можем использовать её сейчас для написания наших приложений React с помощью Create React App 3.3 или более поздней версии.

Необязательный оператор связывания (chaining operator) обозначен ?., И мы можем использовать его для ссылки на вложенные свойства, которые могут быть нулевыми - null или неопределенными - undefined.

Это экономит нам множество проверок на null и undefined, если мы пытаемся получить доступ к глубоко вложенным объектам. Например, мы можем использовать его следующим образом:

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { msg: {} };
  }
  onClick() {
    if (this.state.msg?.bar?.baz) {
      this.setState({ msg: {} });
    } else {
      this.setState({ msg: { bar: { baz: "foo" } } });
    }
  }
  render() {
    return (
      <>
        <button onClick={this.onClick.bind(this)}>Click Me</button>
        <p>{this.state.msg?.bar?.baz}</p>
      </>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

В приведенном выше коде мы использовали необязательный оператор связывания (chaining operator) в следующем коде:

<p>{this.state.msg?.bar?.baz}</p>;

Так как this.state.msg может не иметь свойства bar.

Затем, когда мы нажимаем кнопку Click Me, мы видим, что слово «foo» включается и выключается.

Нулевой оператор слияния (nullish coalescing operator) предназначен для установки значения по умолчанию для выражения. Он обозначается - ?? - условное обозначение. Например, мы можем добавить значение по умолчанию в нашем примере выше, написав:

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { msg: {} };
  }
  onClick() {
    if (this.state.msg?.bar?.baz) {
      this.setState({ msg: {} });
    } else {
      this.setState({ msg: { bar: { baz: "foo" } } });
    }
  }
  render() {
    return (
      <>
        <button onClick={this.onClick.bind(this)}>Click Me</button>
        <p>{this.state.msg?.bar?.baz ?? "bar"}</p>
      </>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

В приведенном выше коде мы имеем:

<p>{this.state.msg?.bar?.baz ?? "bar"}</p>;

Что позволяет нам отображать 'bar', если this.state.msg? .Bar? .Baz имеет значение null или undefined.

Оператор ?? отличается от || тем, что возвращает значение по умолчанию, только если выражение перед ним является нулевым - null или неопределенным - undefined, а не все ложные (false) значения, такие как это делает оператор - ||.

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

Числовые разделители

Числовые разделители (Numeric separators) также являются новой функцией, которая будет выпущена в ES2020, хотя некоторые браузеры, такие как Chrome, уже поддерживают его в своих последних версиях.

Мы можем использовать числовые разделители для разделения цифр на части, чтобы люди могли легко их прочитать.

Например, мы можем использовать его следующим образом:

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
  render() {
    return (
      <>
        <p>{1_000_000_000}</p>
        <p>{1000_000_000.333_333}</p>
      </>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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

Это также работает с десятичными числами.

Нет много строчным неожиданностям! Подробнее о том, как не допускать сбивающих с толку многострочных выражений вы можете прочитать disallow confusing multiline expressions (no-unexpected-multiline).Я уверен, что многие с ним уже сталкивались не понаслышке!

Правило ESLint «без неожиданностей с несколькими строками» не отключено, поскольку установлено, что оно несовместимо с Prettier.

Тем не менее, мы можем добавить следующее в наш .eslintrc, чтобы снова включить его:

{  
  "extends": "react-app",  
  "rules": {  
    "no-unexpected-multiline": "warn"  
  }  
}

Это стоит делать только тогда, когда вы точно уверены, что подобных ошибок не допустите!

Обновление до 3.3

Чтобы перейти на Create React App 3.3 и воспользоваться всеми этими новыми функциями, выполните:

npm install --save --save-exact react-scripts@3.3.0

С NPM в нашем существующем проекте React или, если мы используем Yarn, запустите:

yarn add --exact react-scripts@3.3.0

Вывод

Create React App 3.3 является второстепенным выпуском, но он поставляется с полезными новыми функциями, которые облегчают разработку приложений React.

Функции ES2020, такие как дополнительные операторы связывания и нулевого объединения (optional chaining and nullish coalescing operators), а также числовые разделители (numeric separators), теперь доступны до выпуска официального стандарта ES2020.

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook. Пишите мне - kolesnikovy70 почта gmail.com

Удачного кодирования!                                                                                                                                                              

Телеграм канал - Full Stack JavaScript Developer

---

Помочь проекту (любая валюта). DONATE