2021-03-11 19:03:00 ​Что вы понимаете под ссылками (refs)?

Refs предоставляют доступ к узлам DOM или элементам React, созданным с помощью метода render(). Рефы являются ссылками на DOM-элементы или классовые компоненты из родительского компонента.

Refs также предоставляют возможность связывания элементов дочернего компонента с родительским в форме передачи (перенаправления) ссылок (ref forwarding).

Пример
class App extends React.Component {
constructor(props) {
super(props)
// создаем ссылку на DOM-элемент
this.textInput = React.createRef()
this.state = {
value: ''
}
}

// обновляем состояние с помощью ссылки
handleSubmit = e => {
e.preventDefault()
this.setState({ value: this.textInput.current.value})
}

render() {
return (

)
}
}

Случаи использования ссылок
1. Установка фокуса, выделение текста или воспроизведение медиа
2. Запуск императивной анимации
3. Интеграция со сторонними библиотеками для работы с DOM Открыть/Комментировать

2021-03-11 15:02:01 Посмотрите, как пишут код уровня Senior Frontend в Google или Uber

На собеседованиях и среди коллег обсуждают не работоспособность вашей программы, а то, как она написана.

Чтобы ваш код выглядел достойно и опрятно, опытные FrontEnd-разработчики создали канал @seniorFront.

— примеры лучших решений во Frontend-разработке

— тесты на проверку знаний, чтобы сравнить свой уровень с уровнем конкурентов

— статьи по JS, HTML, CSS за 2020

В каком проекте примените навыки, полученные после подписки на @seniorFront? Открыть/Комментировать

2021-03-11 12:04:00 Открыть/Комментировать

2021-03-10 20:06:18 Что такое useContext()?

React Context API позволяет легко получать данные на разных уровнях дерева компонентов без передачи данных через props.

import React from "react"
import ReactDOM from "react-dom"

// создаем контекст
const NumberContext = React.createContext()
// он возвращает объект с двумя значениями
// { Provider, Consumer }

function App() {
// используем провайдер для предоставления потомкам
// доступа к данным, содержащимся в контексте
return (

)
}

function Display() {
const value = useContext(NumberContext)
return
} Открыть/Комментировать

2021-03-10 12:07:00 Открыть/Комментировать

2021-03-09 19:07:00 Наибольшее и наименьшее

Вам дана строка, состоящая из цифр. Ваша задача - написать функцию, которая вернет наибольшее и наименьшее числа.

Примеры:
highAndLow("1 2 3 4 5");
// return "5 1"

highAndLow("1 2 -3 4 5");
// return "5 -3"

highAndLow("1 9 3 4 -5");
// return "9 -5" Открыть/Комментировать

2021-03-09 12:05:00 ​Что такое useReducer()?

useReducer() - это хук, принимающий функцию-редуктор и начальное состояние приложение в качестве аргументов и возвращающий текущее состояние и диспетчер (dispatcher) для отправки (dispatch) операций.

Несмотря на то, что useState() - это базовый хук, а useReducer() - продвинутый, на самом деле useState() реализован с помощью useReducer(). Это означает, что useReducer() - это примитив, который может использоваться во всех случаях использования useState(). Редуктор - мощный инструмент, который может использоваться в самых разных сценариях:

Пример
import React, { useReducer } from 'react'

const initialState = 0
const reducer = (state, action) => {
switch (action) {
case 'increment': return state + 1
case 'decrement': return state - 1
case 'reset': return 0
default: return state
}
}

const ReducerExample = () => {
const [count, dispatch] = useReducer(reducer, initialState)

return (

)
}

export default ReducerExample

Сначала мы определяем начальное состояние и редуктор. Затем передаем их в useReducer(). Хук возвращает текущее значение состояния и диспетчер, который используется для обновления состояния. Когда пользователь нажимает на кнопку, происходит отправка определенной операции в редуктор, который обновляет счетчик на основе операции. Мы может определять столько операций, сколько требуется нашему приложению. Открыть/Комментировать