Dynamic for React
Craft interactive and engaging user experiences for your Modyo applications with the Dynamic Framework's robust collection of pre-built React components.
Our components are designed to simplify your development workflow and empower you to build modern and scalable microfrontends.
Explore the comprehensive catalog of React components and access detailed reference on the official Dynamic Framework React component documentation.
Getting Started with React Components
To begin using React components, follow these steps:
-
Install the React Base Template: Open your terminal and run the following command:
npx @modyo/cli@latest get dynamic-react-base-template
-
Navigate to Component File: Once the project is installed, open the
src/components/MyComponent.tsx
file. -
Create Your React Component: Let's create a simple list component by replacing the code from
MyComponent.tsx
with this:import { DList, DListItem } from '@dynamic-framework/ui-react'; export default function MyComponent() { const items = ['Item 1', 'Item 2', 'Item 3']; return ( <div id="my-component"> <DList> {items.map((item) => ( <DListItem key={item} >{item}</DListItem> ))} </DList> </div> ); }
-
Run the Project: Start the development server using the command
npm start
.
Styling Your React Components
Dynamic Framework makes it easy to style your React components with a:
-
Component Properties: Many components offer properties to control their appearance (e.g.,
color
,size
, etc.). Refer to the Dynamic Framework React component documentation for details. For example you can change the color palette of the component by assigning a theme property.<DListItem key={item} theme="primary">{item}</DListItem>
-
CSS Classes: Use the CSS classes from Dynamic Framework or your own custom CSS to style the component elements directly.
:root { // --bs-danger-100: #45e031; --custom-widget-text-color: #fff; --custom-widget-background-color: #cb9832; } #my-component .list-group-item{ color: var(--custom-widget-text-color); background-color: var(--custom-widget-background-color); }