Great tutorial, able to get it running within few minutes!
I'm new to JS world, have not used nodejs, and directly learning deno. I wanted to convert this little react js, and in the process learn deno & react :
Can someone help me to convert the above node to deno - to make it well organized source/subcomponent staticpage/images etc.
I am looking for an example deno-react project that is structurally similar e.g src/index.js, /public_html/index.html, writing into div "root" instead of rewriting "body", react subcomponents in separate subfolders etc.
I've not seen any particularly complex examples of React + Deno - if you google there are a few examples / videos that use a mixture of Node and Deno for the desired effect. If you find any awesome examples then please do share!
I would be happy to create a more complex example React application which has some sub-components, uses static CSS etc. and tutorial to go with it - would that be useful?
@craig
Thanks for the SSR. Would be great to have a CSR (client side rendering) React & Deno example, with a structured project so it can be used as a template to write maintainable production quality code.
Hey sure, thanks for the suggestion. CSR would be very similar to the example, but instead of performing a server-side renderToString (here github.com/asos-craigmorten/opine/...) you would just not bother! Instead effectively setting the content of the React root (here github.com/asos-craigmorten/opine/...) as empty.
Finally instead of hydrating the content in your client-side script (here github.com/asos-craigmorten/opine/...), you would just use the reactDOM.render() method to create your app completely on the client. 🎉
For this particular example you could then likely refactor a couple of things such as the isServer prop that is used in this example to manage the fact that React Suspense is yet supported server-side.
Great tutorial, able to get it running within few minutes!
I'm new to JS world, have not used nodejs, and directly learning deno. I wanted to convert this little react js, and in the process learn deno & react :
github.com/anborg/react-pwa
Can someone help me to convert the above node to deno - to make it well organized source/subcomponent staticpage/images etc.
I am looking for an example deno-react project that is structurally similar e.g src/index.js, /public_html/index.html, writing into div "root" instead of rewriting "body", react subcomponents in separate subfolders etc.
Hey @anborg ! 👋
Wow, I'd say a PWA React app is a reasonably complex thing! 😲
I have an example of how you can write an MVC like setup in another post including static CSS and EJS templates.
I've not seen any particularly complex examples of React + Deno - if you google there are a few examples / videos that use a mixture of Node and Deno for the desired effect. If you find any awesome examples then please do share!
I would be happy to create a more complex example React application which has some sub-components, uses static CSS etc. and tutorial to go with it - would that be useful?
I’ve put together a quick example of using SSR React with suspense, static CSS and sub-components here —> github.com/asos-craigmorten/opine/...
I plan to write up a new post about it over the next couple of days.
@craig Thanks for the SSR. Would be great to have a CSR (client side rendering) React & Deno example, with a structured project so it can be used as a template to write maintainable production quality code.
Hey sure, thanks for the suggestion. CSR would be very similar to the example, but instead of performing a server-side
renderToString(here github.com/asos-craigmorten/opine/...) you would just not bother! Instead effectively setting the content of the React root (here github.com/asos-craigmorten/opine/...) as empty.Finally instead of hydrating the content in your client-side script (here github.com/asos-craigmorten/opine/...), you would just use the
reactDOM.render()method to create your app completely on the client. 🎉For this particular example you could then likely refactor a couple of things such as the
isServerprop that is used in this example to manage the fact that React Suspense is yet supported server-side.Yes a simple react + deno + calling some weservice (e.g elasticsearch), subcompoenents, css etc. would serve as a production quality template!