Хорошо, хорошо, я выучу React
Или: как я научился не беспокоиться и полюбил интерфейс
Это будет продолжающаяся серия. Он будет сосредоточен на моем пути к тому, чтобы заставить себя изучить эту, казалось бы, довольно неинтуитивную библиотеку JavaScript под названием React.
Я уже давно угрожал узнать это. Однако каждый раз я дохожу до сути и спрашиваю себя:
«Какого черта я изучаю это, мне все равно не нравится создавать интерфейсные пользовательские интерфейсы?»
На этот раз все будет иначе. Надеюсь.
Что такое React? (и чем не является React)
React - это способ создания повторно используемых компонентов HTML, а затем их рендеринга на веб-странице с помощью JavaScript. Вот и все. Хорошо, я знаю, что это, вероятно, немного больше, но мы вернемся к этому позже.
React НЕ является законченным фреймворком JavaScript. Это просто интерфейс. Так что на самом деле нет никакого смысла сравнивать Angular, Ember или Meteor.
Минимально жизнеспособное что угодно
Для начала мы не будем беспокоиться об установке Node и npm и обо всем этом на потом. Можно создать простое веб-приложение / веб-сайт на React, используя один файл HTML. Итак, поехали. Просто скопируйте и вставьте следующее в файл с именем index.html или как-то еще и откройте его в своем веб-браузере:
Хорошо, так что здесь происходит?
Это просто ваша основная страница HTML5, как указано <!DOCTYPE html> вверху. Для charset по какой-то причине необходимо установить значение UTF-8, иначе это не сработает. Тогда у нас есть название. Затем импортируются три внешних скрипта, чтобы React работал. Пока не беспокойтесь об этом.
В body единственный элемент, который у нас есть, - это div с id="root", и именно здесь мы скажем React отрендерить наш компонент.
Наконец, у нас есть сценарий. Это часть React. Бит <h1>Hello, world!</h1> - это наш компонент React. Да, это похоже на HTML. Это потому, что пока это всего лишь HTML-код. Позже мы узнаем, как собрать эти компоненты по отдельности, чтобы их можно было использовать повторно.
Наконец, мы вызываем метод ReactDOM.render();, чтобы отобразить наш компонент реакции на странице с помощью document.getElementById('root').
Вот и все! Ваше первое приложение на React. Как здорово.
Что теперь?
Вы можете подумать:
«Вау, это глупо. Я мог бы просто набрать Hello, world! переходить на страницу вручную и вообще не использовать React ».
И ты был бы прав. Надеюсь, мы узнаем, как React может быть полезен в реальных сценариях в будущем.
До тех пор. Утихомирить кодеров. ✌️
Часть 2 здесь:
Давайте не будем слишком остро реагировать на изучение React
Как научиться React медленно medium.com
Спасибо, что прочитали :), если хотите, подписывайтесь на меня в Twitter.
