Minor Issues with Deno React Example

[farsightsoftware]

Thank you for the Deno React example. It made it possible for me to markedly simplify my project structure!

I've found some issues with it I thought I should mention. So far, I think they're all fairly minor (though one seems major until you fix it 😊).

1. It doesn't tell you which of the many templates that mention "react" to pick after running npm:create-vite-extra. I went with deno-react which appears to have been correct.
2. It doesn't tell you which language to pick for the purposes of the example. I picked TypeScript because, hey, this is Deno. Later steps, though, seemed to assume JavaScript instead. I'd suggest saying which language to pick, and using that language in the example. (And I'm biased, so I'd suggest using TypeScript😊.)
3. After adding the pages to the app, it tells you to start the React app via deno task start, but there is no start task. I think it means the dev task.
4. It still shows the exact property on routes, but react-router-dom v6 doesn't have that anymore. (Interestingly, the code is using the newer element rather than the old component property.) (I caught this because, having picked TypeScript, I was editing App.tsx instead of App.jsx and TypeScript gave me a helpful error about it.)
5. (This is the one that looks like a show-stopper at first.) The Deno language service shows errors when you're looking at client-side code, such as:

   import React, { useEffect, useState } from "react";
   //                                         ^−−−− Relative import path "react" not prefixed
   //                                               with / or ./ or ../
   //                                               deno(import-prefix-missing)
   

   This is because we don't have a react entry in our Deno import map, but it can seem like some basic problem resolving modules in the client-side code. Adding this to deno.json fixes it:

   "imports": {
       "react": "npm:react@^18.2",
       "react-dom": "npm:react-dom@^18.2/client",
       "react-router-dom": "npm:react-router-dom@^6.4"
   },
   

And finally, two suggestions:

1. With the above, you end up with your client-side imports in two different places (once in vite.config.mts/vite.config.mjs, and again in deno.json), It's probably worth noting that duplication, and possibly calling out the vite_plugin_deno_resolve plugin, which seems to work! (At least for me, so far.) So it may be worth using that plugin in the example (although I'm not sure yet what the ramifications of this issue are and whether that would be a reason not to point to the plugin [yet]).
2. I wanted to make the Index.jsx and Dinosaur.jsx files TypeScript instead of JavaScript. I got there in the end, but ended up having to add "@types/react": "npm:@types/react@^18.2" to my imports in deno.json and then // @deno-types="@types/react" above the imports from "react" in each file. Finding out how to do that was a bit painful; it would be good if the example covered that. (And even better if there's a way to enable those types globally rather than having this much boilerplate in each file. I know Fresh manages it somehow...)

Apologies in advance if I've gotten the wrong end of the stick on any of the above.

I'm happy to do a PR for these, though I'd need some hand-holding on it, particularly around the type resolution stuff.

Thanks again for this example!

[farsightsoftware]

@kwhinnery - How did I miss that repo? Thanks for moving this to the right place.

[thisisjofrank]

Hey @farsightsoftware, sorry for the delay on this! I've actually updated the tutorial completely now, would love to get your feedback on it if you ever have time to take a look! For now im going to close this though.