Динамический рендеринг компонентов в React
2 года назад·1 мин. на чтение
В этой статье рассмотрим, как динамически добавлять или удалять компоненты в react.
Во-первых, нам нужно создать два новых компонента, чтобы мы могли использовать их для динамического рендеринга.
// userA.js import React from "react"; function UserA() { return ( <div> <h1>This is user A</h1> </div> ); } export default UserA;
// userB.js import React from "react"; function UserA() { return ( <div> <h1>This is user B</h1> </div> ); } export default UserB;
Создание динамического компонента
Теперь нам нужно создать динамический компонент, который поможет нам динамически визуализировать другие компоненты на основе пропсов.В приведенном выше коде мы сначала импортировали два компонента (// Dynamic.js import React from "react"; import UserA from "./userA"; import UserB from "./userB"; const components = { usera: UserA, userb: UserB }; function DynamicComponent(props) { const SelectUser = components[props.user]; return <SelectUser />; } export default DynamicComponent;
UserA
, UserB
), а затем добавили их в объект components
.
Внутри DynamicComponent
мы создали переменную SelectUser
и вернули ее. Таким образом, если мы передадим usera
в качестве пропса, то отрендерится компонент UserA
. Если мы передадим userb
в качестве пропса, отрендерится компонент UserB
.
Использование динамического компонента
Давайте теперь воспользуемся нашим динамическим компонентом, импортировав его.// App.js import React, { useState } from "react"; import DynamicComponent from "./Dynamic"; function App() { const [user, changeUser] = useState("usera"); return ( <div> {/* изначально отрендерится компонент UserA */} <DynamicComponent user={user} /> <button onClick={() => changeUser("usera")}>Switch user-a</button> <button onClick={() => changeUser("userb")}>Switch user-b</button> </div> ); } export default App;
Структура файлов в React-приложении: Основы Организации Кода
2 месяца назад·2 мин. на чтение
В статье рассматриваются основные принципы структурирования файлов, правила и лучшие практики, способствующие поддерживаемости, масштабируемости и читаемости кода в React-приложениях.
React – это JavaScript-библиотека, которая позволяет разработчикам строить мощные и масштабируемые веб-приложения. Однако, как и в любом проекте, эффективная организация кода играет ключевую роль в обеспечении чистоты, читаемости и управляемости приложения. В этой статье мы рассмотрим важные аспекты структуры файлов в React-приложении.
1. Основные Компоненты
В центре любого React-приложения находятся компоненты. Они представляют собой строительные блоки приложения, отвечающие за отображение пользовательского интерфейса. Обычно, компоненты разделяют на функциональные и классовые. Функциональные компоненты – это простые функции, возвращающие JSX, тогда как классовые компоненты обладают состоянием и методами жизненного цикла. Структура файлов для компонентов может выглядеть следующим образом:В данном примере/src /components Button.js Header.js /common Input.js Card.js /containers HomePage.js UserProfile.js
/components
содержит общие компоненты, такие как кнопки и заголовки, а /containers
– компоненты, представляющие отдельные страницы приложения.
2. Работа с Состоянием и Хранилищем
Управление состоянием в React-приложении может осуществляться с использованием встроенногоuseState
для функциональных компонентов или this.state
для классовых компонентов. Если приложение имеет сложное состояние, разумно использовать контекст (Context) или библиотеки управления состоянием, такие как Redux.
Структура файлов для работы с состоянием может выглядеть так:
Здесь/src /store index.js /reducers userReducer.js appReducer.js /actions userActions.js appActions.js
/store
содержит файлы, связанные с управлением состоянием, такие как редьюсеры и действия.
3. Маршрутизация и Навигация
Во многих веб-приложениях присутствует необходимость в маршрутизации – переходе между различными страницами. Для этого обычно используется библиотека React Router. Структура файлов для маршрутизации может выглядеть так:В данном примере/src /pages Home.js About.js /profile UserProfile.js App.js index.js
/pages
содержит отдельные страницы приложения, а App.js
может быть местом, где настраивается маршрутизация.
4. Стили и Ресурсы
Вопрос стилей часто стоит особняком. React позволяет использовать CSS, SCSS, или даже инлайн-стили. Для удобства, структура файлов стилей может выглядеть следующим образом:Это позволяет легко находить и редактировать стили, связанные с конкретными компонентами или страницами./src /styles main.css /components Button.css Header.css /pages Home.css UserProfile.css
5. Тестирование и Документация
Хорошая структура файлов также облегчает тестирование и документирование кода. Обычно, тесты хранятся в отдельной директории, а документация может быть включена внутри файлов или храниться в отдельной папке./src /tests Button.test.js UserProfile.test.js /docs ComponentDocs.md APIReference.md