Во-первых, писать HTML и JavaScript ужасно. Конечно, это работает, но требуется около 5 строк кода, чтобы заставить работать один простой прослушиватель событий. Представьте, что вы больше никогда не будете вводить document.getElementById(), document.querySelector() или document.getElementsByClassname(). Я ненавидел писать их здесь, не говоря уже о снова и снова в коде, который даже не очень длинный. Вместо этого представьте себе мир, в котором ваш HTML и JavaScript написаны одновременно. Больше не нужно снова искать идентификаторы или имена классов только для того, чтобы получить некоторые базовые функции.
Что ж, если это звучит привлекательно, вы, вероятно, уже должны использовать React.js. React использует систему, которая сочетает в себе язык разметки, очень похожий на HTML, называемый XML, и JavaScript, который вы уже знаете и думаете, что любите. Это складывается в нечто, называемое JSX или JavaScript XML. При написании на JSX вы просто пишете команды JavaScript, как обычно, с элементами стиля HTML в той же форме. Например, допустим, я хотел сделать пару кнопок. В ванильном JavaScript я должен был бы начать в файле HTML с этого:
<button id='button1'>Click Me!</button>
<button id='button2'>Don't Click Me!</button>А затем перейдите к файлу JavaScript, чтобы написать все это:
let clickMeButton = document.getElementById(button1)
clickMeButton.addEventListener('click', () => {
alert("I've been clicked")
}
let dontClickMeButton = document.getElementById(button2)
dontClickMeButton.addEventListener('click', () => {
alert("Why'd you click me?")
}
Теперь, конечно, не так уж и плохо. Но прежде чем мы скажем «забудьте об этом React», давайте посмотрим, насколько проще тот же код можно написать на React:
<button onClick={alert("I've been clicked")>Click me</button><button onClick={alert("Why'd you click me?")>Don't Click me</button>
И вы сделали! Одна строка на команду, одна страница для записи, никаких хлопот. Это работает, потому что React.js включает огромную библиотеку команд, упрощающих JavaScript. В этом примере слушатель onClick заменяет все эти глупые вещи addEventListener, и, поскольку JavaScript написан прямо в соответствии с HTML (на самом деле JSX), он знает, над каким элементом работать, без вашего указания. Это позволяет записывать эти команды как JavaScript в элементах стиля HTML, так что ваш код становится проще писать и легче читать. Это также ускоряет устранение ошибок, если возникают какие-либо проблемы, поскольку 4 или 5 (или, в моем примере, 8) строк кода на нескольких страницах могут быть сокращены всего до пары строк.
Теперь, когда вы, вероятно, убедились в том, что вам нужно больше узнать о React.js, давайте подумаем о том, насколько длинными и сложными могут стать ваши файлы JavaScript, особенно на полнофункциональной веб-странице. Ну, это больше не проблема, благодаря способности Reacts разделять код на компоненты.
Вы можете думать о компонентах, как об отдельных частях веб-страницы, которые необходимо организовать. Например, предположим, что на вашей странице есть панель навигации, заголовок и 3 раздела. В вашем ванильном JavaScript все это будет написано на ваших страницах index.js и index.html, верно? Конечно, это хорошо, но когда код становится длинным, становится довольно сложно найти то, что вам нужно, особенно если у вас есть ошибка.
Поначалу компоненты могут показаться запутанными, но поверьте мне, как только ваше веб-приложение становится длиннее нескольких прокруток, компоненты становятся вашими лучшими друзьями.
Так как же работают эти компоненты? Ну, давайте использовать этот последний пример. Здесь у вас будет 5 отдельных файлов с именами NavBar.js, Header.js, Section1.js, Section2.js и Section 3.js. Каждый из этих файлов будет содержать код, необходимый им для самостоятельной работы. Затем ваша главная страница, обычно называемая App.js, просто импортирует каждый компонент, как если бы он был отдельным HTML-элементом. Давайте посмотрим, как это будет написано:
const App = () => {
<NavBar />
<Header />
<Section1 />
<Section2 />
<Section3 />
}
Теперь, с одним довольно простым последним шагом, вся информация может быть полностью включена. Нам нужно сообщить React, откуда брать всю информацию и кому разрешен доступ к этой информации. Таким образом, каждый компонент заканчивается оператором экспорта, а App.js начинается с оператора импорта.
Таким образом, компонент NavBar будет заканчиваться строкой, которая говорит
export default 'NavBar'
и остальные компоненты будут делать то же самое с соответствующими именами. Затем мы передаем эту информацию в App.js с операторами импорта вверху, которые говорят:
import NavBar from './NavBar'
И так далее по каждому компоненту. Теперь у вас может быть не только несколько компонентов, содержащих каждую часть вашего приложения, но вы даже можете иметь компоненты внутри компонентов для сложных приложений. Это создает своего рода дерево компонентов, в котором вы можете иметь компоненты, ответвляющиеся от других компонентов, каждый со своей индивидуальной функциональностью.
Если вы когда-либо писали код из 1000 и более строк, вы знаете, как легко запутаться в коде, особенно когда он содержит ошибки. С компонентами каждая часть функциональности может иметь свое собственное пространство для существования, а отладка так же проста, как переход к одному компоненту, который не работает должным образом.
Теперь, когда вы понимаете основы реагирования, создайте собственное приложение React.js и попробуйте сами!
