Build React Apps without JavaScript using Astro - Static Web App Tutorial

Поделиться
HTML-код
  • Опубликовано: 29 сен 2024

Комментарии • 68

  • @colbyfayock
    @colbyfayock  2 месяца назад

    Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

  • @TrostCodes
    @TrostCodes 3 года назад +9

    Ah I'm excited to get into this! You read my mind, man. Astro seems really great, thanks for putting this together!

    • @colbyfayock
      @colbyfayock  3 года назад

      np hope it helps!

    • @saurabhhchavan
      @saurabhhchavan 3 года назад +1

      I am also excited to get into this✨let’s go 💪🚀

  • @matthewwu4890
    @matthewwu4890 3 года назад +4

    Super clear tutorial, really well done. Would love to see more Astro content, since there isn't much out there right now. Thanks, Colby!

  • @randomdamian
    @randomdamian 3 года назад +2

    AUDIO NEEDS TO BE LOUDER! The volume I have now is basically party mode when watching Netflix but listening to your is like almost slight whispering/talking.

    • @colbyfayock
      @colbyfayock  3 года назад +1

      thanks for the feedback

    • @randomdamian
      @randomdamian 3 года назад

      @@colbyfayock the best idea is to get a small clip from RUclips for example LTT (his volume is good) and import into your video before rendering. Hit playback and watch the audio monitor. As far as I'm aware it always should be on the green part when speaking

    • @fadilnatakusumah195
      @fadilnatakusumah195 3 года назад

      I thought I was the only one. man my volume was 100% and still can't hear it properly

  • @bozzhik
    @bozzhik Год назад

    I'm making my portfolio now and I'm interested in Astro, so I need the state of the item highlighted in the Header to be transmitted between the pages, but it seems that this cannot be done. Is it so?

    • @colbyfayock
      @colbyfayock  Год назад

      i haven't done this (this would be a good video) but check this out: docs.astro.build/en/core-concepts/sharing-state/

  • @iBSDTV
    @iBSDTV 3 года назад +1

    Is the JS scoped to the page the component is on, or bundled with the entire app? This could get real heavy if there's no way to split/scope components.

    • @colbyfayock
      @colbyfayock  3 года назад +1

      hey! good question. the JS is served in their own bundles, from my understanding it will only be served where the component is used, you can look in the network tab to see how that's actually working in practice

  • @ahmaat19
    @ahmaat19 2 года назад

    Your videos are helpfull, I watch every new one. But I have a recommendation for audio valume, please could you rise it up I mean the voice.
    Thank you.

  • @toddribnek6660
    @toddribnek6660 3 года назад +1

    Isn't this basically what svelte does? All the js on the build? Also, besides the static generation how does this compare to Vite? I like the idea of defining your own build process but I gotta have that hot reload unless using live server vs code extension

    • @colbyfayock
      @colbyfayock  3 года назад

      hey good question! I haven't played around with Svelte enough to give an educated answer on that, similar with Vite, but they're both on my list of things I need to get familiar with. agreed with hot reload, I would imagine they'll try to solve those things as time progresses 🤔still early beta so lots more in store

  • @colbyfayock
    @colbyfayock  Год назад

    Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

  • @imLOSTirl
    @imLOSTirl 3 года назад +1

    Great video! First video of yours I've come across and it was an instant sub.
    Looking forward to future videos.

  • @przemysawpogorzelec4901
    @przemysawpogorzelec4901 2 года назад

    Change the mic dude, I can barely hear you!

  • @ilug5197
    @ilug5197 2 года назад

    This is react server components but for js universe

  • @elotfreelancing1791
    @elotfreelancing1791 2 года назад

    brother you explain very well and very clear.

  • @gdk111
    @gdk111 3 года назад +1

    Really interesting , thanks

  • @pafringo
    @pafringo 3 года назад +1

    Great video! Really interested in the concepts that Astro is bringing

  • @ahmadnoroozi8101
    @ahmadnoroozi8101 3 года назад

    doc page give me 404 any help ? xD

    • @colbyfayock
      @colbyfayock  3 года назад

      hey you mean the Astro docs? which page?

  • @foreach1
    @foreach1 2 года назад +1

    Love how you explain!

  • @droidhackerr
    @droidhackerr 2 года назад

    Great tutorial.
    Nice shirt

  • @neilcartwright6369
    @neilcartwright6369 2 года назад +1

    Nice one. Extremely clear and helpful.

    • @colbyfayock
      @colbyfayock  2 года назад

      Thank you! Glad to hear that 😁

  • @ouss
    @ouss 3 года назад

    Where is part 2 of "Manage Subscriptions with Gatsby, Netlify, Stripe, & Hasura"?

    • @colbyfayock
      @colbyfayock  3 года назад +1

      spacejelly.dev/colbyashi-maru/

    • @ouss
      @ouss 3 года назад +1

      @@colbyfayock thanks

  • @EmmanuelNgwandu
    @EmmanuelNgwandu 3 года назад +1

    Thanks for sharing, do you literary mean that I can use more than one framework in a single project like Svelte and React? I see renderer is an array

    • @EmmanuelNgwandu
      @EmmanuelNgwandu 3 года назад +1

      I have just tried my theory, and it works...

    • @colbyfayock
      @colbyfayock  3 года назад +1

      @@EmmanuelNgwandu yes! though you just want to be careful. if you're statically rendering it without shipping JS, then you can do that with no impact on the end user, but of course if you hydrate it will ship all libraries which would probably be a lot

    • @EmmanuelNgwandu
      @EmmanuelNgwandu 3 года назад +1

      @@colbyfayock Thanks, I understand the impact of shipping more JS

    • @SandwichMitGurke
      @SandwichMitGurke 3 года назад +1

      now you can replace your old react apps component by component with svelte :P

    • @colbyfayock
      @colbyfayock  3 года назад

      @@SandwichMitGurke 😂 there you go

  • @paulallies
    @paulallies 2 года назад

    Nicely explained!

  • @codernerd7076
    @codernerd7076 2 года назад

    Please update it for Astro 1.0!

    • @colbyfayock
      @colbyfayock  2 года назад

      Thanks for the heads up. Unfortunately RUclips doesn't allow someone to modify an existing video

    • @codernerd7076
      @codernerd7076 2 года назад

      @@colbyfayock ... you can make a new video (if you want and think the topic got the views to make it worthwhile) and link it in the desc. and those tiny popups that RUclips allows you to add :)

  • @hieudoan9113
    @hieudoan9113 3 года назад +1

    awesome presentation :)

  • @dylanngo4454
    @dylanngo4454 2 года назад

    Thanks

  • @HarshithJV
    @HarshithJV 3 года назад

    How much improve performance can be expected from static rendering tools like this for dynamic websites that fetches external resources like maps, images, videos, etc?

    • @colbyfayock
      @colbyfayock  3 года назад +1

      i dont have any stats but it really depends on the application. with Astro particularly, part of the draw is avoiding shipping framework JavaScript just to use it as a sort of templating language. static generally though helps load the experience in the browser faster with a pre-rendered page

  • @alexotoous
    @alexotoous 2 года назад

    I am experimenting with a couple of websites use cases with Astro and I think Next JS by far provides a better developer experience if you may ask

    • @colbyfayock
      @colbyfayock  2 года назад

      Next.js definitely has a great DX, its also a bit more mature. both have their pros and cons though. i'm excited for Astro's future!

  • @AsdAsd-wg6ks
    @AsdAsd-wg6ks 3 года назад

    Can u make tutorial on how to use react-flow node map and render it in astro

  • @ryanhuellen1286
    @ryanhuellen1286 3 года назад +1

    Your shirt is awesome.

    • @colbyfayock
      @colbyfayock  3 года назад

      thank you :) not available right now but it's here: www.bonfire.com/black-lives-matter-css/ - looks like you can get a nice sweatshirt though www.bonfire.com/blm-css/

  • @BuyHighSellLo
    @BuyHighSellLo 3 года назад +2

    Nice video! What extensions/theme are you using in VS code btw?

    • @colbyfayock
      @colbyfayock  3 года назад +1

      thank you :) anything particular? i made this video before ruclips.net/video/OIWVJj9yRbA/видео.html
      but some of the stuff i use is Rainbow Brackets, Rainbow Indent, my theme when recording is Night Owl