Рубрика: React

JavaScript
библиотека
для создания пользовательских интерфейсов

основан на компонентном подходе
компоненты работают с состоянием state

все компоненты — это отдельно существующие сущность, которые можно брать, переносить в другое приложение, максимально независимые друг от друга

Рубрики
React основы Синтаксис

React — Переменная

  • Автор записи Автор: bo52
  • Дата записи 12.10.2024
  • source_local
    • переменная в функции
      • создание переменной с состоянием
      • изменение переменной с состоянием в функции
      • вызов функции в атрибуте тега html
    • вызов переменной в html
      • <div>{Переменная}</div>
    • вызов функции в атрибуте тега html
      • <button onClick={ИмяФункции}>…</button>
    • создание переменной с состоянием
      • const [Переменная,ИмяФункцииСостоянияПеременной]=useState(ЗначениеПеременной)
    • изменение переменной с состоянием в функции
      • создание переменной с состоянием
      • function ИмяФункции() {
        • Изменение Переменной
        • ИмяФункцииСостоянияПеременной(Переменная)
      • }
    • файл компоненты
      • Проект\src\components\ИмяКомпоненты.jsx
        • import React, {useState} from ‘react’
        • const ИмяКомпоненты = function () {
          • создание переменной с состоянием
        • return (<div>
          • вызов переменной в html
          • вызов функции в атрибуте тега html
        • </div>)
        • }
        • export default ИмяКомпоненты
    • использование компоненты
      • import React from ‘react’
      • import ИмяКомпоненты from файл компоненты
      • function App(){
      • return (<div className=’App’>
      • <ИмяКомпоненты/>
      • </div>)
      • }
      • export default App
  • использование компоненты

 

Рубрики
MobX React React основы

Иммутабельность данных

YouTube

  • концепция связана с тем, что если у нас есть какие то данные, например какой то объект или сложенная вложенная структура то в ней ключи или вложенные ключи или вообще данные не изменяются никогда
  • если мы хотим создать новую структуру мы должны создать новый объект и допустим в массиве подменить по ключику старый объект на новый
  • текущую структуру данных изменять никогда нельзя, и поэтому мы должны, не трогая структуру данных, создать хотя бы новый объект для начала
Рубрики
JavaScript React React Native React основы

Инструмент JSX

JSX
является синтаксическим сахаром

плагин от bable
можно использовать независимо от React
можно указать другое название функции которое парсит JSX будет использовать (не обязательно React.createElement)

Рубрики
React React-project

Вывод видео на экран

ReactPlayer

пакет для отображения видео

npm i react-player
  • проброс видео с youtobe
  • проброс статического видео
    хранение в public
Рубрики
React React-project

Вынос дублированных элементов в общий блок

смысл слоя

весь повторяющийся контент будем пробрасывать в любое место, где нам нужно его использовать. Тот контент, который будет внутри этого слоя будем передавать через {children}

src\layouts
создание директории