Предисловие
Для начала представлюсь, меня зовут Эдик, я Full Stack Web Developer. Основные направления Laravel & React.js, Vue.js. Изучаю GoLang и Swift.
Хотя уже есть много других источников получения информации, книги остаются одними из самых распостраненных, но в них очень много воды и я решил не придумывать очередной костыль, а просто делать заметки.
Чтобы структурировать данные информация будет представлена в виде серии статей разбитых по главам.
Я пишу эти нотатки для себя и решил поделится ими со всем миром. Так что не будьте суровы. И так, поехали!
Глава 1. Добро пожаловать в React
React — популярная библиотека, используемая для создания пользовательских интерфейсов. Она была создана в Facebook чтобы решить ряд проблем, связанных с крупномаштабными сайтами.
React как библиотека
Стоит заметить, что библиотека не велика по размеру и используется только для одной части всей работы. Основные решения о том, какими средствами экосистемы воспользоваться, принимают разработчики. React — это только «V» в мире "MVC".
Новый синтаксис ECMAScript
React использует новые возможности ECMAScript. Если вы не знакомы с последней спецификацией, то просмотр кода React может вызвать неуверенность в своих силах.
Популярность функционально JavaScript
JavaScript скрипт не является функциональным языком, но в его коде могут быть использованы функциональные методы. В React придается особое значение приоритеру функционального программирования над объектно-ориентированным. Этот сдвиг в мышлении может привести к существенным преимуществам в таких областях, как пригодится к тестированию и повышению производительности.
Перед тем как начинать работать с React рекомендую ознакомится с основами парадигмы функционального программирования.
Утомительный JavaScript
Чтобы работать с React вам нужно освоить основы Webpack. Webpack позволит тестировать код, разбивать на модули, сжимать его для продакшена и т.д.
Будущее библиотеки React
В следующей версии библиотеки будет включена средство Fiber — новая реализация основного алгоритма React, целью которого является увеличение скорости выдачи изображения на экран. Многие изменения связаны с целевыми устройствами. Не нужно забывать, что React ещё используется в React Native.
Работа с файлами
Инструменты React-разработчика
Существует несколько инструментов, которые могут быть установлены в качестве расширений или дополнительных модулей браузера и представлять для нас определенный интерес:
react-detector — расширение браузера Chrome, позволяет узнать какие сайты используют React.
show-me-the-react — ещё одно средство обнаруживающее React.
React Developer Tools — дополнительный модуль, который расширяет функциональность инструментария браузера. Он создает новую вкладку в инструментах разработчика, где можно будет подробно просматривать элементы React.
React Developer Tools — отличный инструмент который экономит очень много времени при отладке. Если вы хотите профессионально писать с помощью React этот модуль Вам очень пригодится.
Установка Node.js
Node.js — JavaScript-язык без браузера (серверный JS). Это среда исполнения, применяемая для создания JavaScript-приложений на стороне как клиента, так и сервера. Может быть установлена на Windows, MacOS, Linux и другие платформы.
Подробности установки вы можете найти на официальном сайте Node.js.
Чтобы использовать React, Node не нужен. Но при работе с React для установки зависимостей необходимо будет задействовать диспетчер пакетов под названием NPM. Он устанавливается автоматически с Node.
Чтобы проверить установлен ли Node в терминале введите node -v
. Вы дожны увидеть версию вашего Node.
$ node -v
v.10.13.0
Альтернатива NPM
Дополнительной альтернативой NPM является Yarn. Этот инструмент был выпущен Facebook в сотрудничестве с Exponent, Google & Tilde. Он помогает надежнее управлять зависимостями приложения. При работе с Yarn, можно заметить, что он работает быстрее NPM.
Установить Yarn очень легко. После установки Node введите:
$ npm install -g yarn
Подробности установки вы можете найти на официальном сайте Yarn.
И после этого всё будет готово к установке пакетов. При установке зависимостей из packege.json вместо npm install
можно запустить команду yarn
.
Добавление пакета с помощью Yarn:
$ yarn add [имя_пакета]
Удаление пакета с помощью Yarn:
$ yarn remove [имя_пакета]