Средний
3 урока
Курс
Экосистема React.js
Данный видеокурс научит вас строить react-приложения с нуля с использованием последних технологий в экосистеме React.js

#1 — Введение в React.js

Научиться можно только тому, что любишь. И. Гёте

Привет, дорогие зрители! Представляем вам первый урок из видеокурса «Экосистема React.js». Первое видео расскажет о том, что такое React.js, какими преимуществами он обладает.

Что такое React.js?

React.js – это библиотека для построения пользовательских интерфейсов. Ее большими плюсами является легкость использования и возможность построения надежных приложений. Допустимой сложностью для вас будет использование других сторонних библиотек и инструментов, которые будут необходимы для работы. Установить данную библиотеку можно, зайдя на сайт https://facebook.github.io/react/.

Пример для «прочувствования» React.js

На видеоуроке будем рассматривать простой пример с выводом фразы «Hello, React!». В течение написания примера нам необходимо будет установить некоторые инструменты, но давайте условимся, что об их назначении и установке мы расскажем чуть позже.

Итак, для начала нужно создать сам проект командой в консоли: npm init (предлагается ввести название проекта и так далее). Далее создадим скрипт-файл index.js, в который импортируем такие библиотеки, как react и react-dom, затем напишем функцию render, внутри которой есть строка «Hello React!». Вторым параметром функции мы запишем контейнер, который отрендерит (визуализирует) нашу функцию. Мы заложили основу нашего приложения, теперь создадим несколько других файлов, чтобы строка корректно отображалась в браузере.

Первым делом мы создадим файл webpack.condif.js, в который вставим path-модуль, config (конфигурации) для webpack. В нем мы укажем, какой файл будет загружаться первым, и config (конфигурации) для babel. Затем создадим файл .babelrc и вставим в него плагины для react и ES2015. Запустим webpack в терминале.

В папке public можно просмотреть получившийся файл bundle.js. Теперь остается лишь создать html-страницу в public для отображения нашей строки «Hello React!». Весь подробный процесс написания примера будет рассмотрен в самом видео. Здесь лишь описаны основные действия, необходимые для создания приложения.

Дополнительные и важные инструменты React.js

Первым важным инструментом для работы является react-dom. Этот отдельный пакет необходим для склеивания библиотеки react и нашего «дома» (приложения). Команда для установки:

npm react-dom — save

Webpack – сборщик модулей. Это означает, что он собирает в единый файл все многочисленные файлы, из которых состоит ваш проект. Установка:

npm install webpack -g

Автор видеоурока затрагивает такую важную тему, как модное и эффективное написание кода на языке JavaScript. Существует на данный момент два компайлера Babel и TypeScript. Автор предпочитает использовать Babel, так как он на данный момент очень популярен и имеет множество различных особенностей. Babel позволяет переписывать код на ES2015 в код на предыдущем стандарте ES5, а также отображать приложение в старых браузерах с помощью определенных библиотек.

Вот и все, что мы будем рассматривать на этом видеоуроке. Ждем вас также и на следующих занятиях. Приятного и эффективного обучения, ваш LoftBlog!

Материалы к уроку:
Делись:

Оставь комментарий!

Добавить комментарий

Рекомендуемые курсы