Подключение и настройка create-react-app

В этом видео и статье:

• установим react-create-app;
• сделаем универсальную структуру;
• напишем базовые компоненты хедера и футера;
• подключим scss;
• подключим шрифт.

Установка create-react-app

Create React App — это набор инструментов, созданный и поддерживаемый разработчиками из Facebook. CRA предназначен для быстрого создания проектов React приложений

Для работы с React вам будет нужна Node.js выше, чем 14.0.0 на вашем компьютере. Подробнее:

1. Установить node.js
2. Убедиться в том, что node установлена, для этого в терминале можно пробрать в теминале node -v

Для установки Create React App и создания шаблона выполните команды:

npx create-react-app cv-builder
cd cv-builder
npm start

Где cv-builder, это название проекта.

Исходный файл index.js будет выглядеть как-то так:

import React from "react";
import ReactDom from "react-dom";
import App from "./App";

ReactDom.render(
<React.StrictMode>
    <App />
</React.StrictMode>,
document.getElementById("app")
);

Зачем нужен React.StrictMode

StrictMode — нужен для обнаружения потенциальных проблем в приложении еще на этапе разработки приложения.

Зачем он нужен:

• Обнаружении небезопасных методов жизненного цикла
• Предупреждении об использовании устаревшего API строковых реф
• Предупреждении об использовании устаревшего метода findDOMNode
• Обнаружении неожиданных побочных эффектов
• Обнаружении устаревшего API контекста

Простыми словами - консоль будет красной даже при малейшей ошибке.

Установка uimini:

Для того чтобы установить uimini потребуется написать:

npm install uimini

// or:
yarn add uimini

Далее, в корневом файле index.js подключить uimini:

import React from "react";
import ReactDom from "react-dom";

// init main app
import App from "./App";

// init uimini
import "uimini";

// ...

Установка и подключение scss create-react-app:

Чтобы установить scss / sass в create-react-app необходимо лишь установить пакет node-sass:

npm install node-sass --save-dev

// или:
yarn add node-sass --save-dev

После чего перезапустить сервер!

После этого scss нужно подключать в любые js, jsx файлы по типу:

import "./assets/scss/main.scss";

Примеры компонентов на реакте:

Главный файл app.js с применением uimini будет выглядеть вот-так:

const App = () => (
  <div className="ui-wrapper">
    <Header />
    <div className="ui-content-wrapper">
      <section className="ui-section">
        <div className="ui-container">
          <h1 className="ui-title-1">Hello world!</h1>
        </div>
      </section>
    </div>
    <Footer />
  </div>
);

Такой подход позволит "прилепить" футер к низу, а хедер оставить вверху.

Остальные компоненты:

1. components/Header/Header.jsx
2. components/Footer/Footer.jsx

Являются простыми, поэтому описывать их здесь я пока не вижу смысла, а вот главный файл components/index.js будет выглядеть как-то так:

// components:
export {default as Header} from "./Header";
export {default as Footer} from "./Footer";

Подключение шрифта в create-react-app

Самый простой, но самый не эффективный способ это cdn от гугла.

Название шрифта, который решил использовать я - Inconsolata. Для подключение шрифта в файл public/index.html нужно добавить:

<link rel="preconnect" href="https://fonts.googleapis.com">  
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>  
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">

А в файл scss/main.scss добавить:

.ui-body,
.ui-html {
    font-family: "Inconsolata", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}

Более эффективный способ был бы скачать шрифт и подключить в проект локально, без cdn.

Исходники:

• Полный плейлист этого курса доступен на ютубе
• Код из текущего видео можно скачать кликнув тут
• Исходный код и весь проект вы можете скачать на гитахбе буду рад вашей звездочке ✨