Распространенным заблуждением является то, что React — это фреймворк, но это не так. React — это популярная JS-библиотека для создания пользовательского интерфейса.
Давайте углубимся в изучение React.
- Создать приложение React
Для создания приложения реакции
требуется команда npx create-react-app react-app
. И это запустит процесс создания одностраничного веб-приложения.
2. Просмотр каталога и запуск приложения
После создания реагирующего приложения будет создан каталог с именем приложения в текущем каталоге.
react-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.js └── setupTests.js
С помощью команды «npm start» приложение будет запущено, и мы увидим логотип приложения React по умолчанию.
Поздравляем! Вы сделали свое собственное приложение. Пусть путешествие начинается.
3. Изучите реакцию
Подробные инструкции по React можно найти в документации React. Также существует множество блогов и видеороликов на YouTube и нескольких онлайн-платформах. Также есть профессиональные курсы на Coursera и Udemy. У тех, кто хочет изучить React, есть огромные возможности.
4. Файлы .js и .jsx в React
Прежде всего, .js и .jsx оба являются расширениями компонентов React. По сути, JS — это стандартный javascript, а JSX — это HTML-подобный синтаксис, который вы можете использовать с React, чтобы упростить его. Веб-браузер не понимает синтаксис .jsx или .js. Что бы это ни было, в конечном итоге внутри браузера работает JavaScript.
5. Компоненты
Меньший блок приложения React можно назвать компонентом. Например: раздел «Заголовок» может называться как один компонент, аналогично раздел «Контакты» также может называться как один компонент. Чтобы упростить разработку приложений, создаются компоненты и, наконец, объединяются с родительским компонентом.
6. реквизит
props означает свойства, которые являются специальным ключевым словом в React. Он используется для передачи данных от родителя к дочернему. Из дочернего компонента с помощью this.props можно получить доступ к данным из родительского компонента.
7. Реальный/фактический DOM против виртуального DOM
DOM означает объектную модель документа. По сути, это пользовательский интерфейс приложения для документов XML и HTML. DOM динамически обновляется при изменении пользовательского интерфейса. Виртуальный DOM — это виртуальное представление реального DOM. Как и Real DOM, он также поддерживает древовидную структуру с узлами.
8. событие в React
Событие — это действие, подобное нажатию пользователем клавиши. щелчок мышью и т. д. В React формат имени события должен быть в camelCase. Например, onClick={handleClick}, где имя события handleClick имеет формат camelCase.
9. списки в React
С помощью обычного JS мы можем создавать наши списки в React. В React доступ к спискам осуществляется через функцию map().
Пример:
const students = [Arif, Bablu, Camelia, Dalia];
const studentsName = () => {
const single = students.map((name)) => <li key={name}>{name}</li>
);
return (
<ul>{single}</ul>
);
}
Здесь в списке ключ должен использоваться как уникальный идентификатор. В противном случае он выдаст некоторое предупреждение, как это рекомендуется в React.
10. Редукс
Redux — это библиотека JS с открытым исходным кодом, которая обычно используется с такими библиотеками, как React или Angular, для создания пользовательского интерфейса. Он в основном используется для управления состоянием приложения.
