| 1 |
--- |
| 2 |
// Your component script here! |
| 3 |
import Banner from '../components/Banner.astro'; |
| 4 |
import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx'; |
| 5 |
const myFavoritePokemon = [/* ... */]; |
| 6 |
const { title } = Astro.props; |
| 7 |
--- |
| 8 |
<!-- HTML comments supported! --> |
| 9 |
{/* JS comment syntax is also valid! */} |
| 10 |
|
| 11 |
<Banner /> |
| 12 |
<h1>Hello, world!</h1> |
| 13 |
|
| 14 |
<!-- Use props and other variables from the component script: --> |
| 15 |
<p>{title}</p> |
| 16 |
|
| 17 |
<!-- Include other UI framework components with a `client:` directive to hydrate: --> |
| 18 |
<ReactPokemonComponent client:visible /> |
| 19 |
|
| 20 |
<!-- Mix HTML with JavaScript expressions, similar to JSX: --> |
| 21 |
<ul> |
| 22 |
{myFavoritePokemon.map((data) => <li>{data.name}</li>)} |
| 23 |
</ul> |
| 24 |
|
| 25 |
<!-- Use a template directive to build class names from multiple strings or even objects! --> |
| 26 |
<p class:list={["add", "dynamic", {classNames: true}]} /> |
| 27 |
|
| 28 |
<!-- From https://docs.astro.build/en/core-concepts/astro-components/ --> |
| 29 |
|
