​Назовите популярные решения для работы с анимацией в React.

ReactCSSTransitionGroup - это высокоуровневое API, основанное на ReactTransitionGroup, предоставляющее легкий способ выполнения CSS-переходов и анимации при монтировании компонента в DOM и удалении из него. Он содержит 4 компонента, отображающих переходы компонента из одного состояния в другое с помощью декларативного API:

1. Transition
2. CSSTransition
3. SwitchTransition
4. TransitionGroup

Пример

 import ReactCSSTransitionGroup from 'react-transition-group'

 class TodoList extends React.Component {
   constructor(props) {
     super(props)
     this.state = {items: ['привет', 'народ', 'нажми', 'на меня']}
     this.handleAdd = this.handleAdd.bind(this)
   }

   handleAdd() {
     const newItems = this.state.items.concat([
       prompt('Введите текст')
     ])
     this.setState({items: newItems})
   }

  handleRemove(i) {
    const newItems = this.state.items.slice()
    newItems.splice(i, 1)
    this.setState({items: newItems})
  }

   render() {
     const items = this.state.items.map((item, i) => (
       <div key={item} onClick={() => this.handleRemove(i)}>
         {item}
       </div>
     ))

     return (
       <div>
         <button onClick={this.handleAdd}>Добавить элемент</button>
         <ReactCSSTransitionGroup
           transitionName="example"
           transitionEnterTimeout={500}
           transitionLeaveTimeout={300}>
           {items}
         </ReactCSSTransitionGroup>
       </div>
     )
   }
 }

Здесь при добавлении нового элемента в ReactCSSTransitionGroup, ему сначала будет присвоен CSS-класс example-enter, затем example-enter-active. Это является соглашением, основанным на пропе transitionName.

👉 @frontendInterview

👉 @frontendInterview

Node Cookbook (2020)

Node.js - ключевая технология для создания веб-приложений и инструментов, позволяющая разрабатывать все приложение на одном языке. Это четвертое издание Node Cookbook недавно было обновлено, чтобы успеть за последними фичами Node.js и эволюцией экосистемы фреймворка.

👉 @frontendInterview

Валидная строка

Вам дана последовательность слов и строка. Вам нужно написать функцию, которая проверит, состоит ли строка из данных слов.

Пример:
string[] dictionary = ["code", "wars"];

string s = "codewars"; // true -> match 'code', 'wars'

string s1 = "codewar"; // false -> match 'code', unmatched 'war'

👉 @frontendInterview

JavaScript: A Beginner's Guide (2019)

Данное практическое динамичное руководство показывает от начала до конца, как с помощью JavaScript создавать динамические веб-страницы со специальными эффектами. Пятое издание содержит обновления, касающиеся всех основных новых функций и новейших методов и практик веб-разработки. Вы также узнаете, как расширить возможности JavaScript на стороне сервера с помощью Node.js.

👉 @frontendInterview

Расскажите об обобщённых типах в TypeScript.

Обобщённые типы (generics) позволяют создавать компоненты или функции, которые могут работать с различными типами, а не с каким-то одним. Рассмотрим пример:

/** Объявление класса с параметром обобщённого типа */
class Queue<T> {
private data = [];
push = (item: T) => this.data.push(item);
pop = (): T => this.data.shift();
}

const queue = new Queue<number>();
queue.push(0);
queue.push("1"); // Ошибка : в такую очередь нельзя добавить строку, тут разрешено использовать лишь числа

👉 @frontendInterview

Сколько времени учатся на фронтендера с нуля?

От 6-ти месяцев. Вот несколько правил, с которыми сделать это будет проще:

- Не изучайте фреймворк, не разобравшись в азах;
- Не учитесь по любительским урокам, где могут показать плохие практики;
- Не делайте перерывов в обучении;
- Выполняйте практические задания, выбирайте их соответственно своему уровню;
- Найдите ментора, который будет вас проверять и выявлять пробелы в знаниях.

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

Можно выбрать готовое решение - Профессия Frontend-разработчик PRO от Skillbox.

Курс разработан грамотно и проверен на тысячах студентов.

В него входят:
- 3 месяца бесплатного периода;
- изучение React, Vue
- гарантия трудоустройства;
и многое другое.

👉 @frontendInterview

Что произойдет при использовании React пропов в начальном состоянии (Initial State)?

При изменении пропов компонента без его обновления, эти новые пропы никогда не будут отображены на экране, поскольку функция-конструктор никогда не обновит текущее состояние компонента. Обновление состояния через пропы возможно только после создания компонента.

В приведенном ниже примере обновленное значение инпута никогда не отобразится:

 class MyComponent extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
       records: [],
       inputValue: this.props.inputValue
     };
   }
   render() {
     return <div>{this.state.inputValue}</div>
   }
 }

Значение обновится при использовании пропов в методе render():
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
record: []
}
}

render() {
return <div>{this.props.inputValue}</div>
}
}

Слова в двоичный код

Напишите функцию, которая принимает строку и возвращает массив, состоящий из двоичных чисел, соответствующих ASCII коду символов строки.

Пример:
'man' => [ '01101101', '01100001', '01101110' ]

👉 @frontendInterview

👉 @frontendInterview

Современный фронтенд на нашем втором канале

17к фронтендеров уже читают его, подпишись и ты

👉 @seniorFront

Как в TypeScript реализовать свойства класса, являющиеся константами?

В TypeScript, при объявлении свойств классов, нельзя использовать ключевое слово const. При попытке использования этого ключевого слова выводится следующее сообщение об ошибке: A class member cannot have the ‘const’ keyword. В TypeScript 2.0 имеется модификатор readonly, позволяющий создавать свойства класса, предназначенные только для чтения:

class MyClass {
readonly myReadonlyProperty = 1;
myMethod() {
console.log(this.myReadonlyProperty);
}
}

new MyClass().myReadonlyProperty = 5; // ошибка, так как свойство предназначено только для чтения

👉 @frontendInterview

👉 @frontendInterview

Почему следует быть осторожным при распространении (spread) пропов на DOM-элементы?

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

Например:
const ComponentA = () =>
<ComponentB isDisplay={true} className='someClassName' />

const ComponentB = ({ isDisplay, ...domProps }) =>
<div {...domProps}>{ComponentB}</div>

👉 @frontendInterview