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

Что такое Реакт? Я знаю, как им пользоваться, но мне трудно его описать, что является проблемой. Я хочу иметь возможность использовать React на своей следующей работе, но если я не расскажу об этом во время собеседования, меня могут исключить из списка подходящих кандидатов. Более глубокое понимание не только поможет мне во время собеседования, но и поможет мне лучше понять механику React, что сделает меня более компетентным программистом.

Я решил углубиться в детали React, чтобы получить более полное представление. Я собираюсь пройти через пару вещей за раз, исследуя их, пока не почувствую себя достаточно уверенно, чтобы учить ВАС. Это может превратиться в серию, и моя цель — не только изучить эти концепции самостоятельно, но и поместить их в удобный для изучения формат для других программистов, чтобы мы все могли извлечь пользу.

Хорошо, наконец, Чип, что такое React?

На веб-сайте React он определяет React как библиотеку JavaScript для создания пользовательских интерфейсов. Что это на самом деле означает? Итак, JavaScript — это язык программирования, используемый для программирования поведения веб-страниц (подробнее здесь). Если вы выполняли какую-либо работу с интерфейсом, вы должны быть знакомы с JavaScript, но что именно подразумевается под библиотекой? В данном случае это означает набор предварительно написанных фрагментов кода, которые можно использовать и повторно использовать для выполнения общих функций JavaScript. Использование React имеет смысл, но если бы меня попросили дать определение React, прежде чем я проведу небольшое исследование, мой ответ был бы беспорядочным и неясным. Ну и что дальше?

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

Библиотеки JavaScript, такие как React и JQuery, содержат предварительно написанные фрагменты кода, которые предоставляют инструменты для создания веб-страниц для использования по требованию. Представьте, что вы готовите бутерброд с арахисовым маслом и желе. Для выполнения задачи вам понадобится всего пара ингредиентов и инструментов. Библиотеки позволяют вам использовать только то, что вам нужно для выполнения работы. Это не означает, что вы ограничены приготовлением только PB&J, это просто означает, что вам не нужна терка для сыра при приготовлении сэндвичей. Фреймворки предоставляют все инструменты заранее, все, что вам нужно, доступно с самого начала. Фреймворки, такие как Vue JS и Angular, дают вашему приложению структуру и набор правил, которым нужно следовать. Сила библиотеки в том, что она может получить то, что вам нужно, когда вам это нужно, они дают свободу в дизайне. Сила фреймворков в том, что их структура повышает эффективность и организованность, а цена — гибкость благодаря строгим правилам.

Что такое JSX?

Теперь, когда мы определили React, как нам назвать то, что мы пишем в React? Как вы могли догадаться по подзаголовку, он называется JSX, но что это на самом деле означает? Ну, это не JavaScript 10, извините, Apple. JSX расшифровывается как JavaScript XML и представляет собой XML-подобное расширение синтаксиса для ECMAScript. Он обеспечивает синтаксический сахар для функции React.createElement(), давая нам выразительность JavaScript наряду с синтаксисом шаблона, подобным HTML.

Пример, приведенный на сайте React, очень полезен для демонстрации этого. Обратите внимание, что в приведенном ниже примере мы сначала объявляем переменную с именем name, а затем используем ее внутри JSX, заключая ее в фигурные скобки. Это позволяет нам вернуть переменную element, содержащую тег <h1>, в функцию рендеринга.

const name = 'Josh Perez'
const element = <h1>Hello, {name}</h1>
ReactDOM.render(
  element,
  document.getElementById('root')
)

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

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