Что нового в Create React App 3.3. - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Что нового в Create React App 3.3., kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel create-react-app, Artikel React.js, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Что нового в Create React App 3.3.
link : Что нового в Create React App 3.3.

Baca juga


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

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



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

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

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

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

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

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

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


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

По умолчанию поставляется с двумя шаблонами: Нам не нужно указывать опцию --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


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

Sekianlah artikel Что нового в Create React App 3.3. kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Что нового в Create React App 3.3. dengan alamat link https://dev-create.blogspot.com/2020/07/create-react-app-33.html