Learning React: Beginners Haven Pt. 1

Вот некоторые из вещей, которые вам понадобятся при работе над реактивным проектом:

• Редактор кода — (я буду использовать VS Code)
• Node.js — это кроссплатформенная серверная среда выполнения JavaScript с открытым исходным кодом. Это позволяет разработчикам запускать код JavaScript на стороне сервера, а не только в браузере на стороне клиента. Он используется в рабочем процессе разработки React для управления зависимостями, запуска инструментов сборки и создания приложений с визуализацией на стороне сервера.
• npm — означает Диспетчер пакетов Node.
  Это инструмент командной строки, используемый для управления и обмена пакетами (также известными как библиотеки или модули) кода JavaScript. npm в основном используется для установки, совместного использования и управления пакетами и их зависимостями, которые необходимы для создания приложения Node.js.

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

• Мы вводим команду npx create-react-app в терминал редактора кода, чтобы начать настройку нашего приложения для реагирования.

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

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

Есть 2 основные папки public и src.

• общедоступная папка. В этой папке находится набор статических файлов, таких как шаблоны, логотипы и файлы JSON.
  Что еще более важно, у него есть файл index.html. Мы не будем использовать HTML в React для внесения изменений в пользовательский интерфейс, потому что это дает нам возможность создавать одностраничные приложения, что означает, что вся программа будет содержаться в одном HTML-файле.< br /> В index.html мы видим один элемент div с идентификатором root. Это связано с тем, что React будет помещать весь код в этот div, используя Javascript. Это довольно выгодно, потому что устраняет необходимость загружать и отображать множество файлов HTML для каждой отдельной страницы в нашем приложении.

• Папка src — эта папка является основным исходным каталогом, в котором мы найдем большую часть нашего кода. Основной файл, над которым мы будем работать, будет App.js.
  Внутри index.js файла мы создаем React Elements и направляем весь наш код в root одного HTML-файла. Весь код по большей части будет находиться в функции App в файле App.js.
• package.json — этот файл находится в корневом каталоге приложения React и содержит информацию о проекте и список всех зависимостей, установленных в приложении.
  Зависимости относятся к внешним программным компонентам или библиотекам, которые необходимы вашему приложению для правильной работы.
  Когда мы клонируем проект, package.json — это место, где вся информация будет доступна в основном для документации.

Теперь у нас есть основные файлы, которые нам нужны, и понимание того, что делает каждый файл. Чтобы запустить наше приложение на действующем сервере в нашем браузере, мы используем команду npm start, чтобы начать развертывание нашего реагирующего приложения.

Это развертывание размещено в вашем браузере по адресу https://localhost:3000/.

Базовый синтаксис (JSX, компоненты и реквизиты)

JSX (JavaScript XML) – это расширение синтаксиса для JavaScript, которое позволяет разработчикам писать HTML-подобный код непосредственно в коде JavaScript.

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

Компоненты — это автономные фрагменты кода, которые инкапсулируют определенные функциональные возможности и могут повторно использоваться во всем приложении. Они служат той же цели, что и функции JavaScript, но работают изолированно и возвращают HTML.

Компоненты являются строительными блоками приложения React, и, разбив наше приложение на более мелкие повторно используемые компоненты, мы можем создать более модульную и удобную в сопровождении кодовую базу.

Компоненты вызываются с использованием определенного синтаксиса, например <componentName />, в виде самозакрывающегося HTML-тега, который можно использовать повторно.

В обычном Javascript мы можем передавать аргументы в функцию напрямую func(arg), но мы не можем сделать это в React. Так появилась концепция Props.

Props – это способ передачи данных от родительского компонента к дочернему. Реквизиты позволяют компонентам быть более гибкими и пригодными для повторного использования, позволяя им получать данные из внешних источников, а не жестко кодировать их внутри компонента
Примечание. Используйте фигурные скобки при передаче чисел в реквизитах.

CSS в реакции

По умолчанию при создании приложения в React в каталоге присутствует App.css с предустановленными стилями. Мы можем добавить к этому или сделать совершенно новый CSS для нашего сайта.

• Мы можем импортировать этот CSS в наш файл, используя import ./nameOfFile.css.
• Другой способ сделать это: вместо того, чтобы называть каждый класс для каждого элемента HTML, мы можем напрямую передавать стили этим элементам, используя modules. Здесь стили, определенные в модуле CSS, будут применяться только к конкретному компоненту, в который он импортирован.

Условный рендеринг и тернарные операторы

Это одна из самых важных тем для понимания в React!

Тернарные операторы — это краткий способ написания условных операторов операторов в JavaScript, и их также можно использовать в React. В React вы можете использовать тернарные операторы для условного рендеринга контента на основе определенного условия. Тернарные операторы — полезный инструмент для написания лаконичного и удобочитаемого кода в React.

Синтаксис: { condition ? true-case : false-case }

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

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

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

Списки в реакции

В React мы можем выполнять все операции со списком, как в Javascript. Мы можем рендерить списки данных, используя метод map(). Метод map() позволяет преобразовать массив данных в список элементов React, которые можно отобразить в DOM. Мы можем использовать это, чтобы возвращать новый пользовательский интерфейс, когда он проходит через список.

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

На этом первая часть этой серии React завершается. Теперь мы знаем, как настроить и запустить проект React. Мы также рассмотрели основы приложения React, включая JSX, компоненты, списки и CSS. Мы также рассмотрели некоторые важные концепции, которые имеют решающее значение для нашего прогресса, такие как тернарные операторы и условный рендеринг.