Отказ от ответственности: это мое личное мнение, выросшее из опыта решения сложных задач внешнего интерфейса.
С годами фронтенд-инжиниринг превратился в то, что мы имеем сегодня. С ES6, React и webpack это определенно не та платформа, которая была у нас раньше, где специалисты по бэкенду никогда серьезно не воспринимали JavaScript и не без причины.
Видите ли, единственным вариантом использования JavaScript было выполнение некоторых базовых проверок на стороне клиента и случайных запросов ajax. За UI, бизнес-логику и рендеринг отвечал бэкэнд.
Мы получали от сервера большие куски готового для рендеринга HTML на каждый запрос, который мы сделали. Хотя сам по себе это неплохой способ написания программного обеспечения, у него есть некоторые проблемы с пользовательским интерфейсом: в основном, с ожиданием фрагмента HTML.
Сегодня мы запрашиваем только необработанные данные, которые затем обрабатываются нашим веб-приложением и визуализируются с использованием множества методов. Все в браузере.
Результат: удобство для пользователей стало лучше. И что самое главное, это возвестило эру фронтенд-инженера.
Предположение: вы знаете HTML. Если нет, попробуйте этот курс кодекадемии.
Я предполагаю, что вы знакомы с CSS. Если нет или вы хотите освежить память, сделайте это здесь (learnlayout.com) или здесь (codecademy.com).
Ожидается, что вы сможете создать статический макет airbnb, используя простой HTML и CSS, в комплекте с липким заголовком, круглым значком изображения профиля и сеткой. Посмотрите, когда высота плитки увеличивается, она сдвигает следующую строку вниз.
Теперь перейдем к самому важному инструменту торговли - языку. JavaScript.
Я встречал по крайней мере пару десятков человек, которые работают в качестве фронтенд-инженеров / разработчиков полного стека и ежедневно заявляют о себе на JAM с помощью JavaScript.
Только около 30% из них действительно потратили время, чтобы понять язык и его особенности.
JavaScript всегда был очень привлекательным языком, простым для новичков. К сожалению, большинство людей остаются новичками на протяжении большей части своей карьеры, и их влияние заметно в их работе и навыках принятия решений. Это неприемлемо.
Перво-наперво: хорошо выучите язык. Зайдите в MDN. Проведите с ним время. Как только основы es5 станут ясны, переходите к изучению es6.
Это должно быть довольно просто, если вы тщательно выполнили предыдущий шаг. Вы можете узнать о es6 babeljs.io или ES6-for-people.
Вы должны уметь писать любое производственное приложение с использованием ванильного JS, прежде чем даже подумаете о jQuery или React.
Теперь, когда вы набираете скорость, вы должны знать, как управлять своим кодом. Введите git.
Если вы еще не знаете, как с ним поиграться, выделите время и узнайте, как его использовать. Timebox это.
Позже, когда вы будете использовать его в своих проектах, станет понятнее. А пока сформулируйте свои концепции прямо.
Теперь, когда мы знаем, как создавать HTML + CSS + JS с помощью git как профессионал, нам нужно выбрать хороший редактор.
Да, IDE поможет вам писать код быстрее с помощью интеллекта и другой черной магии, но за это приходится платить. Это увеличивает пропускную способность вашего процессора.
Вам стоит попробовать атом, vscode или возвышенный. И атом, и vscode написаны поверх электрона. Это в основном веб-приложения. Sublime - настоящий синий редактор.
Однако моя личная рекомендация - vscode. Он бесплатный, имеет приличный intellisense, поставляется с хорошими настройками по умолчанию и, что самое главное, вы можете отлаживать код прямо в редакторе в стиле IDE. Прочтите это, чтобы узнать больше.
Интересная часть - это ключевые сопоставления для атома и возвышенного, которые могут быть установлены в vscode. Так что особой разницы вы не почувствуете.
Используйте эти расширения с vscode. Они также доступны в версиях Atom и Sublime.
- Https://marketplace.visualstudio.com/items?itemName=patbenatar.advanced-new-file
- Https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename
- Https://marketplace.visualstudio.com/items?itemName=FallenMax.mithril-emmet
- Https://marketplace.visualstudio.com/items?itemName=jundat95.react-native-snippet
Если вы используете Mac, хорошо для вас. Пожалуйста, установите iterm2 и oh-my-zsh. Вы получите множество бонусов, таких как автоматическое завершение команды git, несколько независимых вкладок в одном окне терминала, например:
Если у вас windows, попробуйте cmder и conemu. Лично я предпочитаю conemu, а не cmder, поскольку он запускает git bash на нескольких вкладках. Убедитесь, что вы установили git для Windows раньше.
Ближе всего к настройке mac dev я мог бы использовать свой Ubuntu 16.04 LTS, работающий на Thinkpad T580.
Для ubuntu установите терминатор. Проверьте эту ссылку для получения инструкций по настройке.
Затем установите zsh. Попробуйте этот средний пост для получения инструкций и настроек. Я мог бы заставить его работать для моего использования с той же темой, которую я использую для Mac.
С zsh я получаю все команды, которые использую с iterm2. Что касается привязки клавиш, для большинства действий она обычно ctrl + shift + <some-key>.
Лично я использую разделение терминала, максимизацию / минимизацию терминала, переключение фокуса и закрытие терминала.
Мне потребовалось ~ 1 неделя, чтобы довести это до мышечной памяти.
Если вы не знакомы с менеджерами пакетов в JavaScript, найдите время, чтобы узнать о npm и yarn.
Установите узел отсюда. Он также установит npm.
nodejs - это JavaScript вне браузера. Это необходимо для выполнения операций с вашим кодом JavaScript, таких как транспиляция и для преобразования JSX в ванильный JS.
Наконец-то мы здесь. Если вы дочитали до этого места, я могу только представить, какое волнение вы испытали на пути изучения концепций, которые мы обсуждали до сих пор.
Все идет нормально. Давайте теперь поиграем с большими мальчиками.
Войдите в React.
Когда у вас есть достаточно сложная проблема / ситуация, вам нужен способ подойти к ней. Думайте о реакции как о способе приближения и последующего решения проблем пользовательского интерфейса, который выполняет свою работу эффективно и при этом не требует корректировки ваших концепций базовой технологии, JavaScript.
Все в React является компонентом. Небольшая единица пользовательского интерфейса, которая может иметь собственный конечный автомат и логику рендеринга. И что самое приятное, это все на JavaScript.
Никаких html-шаблонов и функций типа контроллера-представления, которые волшебным образом сшивают логику пользовательского интерфейса с указанными шаблонами, что-то вроде того, что делает angular или backbonejs.
Лучшее место для изучения любой технологии. ИМХО всегда - это официальный учебник, и facebook неплохо поработал с документацией для React. Дайте ему вращение. И, как они предлагают, создавайте образец приложения по мере обучения.
Или попробуйте codecademy, если официальная документация вам не подходит.
Используйте create-react-app для начальной загрузки вашего реагирующего приложения. Он использует webpack для преобразования es6 в es5 и JSX в JS и, наконец, обслуживает перенесенный код на localhost с горячей перезагрузкой, т.е. ваше приложение будет автоматически обновляться / перезагружаться всякий раз, когда вы вносите изменения в код.
Вы можете пока не углубляться в изучение webpack.
Разобравшись со спринтом с основами фронтенд-инжиниринга, давайте на минутку оглянемся на все, что мы узнали к этому моменту:
И тренируемся на vscode / atom.
Если вы чувствуете, что хотите освежить в памяти какую-либо из концепций, вернитесь к теме и попрактикуйтесь + задавайте вопросы.
Повторяйте до тех пор, пока не поймете, что именно происходит, когда вы нажимаете кнопку для получения списка записей, в то же время показывая загружаемый gif-файл, а когда данные становятся доступными, постепенно убирайте загружаемый gif-файл и нарисуйте результаты на экране. Что-то похожее на раздел комментариев facebook / linkedin.
Спасибо за прочтение.
Нажмите * хлоп *, если вы думаете, что это того стоило :)
Найдите меня в linkedin или вернитесь ко мне в комментариях.
Нанять лучших ReactJs Frontend разработчиков на Prolanceer.com
Prolanceer.com - это экономичная, прошедшая предварительную проверку рыночная платформа для найма независимых профессионалов в области программного обеспечения на фрилансе или по контракту
