Заметки для начинающих: введение в ReactJS

Что такое React?

Во время изучения компьютерного программирования я постоянно слышал о таких фреймворках, как React, Vue и Angular. Когда я впервые изучал HTML и CSS, они постоянно появлялись из ниоткуда, и я изо всех сил старался их избегать. Прошло почти 5 лет с тех пор, как я впервые начал это путешествие, и теперь я могу сказать, что только начал понимать, насколько полезными и важными могут быть эти фреймворки.

Итак, для начала давайте сначала разберемся, что такое фреймворки. Думайте о веб-приложении как о доме. Чтобы построить дом, вам понадобятся такие материалы, как дерево и бетон. Скорее всего, вы просто купите эти материалы у производителя и на складе пиломатериалов вместо того, чтобы рубить деревья и делать бетон с нуля. Когда мы думаем об этом с веб-приложениями, вы можете создавать каждый аспект самостоятельно, но зачем вам это, если есть надежные «производители кода» или фреймворки кода, которые уже имеют базовую функциональность, которую вы ищете? Это основные принципы, на которых основаны фреймворки.

Теперь мы можем начать понимать основное использование React и то, как мы можем использовать его в наших приложениях.

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

При написании статических веб-сайтов у вас может быть панель навигации на каждой странице, например, ваши контакты, информация и домашняя страница. Для этого вы можете скопировать код панели навигации и поместить его на каждую из этих HTML-страниц. С React вам просто нужно создать один компонент панели навигации, а затем просто вызывать его на каждой странице. Вам не нужно писать код или копировать весь блок и вставлять его каждый раз. Как вы можете сказать, реакция поможет сохранить ваш код чистым и легким для чтения, а также обеспечит действительно хорошее масштабирование вашего приложения.

Насколько он популярен по сравнению с другими фреймворками?

Согласно опросам разработчиков переполнения стека и множеству различных блогов в Интернете, React является одним из наиболее широко используемых и востребованных фреймворков JavaScript. С учетом того, что VueJS занимает 16%, а Angular — 12%, React оказывает большое влияние — чуть более 21%.

Где мы можем найти это?

React можно найти в некоторых из наиболее важных и популярных веб-приложений, используемых в 2022 году. Среди них Facebook, Airbnb, Wix, Walmart и Skype, и это лишь некоторые из них. По данным careerkarma.com, около 8000 компаний предпочли React другим фреймворкам, таким как VueJS.

Как мы это используем?

Давайте начнем с понимания некоторых из самых основных принципов React. Для начала давайте поговорим о файловой структуре и необходимых битах, необходимых для запуска веб-страницы.

App.js

Большинство реагирующих приложений будут иметь файл App.js, этот файл действует как компонент, который содержит все остальные компоненты в большинстве приложений. В демонстрации мы не будем касаться того, как мы обычно используем этот файл, но в следующей мы добавим другие элементы, которые помогут вам понять это немного больше.

index.html и index.js

Index.html — это страница, которая позволит вам отображать ваше реагирующее приложение. Большинство реагирующих приложений будут иметь этот файл, и единственное, что вам нужно в нем, это следующий код:

Div с «root» означает, что это корень реактивного приложения, здесь все начинается. Index.js содержит код, который будет отображать компоненты и другой код javascript, а также действует как «парадная дверь» для вашего реагирующего приложения.

Теперь, когда мы разобрались с основными файлами, необходимыми для реагирующего приложения, давайте углубимся в компоненты. Время для аналогии. Если бы мы посмотрели на шахматную доску, то увидели бы 3 основные вещи. Шахматные фигуры, доска и квадраты. Плата сама по себе является компонентом, на котором есть несколько других компонентов, поэтому мы можем думать о ней как о файле app.js. Одно поле было бы компонентом, вызываемым много раз, и такие фигуры, как ферзь и король, были бы компонентами. Для фигур ферзь с каждой стороны будет одним компонентом, вызываемым дважды, но они будут скорректированы, чтобы иметь разные свойства, такие как способ игры и цвет. Теперь представьте, что квадраты шахматной доски — это панель навигации на каждой странице приложения, это одно и то же, но повторяется много раз. Мы можем использовать тот же образ мышления, чтобы понять, как мы можем организовать различные части веб-приложения с помощью реакции.

Если бы мы разбили компонент, чтобы вернуть простой элемент на странице, код выглядел бы примерно так. Можете ли вы угадать, что будет отображаться на веб-странице?

Если бы вы сказали текст на теге ‹h1›, вы были бы правы! Сначала мы создаем файл компонента и помещаем в функцию что-то, что мы хотим отобразить на странице. Как вы видите в файле index.js, мы должны сначала импортировать компонент из файла component.js, а затем вызвать метод root.render(). Root.render отобразит HTML-код внутри компонента, который мы создали в компоненте Title.

Для более глубокого погружения, пожалуйста, подпишитесь на мой канал YouTube здесь, чтобы мы могли пройтись по этому вопросу более подробно.

Предпосылки

Среднее понимание HTML, CSS и Javascript.
Создайте учетную запись с песочницей кода, я бы рекомендовал использовать учетную запись GitHub или создать ее, если у вас ее еще нет.
Разветвите проект, чтобы поиграть с ним самостоятельно.

Ниже представлено демонстрационное видео и готовый компонент реакции. Следуйте инструкциям и попробуйте добавить другие компоненты! Здесь — ссылка на песочницу кода, я рекомендую войти в систему с помощью своей учетной записи GitHub.

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

Некоторые рекомендуемые ресурсы для изучения React и полнофункциональной веб-разработки перечислены ниже.

Надеюсь, этот пост помог вам лучше понять основы фреймворков ReactJS и JavaScript! В моем следующем посте мы углубимся в ReactJS, чтобы узнать о хуках, свойствах и многом другом для создания работающего блога!