ReactJS — это библиотека Javascript, используемая для быстрого создания интерактивных пользовательских интерфейсов. На момент написания статьи это самая популярная библиотека JavaScript для разработки. React превосходит своих конкурентов таких как Angular и Vue JS по функциональности и популярности.
ReactJS был разработан компанией Facebook в 2011 году и очень быстро обрел свою популярность из-за его гибкости и простоты. Что и сделало React востребованным при разработке мобильных и веб-приложений. Его использую такие гиганты как Facebook , Instagram , Netflix , Airbnb и Twitter. Так же используют React и более 90 000 сайтов в сети интернет.
В этой статье вы узнаете, как установить ReactJS на Ubuntu 20.04 и Ubuntu 18.04.
Шаг 1: Установка NPM в Ubuntu
Мы начинаем установку React JS с установки npm – это сокращение от node package manager. Первое node package manager это инструмент командной строки, используемый для взаимодействия с пакетами Javascript, который позволяет пользователям устанавливать, обновлять и управлять инструментами и библиотеками Javascript.
Второе NPM — это онлайн реестр программного обеспечения с открытым исходным кодом, в котором содержится более 800 000 Node.JS. Npm бесплатен и вы можете легко загружать программные приложения, которые находятся в открытом доступе.
Чтобы установить npm на UbuntuLinux, войдите на свой сервер как пользователь sudo и вызовите следующую команду:
После завершения установки вы можете проверить версию установленного npm с помощью команды:
Последняя версия на момент написания этой статьи — 6.14.4, как написано в выходных данных.
Во время установки npm также устанавливается и node.js, вы можете проверить версию с помощью команды:
Шаг 2: Установка утилиты create-react-app
create-react-app — это утилита которая позволяет настроить все инструменты, необходимые для создания приложения React. Это экономит вам много времени устанавливая все с нуля.
Чтобы установить инструмент, выполните следующую команду npm:
$ sudo npm -g install create-react-app
Эта команда установит Create React App Tool
После установки вы можете проверить версию программы, введя команду в терминале:
Шаг 3: Создайте И Запустите Свое Первое Приложение в React
После того как нам удало установить React, пришло время создать приложение в ReactJS. Скажу честно, дело это довольно простое. Сейчас мы расскажем как создать React приложение под названием setiwik-app. Делается это следующим образом.
Это займет примерно 5 минут, чтобы установить все пакеты, библиотеки и инструменты, необходимые приложению. Вам потребуется немного терпения.
Создать Приложение React
Если создание приложения прошло успешно, вы получите уведомление ниже с указанием основных команд, которые вы можете запустить, чтобы начать управлять приложением.
Краткое описание приложения React
Чтобы запустить приложение, перейдите в каталог приложений
Затем выполните команду:
В конечном итоге вы получите вывод ниже, показывающий вам, как получить доступ к приложению в браузере.
Запустите Приложение ReactJS
Запустите браузер и введите IP — адрес вашего сервера
Доступ к приложению ReactJS в браузере
Это показывает, что приложение React по умолчанию запущено и работает.
Вот и все, в этом руководстве мы успешно установили React JS и создали приложение в React.
Источник
Начало работы с React
В этой статье мы скажем привет React. Мы узнаем немного подробностей о его происхождении и сценариях использования, настроим базовый набор инструментов на нашем локальном компьютере, а также создадим и поиграем с простым приложением для начинающих, и в процессе узнаем немного о том, как React работает .
Что нужно знать:
React использует синтаксис HTML-in-JavaScript под названием JSX (JavaScript и XML). Знание HTML и JavaScript поможет вам изучить JSX и лучше определить, связаны ли ошибки в вашем приложении с JavaScript или с более специфической областью React.
Настроить локальную среду разработки React, создать стартовое приложение и понять основы его работы.
Привет React
Как гласит официальный слоган, React — это библиотека для создания пользовательских интерфейсов. React не является фреймворком – он даже не рассчитан исключительно для web. Он используется для визуализации и в связке с другими библиотеками. Например, React Native можно использовать для создания мобильных приложений; React 360 можно использовать для создания приложений виртуальной реальности; помимо того есть и другие варианты.
Для создания веб-приложений разработчики используют React в тандеме с ReactDOM. React and ReactDOM часто обсуждаются в том же пространстве и используются для решения тех же проблем, что и другие настоящие фреймворки для веб-разработки. Когда мы ссылаемся на React как на «фреймворк», мы подразумеваем это разговорное понимание.
Основная цель React — минимизировать ошибки, возникающие при разработке пользовательских интерфейсов. Это достигается за счёт использования компонентов — автономных логических фрагментов кода, которые описывают часть пользовательского интерфейса. А уже эти компоненты объединяются для создания полноценного пользовательского интерфейса. React абстрагирует большую часть работы по визуализации, оставляя вам возможность сосредоточиться на дизайне.
Когда использовать
В отличие от других платформ, рассматриваемых в этом модуле, React не обязывает к строгим правилам в отношении соглашений о коде или организации файлов. Это позволяет командам договариваться, что для них более подходит, и структурировать React проект соответствующим образом. React может отвечать за одну кнопку, несколько частей или же весь пользовательский интерфейс приложения.
Хотя React можно использовать для небольших частей интерфейса, «зайти» в него не так просто, как, к примеру, в jQuery, или даже во Vue. Куда легче это сделать создав всё приложение с помощью React.
Кроме того, такие преимущества React-приложения, как написание интерфейсов с помощью JSX, требуют процесса компиляции. Добавление на сайт компилятора Babel приводит к более медленному выполнению кода, поэтому такие инструменты обычно настраиваются для процесса сборки. Да, возможно, у React есть серьёзные требования к инструментарию, но его можно освоить.
В этой статье основное внимание будет уделено использованию React для создания всего пользовательского интерфейса с помощью create-react-app, предоставляемого Facebook.
Как React использует JavaScript?
React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of JSX syntax. JSX extends JavaScript’s syntax so that HTML-like code can live alongside it. For example:
This heading constant is known as a JSX expression. React can use it to render that
Suppose we wanted to wrap our heading in a tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:
Note: The parentheses in the previous snippet aren’t unique to JSX, and don’t have any effect on your application. They’re a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:
However, this looks kind of awkward, because the tag that starts the expression is not indented to the same position as its corresponding closing tag.
Of course, your browser can’t read JSX without help. When compiled (using a tool like Babel or Parcel), our header expression would look like this:
It’s possible to skip the compilation step and use React.createElement() to write your UI yourself. In doing this, however, you lose the declarative benefit of JSX, and your code becomes harder to read. Compilation is an extra step in the development process, but many developers in the React community think that the readability of JSX is worthwhile. Plus, popular tooling makes JSX-to-JavaScript compilation part of its setup process. You don’t have to configure compilation yourself unless you want to.
Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you’re comfortable with it, however, it will allow you build user interfaces more quickly and intuitively, and allow others to better understand your code base at a glance.
To read more about JSX, check out the React team’s JSX In Depth article.
Настройка вашего первого React приложения
There are many ways to use React, but we’re going to use the command-line interface (CLI) tool create-react-app, as mentioned earlier, which expedites the process of developing a React application by installing some packages and creating some files for you, handling the tooling described above.
Источник
Повышаем квалификацию с лучшими инструментами для web-разработки на React
Вы можете стать более ценным специалистом, изучив лучшие инструменты для разработки веб-приложений на React.
Большинство резюме работодатель отклоняет, просто пробежав их по диагонали. Это немного обескураживает, правда? Так что очень важно, чтобы он сразу увидел нужные ему знания и навыки у вас. Сейчас подходящее время прокачаться, особенно если вам нечем похвастаться в своём резюме. Не нужно посещать университет, чтобы получить новые навыки: нужно просто идти в нужном направлении и не отклоняться от него.
Если вы, например, умеете в ReactJS, это позволит вам стать более востребованным специалистом. Если вы начинающий веб-разработчик и уже знаете с JavaScript и HTML, ReactJS — это следующая ступень развития.
В этой статье я поделюсь своим списком инструментов и библиотек, которые стоит изучить, чтобы стать хорошим JavaScript-разработчиком и использовать React.
Что такое React и почему его стоит изучать?
React — это js-библиотека для разработки пользовательского интерфейса, которую Facebook выкатила в мае 2013 года (и продолжает поддерживать). Она позволяет создавать динамический пользовательский интерфейс на JavaScript.
Поскольку React является одной из самых мощных js-библиотек, вы сможете сделать много хорошего, изучив её. React используют разработчики Amazon, PayPal, BBC, CNN и многих других технологических гигантов. Кроме того, библиотека достаточно гибкая и удовлетворяет любые потребности. Её можно использовать вместе с вашим любимым техническим стеком. React годится в том числе и для создания панелей данных, приложений для обмена сообщениями, приложений для социальных сетей, одностраничных web-приложений и личных блогов.
Если вы сможете осваивать React прямо в процессе работы над реальными проектами, это не только поможет вам быстро научиться, но и даст возможность похвастаться перед потенциальными работодателями.
1. npm
Понятно, что этот инструмент ни для кого не станет откровением. Просто я не мог обойти его стороной.
Для работы с JavaScript (включая библиотеку React) вам необходимо установить менеджер пакетов Node (npm). Как и менеджер пакетов, который поставляется с вашим дистрибутивом Linux (или Chocolatey для Windows или Homebrew для macOS), npm предоставляет команды для запроса программного репозитория и установки необходимых пакетов, в том числе компонентов ReactJS.
Вы можете установить Node.js (и npm вместе с ним) из репозитория вашего дистрибутива Linux. В Fedora или Red Hat Enterprise Linux нужно выполнить такое:
В Ubuntu или Debian — немного другое:
Если в репозиторий вашего дистрибутива не включен npm, посетите Nodejs.org, чтобы узнать, как установить Node.js и npm в этом случае.
2. Быстрый старт
Create React App — проект-шаблон для быстрого создания приложений на React. Раньше настройка рабочего проекта в React была утомительной задачей. Но с помощью этого инструмента вы можете за считанные секунды настроить конвейер сборки для frontend, структуру проекта, окружение и оптимизацию приложений для работы с нулевой конфигурацией. Вы можете сделать это с помощью одной команды. Более того, если вам нужна более сложная конфигурация, вы можете «извлечь» Create React App и редактировать его конфигурационные файлы напрямую.
Create React App распространяют с открытым исходным кодом под лицензией MIT. Его исходный код находится в репозитории GitHub.
Если вы не хотите использовать Create React App, можете посмотреть в сторону React Boilerplate и React Slingshot. Оба распространяются с открытым исходным кодом под лицензией MIT.
3. React Sight
React Sight — это популярный инструмент визуализации, который позволяет представить ваше приложение в виде иерархического дерева компонентов (например, в виде блок-схемы). Его можно подключить как расширение Chrome (для отображения информации о вашем приложении ещё понадобятся react devtools). Используя его интерфейс, вы можете добавить фильтры, чтобы сосредоточиться на компонентах, с которыми вам нужно больше всего взаимодействовать. Наведя на узлы, вы увидите информацию о текущем состоянии и пропсах компонента. React Sight очень полезен для отладки больших и сложных проектов.
React Sight выпускают под лицензией MIT, и вы можете получить доступ к его исходному коду в репозитории GitHub. Для его установки можно воспользоваться Chrome web store.
4. React Belle
React Belle — это настраиваемая библиотека React, содержащая компоненты для повторного использования: Toggle, Rating, DatePicker, Button, Card, Select и другие. Она призвана обеспечить удобство взаимодействия с пользователем. Компоненты оптимизированы для работы на мобильных устройствах и на настольных ПК. Они легко настраиваются и поддерживают стандарты доступности для людей с ограниченными возможностями (WAI-ARIA). Библиотека поддерживает различные темы, например, Belle и Bootstrap.
Belle выпускают под лицензией MIT, и вы можете получить доступ к его исходному коду в репозитории GitHub.
5. Evergreen
Evergreen, созданный поверх примитива React UI, представляет собой инфраструктуру UI, содержащую высококачественные компоненты, которые вы можете использовать для создания своего проекта. Этот инструмент разработчики любят за простой импорт компонентов.
Evergreen выпускают под лицензией MIT, и вы можете получить доступ к его исходному коду в репозитории GitHub.
6. Bit
Bit — онлайн-платформа и инструмент командной строки для публикации и обмена React-приложениями. Это один из лучших вариантов, если вы создаете и делитесь компонентами. Его маркетплейс — это площадка, где люди могут публиковать свои React-приложения и искать нужные им компоненты. Так что не обязательно изобретать велосипед каждый раз, когда вам нужно новое приложение или компонент React.
обеспечивает повторное использование кода;
повышает эффективность проектирования и разработки;
сохраняет консистентность UI и UX;
повышает стабильность проекта.
Bit выпускают под лицензией Apache 2.0, и вы можете получить доступ к его исходному коду в репозитории GitHub.
7. Storybook
Storybook — это инструмент для быстрой разработки UI-компонентов. Он позволяет просматривать библиотеку компонентов и отслеживать состояние каждого из них. С помощью StoryBook можно разрабатывать компоненты отдельно от приложения, что облегчает повторное использование и тестирование UI-компонентов.
Более того, API Storybook предлагает множество функций и упрощает настройку. Этот инструмент используют такие компании, как Coursera, Squarespace и Lonely Planet.
Storybook выпускают под лицензией MIT, и вы можете получить доступ к его исходному коду в репозитории GitHub.
Сначала установите Storybook, используя следующие команды:
Далее запустите команду run:
8. Formik
Formik помогает создавать и валидировать формы в процессе отладки, тестирования и анализа. Он позволяет создавать динамические формы, поэтому вам не нужно вручную изменять или обновлять состояние и пропсы её компонентов. Это делает разработку более быстрой и приятной.
Formik выпускают под лицензией MIT, и вы можете получить доступ к его исходному коду в репозитории GitHub.
9. Immer
Immer — это js-библиотека, которая позволяет сохранять иммутабельность при усложнении структуры проекта. Точнее, библиотека упрощает задачу обеспечения иммутабельности в вашем коде.
Вот некоторые из главных особенностей Immer:
Immer строго типизирован: это полезно, когда ваш объект состояния имеет тип.
Immer сокращает шаблонный код: большинство инструментов управления состоянием требуют от вас написания большого количества шаблонного кода. Immer позволяет писать меньше кода.
Immer позволяет использовать структуры данных JS: вы можете создавать иммутабельные состояния в Immer, используя базовые структуры данных JS.
Immer выпускают под лицензией MIT, и вы можете получить доступ к его исходному коду в репозитории GitHub.
10. React Proto
React Proto — инструмент создания прототипов приложений для разработчиков и дизайнеров. Он помогает планировать структуру вашего проекта, чтобы принимать решения заранее. Поэтому вы не тратите время на внесение изменений в процессе разработки. Этот инструмент особенно помогает людям, которые предпочитают дизайн кодированию: например, вы можете перетаскивать элементы вместо того, чтобы писать код для этого. Инструмент поможет пометить все выбранные компоненты и дать им имена, свойства и иерархию.
React Proto выпускают под лицензией MIT, и вы можете получить доступ к его исходному коду в репозитории GitHub.
Чтобы установить его, сначала форкните репозиторий. Затем установите зависимости с помощью:
Новый шаг в карьере
В принципе, вы и сами можете найти много материалов по JavaScript и React. Но, чтобы узнать больше об инструментах, о которых я упоминал в этой статье (а также о многих других), ознакомьтесь с репозиторием Awesome React на GitHub.
Изучив и внедрив эти инструменты, вы повысите производительность труда и сделаете своё резюме более привлекательным для работодателя.
На правах рекламы
Нужен сервер для ReactJS-приложения или для любых других целей? Наши эпичные серверы с современными и мощными процессорами от AMD прекрасно подойдут. Широкий выбор конфигураций с посуточной оплатой.
Создать Приложение React
Краткое описание приложения React
Запустите Приложение ReactJS
Доступ к приложению ReactJS в браузере
