На sponsr есть решения ваших задач

Полезные видео о фронтенде. Подпишись на Rutube

Как использовать фрагменты React

год назад·1 мин. на чтение

В этой статье рассмотрим использование фрагментов в приложениях React.

Что такое React Fragment?

React Fragment - это компонент React, который помогает нам возвращать несколько дочерних элементов без использования дополнительных DOM узлов. Если мы хотим вернуть группу элементов, то нужно обернуть их в общий тег. React компонент должен возвращать только один элемент, иначе будет ошибка. Следующий пример не будет работать, т.к. компонент возвращает несколько элементов - h1 и p.

import React from 'react';

function Welcome(props){
    return (
        <h1>Welcome to reactgo.com</h1>
        <p>Some dummy content</p>
    )
}

Фрагменты React представлены в версии 16. Давайте посмотрим на несколько примеров.

Без фрагментов React

import React from 'react';

function Welcome(props){
    return (
       <div>
        <h1>Welcome to reactgo.com</h1>
        <p>Some dummy content</p>
       </div>
    )
}

Теперь мы заменяем код компонента приветствия с помощью фрагментов.

С помощью React Fragments

import React,{Fragment} from 'react';

function Welcome(props){
    return (
       <Fragment>
         <h1>Welcome to reactgo.com</h1>
         <p>Some dummy content</p>
       </Fragment>
    )
}

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

Короткий синтаксис фрагментов

Существует также краткий синтаксис для фрагментов.

import React from 'react';

function Welcome(props){

    return (
       <>
         <h1>Welcome to reactgo.com</h1>
         <p>Some dummy content</p>
       </>
    )
}

Этот синтаксис использует пустые теги для объявления фрагментов react.

Еще несколько примеров

Использование фрагментов при возврате группы дочерних компонентов.

function Button(){
    return <button>Click</button>
}

function Name(){
    return <h1>Hi react</h1>
}

function Post(){
    return (
        <div>
          <h1>Heading...</h1>
          <p>post content</p>
        </div>
    )
}

function App(){
    return (
        <>
         <Post/>
         <Name/>
         <Button/>
        </>
    )
}

Frontend React

Как подключить шрифт в React

год назад·3 мин. на чтение

Рассмотрим три быстрых способах подключения шрифтов в React приложение.

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

Способ 1. С использованием `link`

Мы можем ссылаться на любые шрифты из Интернета, с помощью тега <link> внутри HTML-файла. Рассмотрим пример применения Google Fonts шрифта с помощью тега <link>.

Переходим в fonts.google.com
Кликаем на шрифт

Кликаем на “Select Regular 400” (или на любые другие выбранные виды, можно несколько)

Нажимаем на иконку “View selected families” сверху справа.

В появившемся боковом меню переходим в секцию “Use on the web” и копируем код, расположенный под <link>

Переходим в index.html. Если ваше приложение создано с помощью create-react-app, то index.html находится в папке public. Вставляем код, скопированный в п.5 внутрь <head>.

<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=Roboto&display=swap" rel="stylesheet">

На сайте Google Fonts в том же боковом меню находим секцию “CSS rules to specify families” и копируем код.

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

.font-roboto {
  font-family: 'Roboto', sans-serif; /* скопированный код */
}

Применяем этот стиль в любом React компоненте

// App.jsx

import './App.css';

function App() {
  return (
    <div className="font-roboto">
      <p>Hello</p>
    </div>
  );
}

export default App;

Способ 2. С использованием Web Font Loader

Web Font Loader помогает загружать шрифты из Google Fonts, Typekit, Fonts.com и Fontdeck, а также самостоятельно размещенные веб-шрифты. Он разработан совместно компаниями Google и Typekit. Давайте посмотрим, как загрузить несколько шрифтов из Google Fonts и использовать их в компоненте React.

Установим webfontloader

yarn add webfontloader

или

npm i webfontloader

Импортируем webloader в компонент

import WebFont from 'webfontloader';

Загружаем нужные шрифты, используя имя шрифта. Лучше использовать хук useEffect и позволить ему выполняться один раз при загрузке компонента. Поскольку шрифты должны быть загружены только один раз в приложении, вы можете загрузить их в файле index.js.

useEffect(() => {
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Chilanka']
    }
  });
 }, []);

Здесь мы загружаем шрифты 'Droid Sans' и 'Chilanka'.

Теперь вы можете использовать эти шрифты в компоненте React с помощью атрибута className или style. Чтобы использовать атрибут className, создайте CSS-класс в файле .css.

.font-loader {
  font-family: 'Chilanka';
}

Затем, в методе render() компонента добавьте следующее.

<div className="font-loader">
    Hello, World!
</div>

Или, с атрибутом style

<div style={{fontFamily: 'Droid Sans'}}>
   Hello, World!
</div>

Способ 3. С использованием `@font-face`

Иногда шрифты должны быть загружены локально и упакованы в приложение. @font-face - это правило CSS для определения имени шрифта путем указания на него с помощью URL.

Создадим папку fonts в каталоге src.
Загрузим необходимые шрифты. В этом примере мы загрузим шрифт Lobster. Для этого выберем шрифт в Google Fonts, нажмем “Download family” и распакуем архив.

Скопируем содержимое в папку src\fonts.

Затем импортируем шрифты в файл index.js.

import './fonts/Lobster/Lobster-Regular.ttf';

В файл index.css добавим

@font-face {
font-family: "LobsterRegular";
src: local("LobsterRegular"),
 url("./fonts/Lobster/Lobster-Regular.ttf") format("truetype");
font-weight: normal;
}

Теперь добавим имя класса в файл App.css, который использует этот шрифт.

.font-lobster {
 font-family: "LobsterRegular";
}

Применяем этот стиль в любом React компоненте

// App.jsx

import './App.css';

function App() {
  return (
    <div className="font-lobster">
      <p>Hello</p>
    </div>
  );
}

export default App;