Learn extra at:
Astro’s variable scope
Once you want front-end interactivity, you’ll be able to set it up like we’ve finished utilizing a Reactive framework or with vanilla JavaScript. Both means, Astro works on the server aspect. A great way to drive this level house is to take a look at Astro’s assist for variables that may be inserted into the HTML templates. For instance, we may create a beginning worth in index.astro like so:
---
import ReactCounter from '../parts/ReactCounter.jsx';
import SvelteCounter from '../parts/SvelteCounter.svelte';
const startingValue = Math.flooring(Math.random() * 100);
---
// …
<h3>That is on the server: {startingValue}</h3>
This shows the random worth generated on the server on the consumer web page. Bear in mind, although, that it’s all finished on the server. If we wished to make use of this worth on the consumer, we may move it into the parts as a parameter. For instance, we may make the Svelte part settle for a parameter like so:
<script>
export let startingValue;
let depend = startingValue;
operate handleClick() {
depend += 1;
}
</script>
<div>
<p>Depend: {depend}</p>
<button on:click on={handleClick}>Increment</button>
</div>
Discover the export let startingValue syntax, which is Svelte-speak for exposing a pass-in parameter to its mother or father. To make use of this again on the index web page you’d kind:
