Почему название компонента в React должно начинаться с большой буквы?

В JSX имена тегов в нижнем регистре считаются названиями HTML-тегов. Существует одно исключение: имена с точкой (аксессор свойства).

Когда название элемента начинается с маленькой буквы, это указывает на встроенный элемент, такой как div или span, передаваемые в React.createElement(). Названия элементов, начинающиеся с большой буквы, указывают на созданный (пользовательский) или импортированный компонент.

<component /> компилируется в React.createElement('component') (HTML-тег)
<Component /> компилируется в React.createElement(Component)
<obj.component /> компилируется в React.createElement(obj.component)

👉 @frontendInterview

👉 @frontendInterview

Что такое перенаправление или передача ссылок (refs forwarding)?

Перенаправление ссылок - это техника, заключающаяся в передаче ref через компонент в один из его потомков. Данная техника часто используется в библиотеках компонентов и компонентах высшего порядка.

Мы можем передать ref в компонент с помощью функции React.forwardRef(). Перенаправление ссылок позволяет компоненту передавать полученную ссылку потомку.

На картинке у нас имеется компонент TextInput с потомком, представляющим собой поле для ввода текста. Мы начинаем с создания ссылки:

 const inputRef = React.createRef()

Затем мы передаем ссылку в <TextInput ref={inputRef}/>, определяя ее как JSX-атрибут. React передает ref в функцию forwardRef() в качестве второго аргумента. Далее этот аргумент передается в <input ref={ref}/>. После этого значение DOM-узла становится доступным через inputRef.current.

Аналогичный функционал предоставляется хуком useRef().

👉 @frontendInterview

👉 @frontendInterview

Команда разработчиков Яндекса создала канал по IT-обучению

Даже самый ленивый сможет легко и быстро обучиться программированию на Python с нуля. Видео, лайфхаки, фичи и советы для новичков — всё на этом канале.

Один канал вместо 1000 учебников, бесполезных туториалов на Ютубе и преподавателя за 15.000р/час — @PythonAA

Чем React Router отличается от обычной маршрутизации?

В React существует лишь один HTML-файл (index.html). Когда пользователь переходит по новому адресу, вместо получения данных от сервера, роутер возвращает тот или иной компонент. У пользователя создается впечатление перемещения между разными страницами, но, в действительности, компоненты приложения являются не более чем различными представлениями одной страницы.

Как React это делает?
Router "заглядывает" в History каждого компонента и при наличии изменений в истории, компонент перерисовывается. До Router 4 версии нам приходилось устанавливать значение History вручную. Однако, начиная с Router 4, большая часть работы, связанной с маршрутизацией, автоматически выполняется компонентом BrowserRouter (на стороне клиента).

👉 @frontendInterview

​Назовите популярные решения для работы с анимацией в 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