Что такое JSX и как он помогает разрабатывать приложения?

JSX позволяет создавать HTML-элементы прямо в JavaScript и помещать их в DOM без использования таких методов, как createElement() или appendChild(). JSX преобразует HTML-теги в элементы React. React использует JSX для шаблонизации вместо обычного JavaScript. Использовать JSX не обязательно, однако он предоставляет несколько преимуществ:

1. Он быстрее благодаря оптимизации во время компиляции кода в JavaScript
2. Он также является "типобезопасным", большинство ошибок перехватываются во время компиляции
3. Он позволяет легче и быстрее создавать шаблоны
Пример

 import React from 'react'

 class App extends React.Component {
    render() {
       return (
          <div>
             Привет, народ!
          </div>
       )
    }
 }
 export default App

Дэвид Кроудер. «Создание веб-сайта для чайников»

Если вы никогда не занимались веб-дизайном, но хотели бы создать свой ресурс т в Интернете, то этот самоучитель поможет вам научиться разрабатывать вполне профессиональные сайты.

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

Сможете применять базовые элементы HTML и редакторы различных типов.
Структурируете подачу материала и обеспечите удобство чтения текстов с помощью таблиц и фреймов, применяя современные технологии, например каскадные таблицы стилей (CSS).

Сделаете свой сайт привлекательным. Научитесь размещать на сайте красивые кнопки, добавлять видео- и аудиоклипы.

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

99 бутылок пива

Напишите функцию, которая вернет текст песни 99 бутылок пива как массив строк. То есть каждая строка песни должна быть элементом массива.

Алекс Бэнкс, Ева Порселло. «React и Redux. Функциональная веб-разработка»

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

Также вы изучите новейшие возможности стандарта ECMAScript и функционального программирования.

Что такое webpack?

Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».

Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт.

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

Cбор модулей является лишь одним из аспектов работы вебпака. При необходимости можно заставить вебпак осуществить некоторые преобразования модулей перед их добавлением в бандл. Например, преобразование SASS/LESS в обычный CSS, или современного JavaScript в ES5 для старых браузеров.

Что такое ReactDOM?

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

 1. render()
 2. findDOMNode()
 3. unmountComponentAtNode()
 4. hydrate()
 5. createPortal() и др.

До версии 0.14 ReactDOM был частью React. Одной из главных причин разделения React и ReactDOM было появление React Native. React содержит функционал, используемый в веб- и мобильных приложениях. Функционал ReactDOM используется только в веб-приложениях.

ReactDOM использует наблюдаемые объекты (observables), которые предоставляют эффективный способ работы с DOM. ReactDOM может использоваться как на стороне клиента, так и на стороне сервера.

Пример

 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App/App'

 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
 )

Четные и нечетные

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

Примеры:
evensAndOdds(2) => '10'
evensAndOdds(13) => 'd'

В чем разница между состоянием и пропами в React?

Состояние
Это данные, содержащиеся внутри компонента. Состояние является локальным (принадлежащем опеределенному компоненту). Компонент может обновлять состояние с помощью метода setState()

Пропы
Это данные, передаваемые дочернему компоненту от родительского. props являются доступными только для чтения в получающем их потомке. Тем не менее, передаваемая функция обратного вызова, может быть использована в потомке для обновления его состояния

​Как создать компонент высшего порядка (Higher Order Component, HOC)?

Компонент высшего порядка - это функция, принимающая компонент и возвращающая новый компонент. Это продвинутая техника, позволяющая повторно использовать логику компонента. HOC не являются частью React API. HOC является паттерном, производным от композиционной природы React. Компонент преобразует пропы в UI, а HOC трансформирует один компонент в другой. Примерами популярных HOC являются методы connect() в Redux и createContainer() в Relay.

 // HOC.js
 import React, { Component } from 'react'

 export default function Hoc(HocComponent){
     return class extends Component{
         render(){
             return (
                 <div>
                   <HocComponent></HocComponent>
                 </div>
             )
         }
     }
 }

 // App.js
 import React, { Component } from 'react'
 import Hoc from './HOC'

 class App extends Component {
   render() {
     return (
       <div>
         Пример компонента высшего порядка!
       </div>
     )
   } 
 }
 App = Hoc(App)
 export default App

Обратите внимание:
Мы не модифицируем компоненты, а создаем новые
HOC используются для композиции компонентов для обеспечения возможности повторного использования кода
HOC являются "чистыми" функциями. Они не имеют побочных эффектов (side effects) и всегда возвращают одинаковые результаты для одних и тех же аргументов