Освоение React День 1: Введение в предварительные условия и JSX

Присоединяйтесь ко мне в этом путешествии, чтобы освоить все тонкости React js.

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

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

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

Необходимые условия для начала:

Если вы начинаете работать с react, я предполагаю, что у вас есть хорошие знания html, CSS и JavaScript. Если вы сомневаетесь в своих навыках JavaScript, я составил дорожную карту для изучения JavaScript:

Полное руководство по JavaScript: От изучения до заработка

Вам нужно хорошо понимать ES6, потому что вы будете использовать многие из них в react.

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

Введение в React:

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

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

С помощью React мы можем создавать компоненты по отдельности, например, общая веб-страница будет состоять из следующих компонентов:

Эта веб-страница имеет четыре компонента, и каждый компонент может быть разработан отдельно и использоваться, когда это необходимо. Мы можем сделать один компонент navbar и footer и использовать его на всех наших страницах без повторения кода.

Создание первого приложения React:

Для того чтобы создать свое первое приложение react, есть два способа:

• create-react-app (надежный)
• Vite (более быстрый и гибкий)

Вы можете посмотреть учебник на YouTube о том, как создать приложение react, используя оба этих способа.

После создания приложения вы увидите структуру каталогов с множеством папок и файлов.

При создании приложения react также устанавливается несколько других полезных инструментов, а именно:

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

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

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

Что такое JSX?

Для того чтобы начать свой путь с react, вам необходимо понять JSX, что означает JavaScript XML, это синтаксис для написания html-кода с помощью JavaScript.

JSX - это не отдельный язык, а скорее способ написания кода, который преобразуется транспондером, таким как Babel, в обычный JavaScript.

Это не только делает код коротким, но и выглядит как HTML, что облегчает его понимание. Существует множество вариантов поддержки JSX, вы можете найти компоненты bootstrap, написанные на JSX, или преобразовать простой HTML в JSX с помощью онлайн-конвертера.

Так что обязательно подписывайтесь на мою почту и оставляйте комментарии, если у вас есть какие-либо предложения, а пока adios, да пребудет с вами сила ;)