# Подробнее о react-create-app

## Поддержка браузеров

Все современные браузеры
Для IE требуется подключение полифиллов

Пример полифилла:

if (typeof Array.prototype.includesX !== 'function') {
  Array.prototype.includesX = function(x) {
    return this.indexOf(x) !== -1;
  } 
}

## Поддержка технологий

- Оператор возведения в степень (ES2016).

3 ** 2; // 9

- Async/await (ES2017).

async function run() {
  const response = await fetch('https://api.sample.com');
  const json = await response.json();

  return json;
}

вместо

function run() {
  return fetch('https://api.sample.com')
    .then(response => response.json());
}

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

const run = async () => {
    console.log('Hello');
    await delay(3000);
    console.log('World');
    await delay(6000);
    console.log('End!');
}
run();

- Object Rest/Spread Properties (ES2018).

const destructuring = () => {
    const person = {
        name: 'Ivan',
        age: 43,
        childrenCount: 3,
        parents: ['Olga', 'Igor']
    };

    const { name, age, ...restData } = person;

    console.log(restData);

    console.log('name: ' + name);
    console.log('age: ' + age);

    const newPerson = {
        name: 'Oleg',
        age: 15,
        ...restData
    };

    console.log(newPerson);
}

destructuring();

- Dynamic import() (stage 4 proposal)

const run = async () => {
    import('./delay.js')
        .then(() => console.log('loaded'));
}

run();

- Статические свойства классов (part of stage 3 proposal).

class App {
    static URL = 'http://localhost';
    static PORT = 3000;
}

App.URL

- JSX, Flow and TypeScript

## Структура папок

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

- node_modules - стандартная папка установки node пакетов
- public - папка для статических файлов и тех, что не требуют обработки
- src - исходные файлы проекта

## Как устроен, что внутри

- пакет react-scripts - Настроенные копмпоненты CRA
+ Webpack + Настроенные loader'ы
+ babel

## Работа со стилями

+ Препроцессоры - SASS требует только установленного пакета sass, остальное настроено
+ CSS-модули. Позволяют изолировать селекторы в рамках частей проекта.
+ @import-normalize в .css, .sass подключает библиотеку [normalize.css](https://necolas.github.io/normalize.css/)
+ Post CSS - включает постобработку CSS для внедрения доп возможностей или обратной совместимости

## Изображения, файлы, фото

Поддерживается стандартная работа import, как в Webpack

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

## Папка public

- Хранит результаты сборки
- Используется для постоянных имён
- Возможность хранить файлы без предварительной-обработки

## Работа с зависимостями

Разберём пример с [classnames](https://www.npmjs.com/package/classnames). Библиотека позволяет удобно работать с динамически меняющимися классами

# via npm
npm install --save classnames

# or Yarn (note that it will automatically save the package to your `dependencies` in `package.json`)
yarn add classnames

далее в коде:

// подключение

import C from 'classnames';
// в функции
<div className={C(modules.hello, 'container')}>

https://create-react-app.dev/docs/installing-a-dependency

## .env

Файл для удобного хранения переменных окружения на конкретном компьютере

Переменная задаётся с префиксом `REACT_APP_`, например:

REACT_APP_BOBIK=WTF

Для извлечения значения в js коде пишут:

<h1 className='title'>Pokemon List {process.env.REACT_APP_BOBIK}</h1>