Frontend Interview - собеседования по Javascript / Html / Css

Посмотрите, как пишут код уровня Senior Frontend в Google или Uber На собеседованиях и среди коллег обсуждают не работоспособность вашей программы, а то, как она написана. Чтобы ваш код выглядел достойно и опрятно, опытные FrontEnd-разработчики создали канал @seniorFront. — примеры лучших решений во Frontend-разработке — тесты на проверку знаний, чтобы сравнить свой уровень с уровнем конкурентов — статьи по JS, HTML, CSS за 2020 В каком проекте примените навыки, полученные после подписки на @seniorFront?

Что такое useContext()? React Context API позволяет легко получать данные на разных уровнях дерева компонентов без передачи данных через props. import React from "react" import ReactDOM from "react-dom" // создаем контекст const NumberContext = React.createContext() // он возвращает объект с двумя значениями // { Provider, Consumer } function App() { // используем провайдер для предоставления потомкам // доступа к данным, содержащимся в контексте return ( <NumberContext.Provider value={10}> <div> <Display /> </div> </NumberContext.Provider> ) } function Display() { const value = useContext(NumberContext) return <div>Ответ: {value}.</div> }

Наибольшее и наименьшее Вам дана строка, состоящая из цифр. Ваша задача - написать функцию, которая вернет наибольшее и наименьшее числа. Примеры: 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"

​Что такое 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 (
     <div>
       {count}
       <button onClick={() => dispatch('increment')}>+1</button>
       <button onClick={() => dispatch('decrement')}>-1</button>
       <button onClick={() => dispatch('reset')}>reset</button>
     </div>
   )
 }

 export default ReducerExample

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

​Что такое useState()? useState() - это хук, позволяющий функциональным компонентам иметь состояние. Раньше это было возможно только в классовых компонентах. import React, { useState } from 'react' const App = () => { const [count, setCount] = React.useState(0) const handleIncrease = () => { setCount(count + 1) } const handleDecrease = () => { setCount(count - 1) } return ( <div> Значение счетчика: {count} <hr /> <div> <button type="button" onClick={handleIncrease}> Увеличить </button> <button type="button" onClick={handleDecrease}> Уменьшить </button> </div> </div> ) } useState() принимает единственный аргумент - значение начального состояния. В примере таким значением является 0. Хук возвращает массив из двух элементов: count и setCount. Вы можете думать об этих элементах как о паре геттер/сеттер. Геттер позволяет получать текущее значение состояния, а сеттер - устанавливать новое значение, т.е. обновлять состояние. На самом деле, эти элементы можно называть как угодно (поскольку мы имеем дело с деструктуризацией массива). Такой способ именования является распространенным соглашением и отражает суть возвращаемых useState() значений.

Мэтт Вайсфельд: Объектно-ориентированный подход Эта книга написана разработчиком для разработчиков, и позволяет выбрать оптимальные подходы для решения конкретных задач. Вы узнаете, как правильно применять наследование и композицию, поймете разницу между агрегацией и ассоциацией и перестанете путать интерфейс и реализацию. Технологии программирования непрерывно меняются и развиваются, но объектно-ориентированные концепции не зависят от платформы и остаются неизменно эффективными. В этом издании основное внимание уделяется фундаментальным основам ООП: паттернам проектирования, зависимостям и принципам SOLID, которые сделают ваш код понятным, гибким и хорошо сопровождаемым.

8 марта — день, который вдохнёт в тебя уверенность! Старт пятидневного марафона по вёрстке 💥 Специально для тех, кто хочет знать наверняка, подходит ли ему профессия программиста мы создали онлайн марафон. Всего 5 дней, которые через практику дадут понимание, быть ли тебе программистом. Пора ли менять свою жизнь? Начни 8 марта и к 13 уже будешь знать ответ на этот вопрос! Приходи на онлайн марафон, если ты: 🔳 задумываешься сменить профессию и стать веб-разработчиком; 🔳 боишься, что разработка — это сложно и не готов брать дорогой и долгий курс; 🔳 хочешь разобраться в HTML И CSS на практике. По итогам марафона ты: 🔲 создашь и разместишь в сети собственную веб-страницу с интерактивными элементами; 🔲 научишься работать с инструментами веб-разработки: Visual Studio Code и Figma; 🔲 поймёшь, как работать с языками HTML и CSS; ❗️И самое главное — ты получишь подробный план освоения профессии Frontend-разработчика! Не упусти свою возможность и регистрируйся по ссылке: https://s.algoritmika.org/1rebfcn

Старый switcheroo Напишите функцию vowel2index(str), которая принимает строку и заменяет все гласные на их номера в строке. Примеры: vowel2index('this is my string') // 'th3s 6s my str15ng' vowel2index('Codewars is the best site in the world') // 'C2d4w6rs 10s th15 b18st s23t25 27n th32 w35rld' vowel2index('') //''

ECMAScript 6 для разработчиков Николас Закас Прочитав эту книгу вы узнаете о том чем полезны итераторы и генераторы, чем ссылочные функции отличаются от обычных, какие дополнительные опции позволяют работать с данными, о наследовании типов, об асинхронном программировании, о том как модули меняют способ организации кода и многое другое.

Какой второй опциональный аргумент может быть передан setState() и в чем его назначение? Таким аргументом является коллбек, вызываемый после обновления состояния и повторного рендеринга компонента. Функция setState() является асинхронной, поэтому она принимает коллбек в качестве второго параметра. Как правило, лучше использовать другой метод жизненного цикла, чем полагаться на этот коллбек, но не лишним будет знать о такой возможности.

 this.setState(
   { username: 'Alex' },
   () => console.log('Обновление состояние завершено и компонент повторно отрисован.')
 )

setState() всегда влечет за собой повторный рендеринг, пока shouldComponentUpdate() не вернет false. Во избежание лишних рендерингов, вызывайте setState() только когда новое состояние отличается от предыдущего. Также избегайте вызова setState() в таких методах жизненного цикла, как componentDidUpdate(), поскольку это может привести к бесконечному циклу.