Add tutorial

[ranile]

Description

Fixes #1384

Very inspired by Kotlin React hands-on guide.

This tutorial is based on function components/hooks. I don't know if it's worth using struct components (after #1961), function components will be part of up-coming release anyway.

Checklist

• I have run cargo make pr-flow
• I have reviewed my own code
• I have added tests

---

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

• #1384: Create full feature battery-included tutorial for yew

---

[github-actions]

Visit the preview URL for this PR (updated for commit 5982ca1):

https://yew-rs--pr1968-tutorial-d0mqk3dk.web.app

_{(expires Sat, 14 Aug 2021 17:36:46 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[lukechu10]

Made a few suggestions here and there. Looks good overall!

[lukechu10]

(Side note: nothing against reqwasm but it would certainly be nice if we could suggest using a more "official" library. Since you are also a maintainer for gloo, maybe something like reqwasm could be ported over?)

[ranile]

I would love to but I'm holding off because I can't publish gloo. I don't have permissions on crates.io

[fultonm]

Hi @hamza1311. Thank you for the wonderful tutorial. I submitted a PR to your branch with some fixes and edits I made while following it here: ranile#1

The CORS fix using trunk serve --proxy-backend=https://yew.rs/tutorial feature did not work for me and I still get a CORS error. Am I missing something else?

[ranile]

Hi @hamza1311. Thank you for the wonderful tutorial. I submitted a PR to your branch with some fixes and edits I made while following it here: ranile#1

Thanks for that. Can you please submit that as a PR review instead? It's a lot easier discuss it/pick only certain parts of it that way.

The CORS fix using trunk serve --proxy-backend=https://yew.rs/tutorial feature did not work for me and I still get a CORS error. Am I missing something else?

That's because that resource doesn't yet exist. It will once the PR gets merged

[fultonm]

Struct components act differently. See the documentation on [Components](https://yew.rs/concepts/components?) to learn about those.

[fultonm]

Thanks for that. Can you please submit that as a PR review instead? It's a lot easier discuss it/pick only certain parts of it that way.

Done.

That's because that resource doesn't yet exist. It will once the PR gets merged

I would also expect a 404 error in that case. However I get:

127.0.0.1/:1 Access to fetch at 'https://yew.rs/tutorial/data.json' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy:

If I try requesting an image file that does exist such as https://yew.rs/img/logo.png I get the same error.

[ranile]

@fultonm, I've made the changes, feel free to take a look again.

FYI, there's a suggestion button when you add a review comment provides UI for suggestion and makes incorporating them much easier.

[fultonm]

Looks good to me!

Ignore my comments about about CORS, I was still specifying the full path to https://yew.rs/tutorial/data.json instead of relative path. I get a non-CORS error as expected now.

And thanks for the suggestion UI tip I see how that works now.

[Xavientois]

Suggested change

	We're using `unwrap`s here because it is a demo application. In a real world, In a real world, you want to have
	We're using `unwrap`s here because this is a demo application. In a real world app, you should use

[ranile]

It's too late to comment here, I guess. If you think this change should be incorporated, you should make new PR.

[Xavientois]

Oh lol true 😄 I was just skimming it over and noticed noticed the typo. I completely forgot that it was already merged.
Sorry about that

[ranile]

I also just noticed the typo. It would be great if you could fix it in a PR

[Xavientois]

Done #1990