Что нового в 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