eduardtkachuk Nov 9 2018 at 13:19

Краткая выжимка из книги React и Redux функциональная веб-разработка: Глава 1. Добро пожаловать в React

3 min

5.5K

Предисловие

Для начала представлюсь, меня зовут Эдик, я Full Stack Web Developer. Основные направления Laravel & React.js, Vue.js. Изучаю GoLang и Swift.

Хотя уже есть много других источников получения информации, книги остаются одними из самых распостраненных, но в них очень много воды и я решил не придумывать очередной костыль, а просто делать заметки.

Чтобы структурировать данные информация будет представлена в виде серии статей разбитых по главам.

Я пишу эти нотатки для себя и решил поделится ими со всем миром. Так что не будьте суровы. И так, поехали!

Глава 1. Добро пожаловать в React

React — популярная библиотека, используемая для создания пользовательских интерфейсов. Она была создана в Facebook чтобы решить ряд проблем, связанных с крупномаштабными сайтами.

React как библиотека

Стоит заметить, что библиотека не велика по размеру и используется только для одной части всей работы. Основные решения о том, какими средствами экосистемы воспользоваться, принимают разработчики. React — это только «V» в мире "MVC".

Новый синтаксис ECMAScript

React использует новые возможности ECMAScript. Если вы не знакомы с последней спецификацией, то просмотр кода 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 [имя_пакета]

Tags:

Hubs: