Во время стажировки в DMS Software Engineering я многому научился. Одним из них является React JS, который используется для разработки внешнего интерфейса текущего проекта, над которым я работаю, и я действительно влюбился в него.
React - это библиотека JavaScript с открытым исходным кодом, созданная Facebook для интерфейсной разработки. React можно использовать как основу при разработке одностраничных приложений. Его действительно легко изучить по сравнению с другими библиотеками JS и фреймворками, у него есть огромное сообщество по всему миру.
Начиная
Что мне нравится в React JS, так это то, что мы можем начать работу над проектом React, выполнив несколько простых шагов. Для начала нам необходимо сначала установить Node JS. Итак, он идет с npm. После их установки откройте терминал и компакт-диск, в котором вы хотите создать проект React.
Затем запустите команду npx create-react-app my-app create-response-app, которая поможет нам легко создать приложение React, а my-app - это имя нашего проекта. Теперь откройте проект my-app в своей любимой среде IDE.
Теперь откройте терминал и запустите команду npm start, и она запустит приложение React. Мы можем перейти на localhost: 3000 в браузере, чтобы проверить приложение.
Структура проекта выглядит так. Откройте файл App.js. Это наша отправная точка. App.js включает вызов функции App () и возвращает что-то вроде HTML. Это то, что мы видим в нашем браузере. Попробуйте очистить весь HTML-код, добавить <div>, добавить HTML-код внутри этого div и сохранить. Он автоматически перезагрузит страницу новым контентом, который вы только что добавили.
JSX
На самом деле то, что мы видели раньше, не является HTML. Он называется JSX и расшифровывается как JavaScript XML. JSX позволяет нам легко писать пользовательский интерфейс, и он очень похож на синтаксис HTML.
Одно различие, которое вы можете увидеть здесь, между HTML и JSX заключается в том, что вместо атрибута class в JSX мы используем className для определения класса для тегов HTML.
Реагировать на хуки
Есть два типа компонентов, которые мы можем создать в React: компоненты класса и функциональные компоненты.
Компоненты класса React используют класс ES6 и расширяют класс Component в библиотеке React. Компоненты класса React также называются компонентами с отслеживанием состояния, поскольку они реализуют состояние и логику компонента React. Это означает, что компоненты класса React имеют различные методы жизненного цикла, которые вызывают один и тот же компонент. И мы можем сохранить «состояние» локально в нашем компоненте, что имеет некоторые интересные последствия.
Функциональные компоненты React, также называемые компонентами без сохранения состояния, являются базовыми функциями JavaScript. У них нет методов состояния или жизненного цикла. Они просто принимают данные и отображают их.
Функциональные компоненты React намного проще, чем компоненты классов. Но они не могут работать так же, как упомянуто выше. Здесь на сцену выходит React Hooks. Перехватчики React могут использоваться для жизненного цикла, состояния и совместного использования невизуальной логики внутри функционального компонента. И это упрощает работу с React JS.
Вот почему я так люблю React JS. Если вы найдете что-то интересное, пожалуйста, поделитесь. Если вы раньше не работали с React JS, попробуйте ☺
