React в действии

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

Во второй половине книги рассмотрены различные способы взаимодействия с React. Вы изучите базовые методы жизненного цикла, научитесь создавать поток данных, формы, а также тестировать приложения. На закуску вас ждет материал об архитектуре React-приложения, взаимодействии с Redux, экскурс в серверный рендеринг и обзор React Native.

👉 @frontendInterview

Строка заканчивается на

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

Примеры:
solution('abc', 'bc') // returns true
solution('abc', 'd') // returns false

👉 @frontendInterview

Angular для профессионалов (2018)

Книга рассказывает о принципах применения Angular в проектах, начиная с основ и заканчивая наиболее продвинутыми и сложными функциями. В ней описаны общие проблемы при разработке с использованием популярного фреймворка, а также способы их избежать. Разобраны преимущества работы с шаблоном MVC.

👉 @frontendInterview

В чем заключаются преимущества использования JSX?

JSX - это опциональное расширение синтаксиса JavaScript, облегчающее создание компонентов. JSX включает в себя разметку и выражения JavaScript. В действительности, JSX является сокращением для React.createElement(), делая код чище и проще.

JSX может быть полезен для создания выразительных конструкций или пользовательских компонентов, снижая количество опечаток в больших древовидных структурах и облегчая процесс преобразования разметки в деревья React-элементов. Кроме того, при использовании JSX в консоль выводятся предупреждения и потенциальные ошибки, помогающие устранять проблемы на ранней стадии разработки.

👉 @frontendInterview

👉 @frontendInterview

Как определить наличие свойства в объекте?

Существует три способа это сделать.
Первый способ состоит в использовании оператора «in»:

 o = {
    'prop': 'bwahahah',
    'prop2': 'hweasa'
}

console.log('prop' in o) // true
console.log('prop1' in o) // false

Второй — использовать метод hasOwnProperty:

 console.log(o.hasOwnProperty('prop2')) // true
 console.log(o.hasOwnProperty('prop1')) // false

Третий — индексная нотация массива:
console.log(o['prop']) // bwahahah
console.log(o['prop1']) // undefined

👉 @frontendInterview

Сортировка массивом

Вам даны два массива. Вы должны отсортировать первый массив, используя значения из второго массива чисел.

Пример:
initialArray = ['x', 'y', 'z'] sortingArray = [ 1, 2, 0]
sort(initialArray, sortingArray) => ['z', 'x', 'y']
sort(['z', 'x', 'y'], [0, 2, 1]) => ['z', 'y', 'x']

👉 @frontendInterview

Как запустить повторный рендеринг компонента без вызова функции setState()?

Использование forceUpdate()
В следующем примере при монтировании компонента генерируется случайное число. При нажатии кнопки вызывается функция forceUpdate(), что, в конечном счете, заврешается генерацией нового случайного числа:

 import React, { Component } from 'react'

 class App extends React.Component{
   constructor() {
     super()
     this.forceUpdateHandler = this.forceUpdateHandler.bind(this)
   }

   forceUpdateHandler() {
     this.forceUpdate()
   }

   render() {
     return (
       <div>
         <button onClick={this.forceUpdateHandler}>Принудительное обновление</button>
         <h4>Случайное число: { Math.random() }</h4>
       </div>
     )
   }
}

 export default App

Обратите внимание: использовать forceUpdate() не рекомендуется.

👉 @frontendInterview

👉 @frontendInterview

В чем разница между обычной функцией и функциональным выражением?

Допустим, у нас есть следующее:

 hoistedFunc()
 notHoistedFunc()

 function hoistedFunc(){
     console.log('I am hoisted')
 }

 var notHoistedFunc = function(){
     console.log('I will not be hoisted!')
 }

Вызов notHoistedFunc приведет к ошибке, а вызов hoistedFunc нет, потому что hoistedFunc «всплывает», поднимается в глобальную область видимости, а notHoistedFunc нет.

👉 @frontendInterview

👉 @frontendInterview

​В чем разница между componentDidMount() и componentWillMount()?

componentDidMount() выполняется после первого рендеринга только на стороне клиента. Это подходящее место для выполнения AJAX-запросов и обновления состояния. Данный метод также используется для интеграции с другими JavaScript-фремворками и любыми функциями с отложенным выполнением, такими как setTimeout() или setInterval().

Пример

 React, { Component } from 'react'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: 'Иван Петров'
    }
  }

  getData(){
    setTimeout(() => {
      console.log('Данные получены')
      this.setState({
        data: 'Привет, Иван!'
      })
    }, 1000)
  }

  componentDidMount() {
    this.getData()
  }

  render() {
    return (
      <div>
        {this.state.data}
      </div>
    )
  }
}

export default App

componentWillMount() выполняется перед рендерингом, как на стороне сервера, так и на стороне клиента. Данный метод используется для программного выполнения задач перед монтированием компонента.

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

class App extends Component {
constructor(props) {
super(props)
this.state = {
data: 'Иван Петров'
}
}
componentWillMount() {
console.log('Сначала вызывается этот метод')
}

getData() {
setTimeout(() => {
console.log('Данные получены')
this.setState({
data: 'Привет, Иван!'
})
}, 1000)
}

componentDidMount() {
this.getData()
}

render() {
return (
<div>
{this.state.data}
</div>
)
}
}

export default App

👉 @frontendInterview

👉 @frontendInterview

Рефакторинг кода на JavaScript

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

👉 @frontendInterview