Teacher: Ohans Emmanuel Astro Beginner Project:

• https://github.com/understanding-astro/astro-beginner-project
• https://astro-beginner-project.vercel.app/

• npm create astro@latest
• empty project YES
• Install dependencies YES
• npm run start

npm run build
npm run preview

<style define:vars={{gradientFrom, gradientTo}}>: Passes serializable server-side variables into a client-side style elementgit log

Code before doing the Astro.glob

<ol>
  <li class='blogs__list'>
    <a class='blog__link' href='blogs/typescript-is-the-new-javascript'>
      Typescript is the new JavaScript
    </a>
  </li>
  <li class='blogs__list'>
    <a class='blog__link' href='blogs/rust-javascript-tooling'>
      Why Rust is the future of JavaScript tooling
    </a>
  </li>
  <li class='blogs__list'>
    <a class='blog__link' href='blogs/sleep-more'>
      Why you should sleep more
    </a>
  </li>
</ol>

Images will be optimized in the src/ folder, but not in the public folder

# About us

[A cat](https://www.photos.com/cat.png)
[A cat](/cat.png) This will refer to public/cat.png

<ul>
  { data.map((user) => { const { gender } = user // Non-binary return (
  <li>
    <span>{`${user.first_name} ${user.last_name}`}</span>
    <span>{gender == 'Non-binary' ? 'Non-binary 😎' : '😃'}</span>
    // Only shows if it is true
    <span>{gender == 'Non-binary' && 'Non-binary 😎'}</span>
  </li>
  ) }) }
</ul>

• <div class="astro"></div> ----> ASTRO

• <div className="jsx"></div> ----> JSX

• <div data-value="astro"></div> ----> ASTRO

• <div dataValue="jsx"></div> ----> ASTRO

• // This is a javaScript comment in astro.js ----> ASTRO

• <!-- This is an HTML style comment in astro.js --> ----> ASTRO

• {/** This is a JavaScript style comment in astro.js */} ----> ASTRO

JavaScript style comment won't show up in the browser or development mode, so if you want to write comments for developers only, stick to JS comments

npx local-web-server installs a local web server

<mini-island>
  <p>Hello future island</p>
  <script type="module">
    console.log('THIS IS A WARNING FROM AN ISLAND')
  </script>
</mini-island>

<mini-island client:visible>
  <p>Hello future island</p>
  <template data-island>
    <script type="module">
      console.log('THIS IS A WARNING FROM AN ISLAND')
    </script>
  </template>
</mini-island>

npx astro add react Install's React Astro integration

<UpvoteContent client:load />

<UpvoteContent client:only />

<UpvoteContent client:idle />

<UpvoteContent client:visible />

<UpvoteContent client:media="(max-width: 30em)" />

npx astro add vue Install's Vue Astro integration

npm install nanostores @nanostores/react @nanostores/vue Install's Nanostores and nanostores react vue integration

data() {
  // data properties used in the UI template
  return {
    upvoteCount: 0,
    maxUpvoteCount: 50,
  };
},
methods: {
  // method called when you click the upvote button
  upvote() {
    if (this.upvoteCount < this.maxUpvoteCount) {
      this.upvoteCount++;
    }
  },
},

<DefaultIslandLayout>
  <!-- Render our framework component -->
  <UpvoteContent client:load label="Click">
    <em slot="description">An upvote counter created using React</em>
    <ul slot="awesome">
      <li>Youa re awesome</li>
      <li>The tutor is awesome</li>
    </ul>
  </UpvoteContent>
  <UpvoteContentVue client:load>
    <em slot="description">An upvote counter created using Vue</em>
    <ul slot="awesome">
      <li>Youa re awesome</li>
      <li>The tutor is awesome</li>
    </ul>
  </UpvoteContentVue>
</DefaultIslandLayout>