Овладение основами (часть 1/n)

В рамках подготовки к Capstone мы проходим часть отличного курса Full Stack Open, большая часть которого посвящена React. Программа LaunchSchool’s Core четко говорит о том, что с самого начала нужно сосредоточиться на основах JavaScript, а не на фреймворках, и мой опыт изучения React действительно продемонстрировал мудрость этого подхода.

Комфорт с базовым JavaScript

Проходя этот курс, я регулярно радуюсь тому, как легко освоить функциональность React и не споткнуться на JavaScript. Рассмотрим следующую обычную строку:

const [username, setUsername] = useState('')

В этой строке заключены идеи, которые охватывают множество различных фундаментальных уроков JavaScript, не ограничиваясь (и не в особом порядке):

1. Деструктуризация массива — удобный способ возврата нескольких значений из функции (и в данном случае превосходит деструктуризацию объекта)
4. … (опущено для краткости)

Представьте себе, если бы вы впервые увидели деструктуризацию массива или функции высшего порядка — разбор этой строки занял бы гораздо больше времени. И мы бы даже не коснулись области применения этих переменных и того, как передавать их компонентам, определенным в других файлах…

Понимание проблем, которые решает React

Оговорка, как начинающий разработчик я уверен, что имею лишь поверхностное понимание проблем, которые решает React, но даже в этом случае я вижу несколько больших проблем. При изучении основ JavaScript мы рассмотрели API манипуляции DOM, доступные нам в браузере. Мы делали такие вещи, как:

let header = document.querySelector('body>header');
let title = document.querySelector('h1');

header.insertAdjacentElement('afterBegin', title);
document.body.insertAdjacentElement('afterBegin', header);

И не начинайте рассказывать мне о переключении видимости элементов. Понимание боли от манипуляций с DOM вручную освещает, насколько проще использовать React для создания приложений. И я еще даже не перешел к сложным приложениям — я представляю, как преимущества увеличиваются с размером приложения.

Нацеливание на точки замешательства

Знание основ также помогает при знакомстве с совершенно новым синтаксисом. Рассмотрим следующее возвращение из функционального компонента React:

return (
      <div>
        <h2>Log in to application</h2>
        <form onSubmit={handleLogin}>
          <div>...
      //...continued

Если бы у меня было неустойчивое представление о JavaScript, я мог бы подумать, что можно просто писать HTML в файле .js. Но я знал лучше — здесь происходит что-то другое, потому что в JavaScripts вы не так создаете и манипулируете элементами HTML. Отсюда было легко определить, что на самом деле происходит (в данном случае JSX).

И вот в чем загвоздка — благодаря моему комфорту в написании базовых JS и HTML JSX очень легко освоить! Мастерство можно наращивать.

Заключение

Я не жалею о времени, потраченном на освоение основ JavaScript, и определенно возьму эту точку зрения с собой, когда буду продвигаться по карьерной лестнице.

Фотография на обложке Jakob Braun на Unsplash