Components are one of the most important and useful features of Reflex.
Components are provided by the
@reflexjs/components package and is aleady included in the
A component is a small reusable piece of content that you can use to build your site. In Reflex we have made it easy for you to build and theme components.
Creating and styling component is as easy as writing HTML.
If you know HTML you know how to use this.
Let's take a look.
In HTML, to create a button you use the
button tag. In Reflex, you use
Button. In HTML, to create a heading, you use
h1, in Reflex you use
H1. See what we did there?
Every HTML tag has an equivalent Reflex component. We have built components for almost all HTML tags.
Start with a simple
Let's turn this into a Reflex/React component.
This is a button but with power!
Styling is a easy as adding attributes to the component, just like
<Button bg="tomato">A button</Button>
Now turn this into a fancy button.
That was easy. You are now ready to build a hero.
Note: Grid, Flexbox, Container and Image are special components we added to Reflex. You can learn more about using images here.