Hey there! One more implemented crazy idea for React
Idea
So, long time ago when I was researching react custom renderer, I had a crazy...
For further actions, you may consider blocking this person and/or reporting abuse
😲😲 Sounds interesting!
But...
HOW THE F$CK DO YOU IMPLEMENT REACT ON A SERVER?!?!? :O Completely confused...
LOL :D
React.js is only a structure, state and etc. It doesn't have any idea what it should render, for example you use React.js with react-dom or react-native, these two libs just rendering what they need depends on react structure.
I'll write an article about how I build this :)
At high level, your compiler of choice (typescript/babel etc) will take the code and output out code that is valid on the platform your intending to run on.
So those JSX looking tags in react-express examples above will get transformed to regular javascript function calls
This is similar to how JSX tags in react get transformed to plain old javascript function calls after
TLDR: a compiler is converting this code into "valid" code that can later run in the javascript runtime.
Yeah that makes sense - thank you very much. But how do more complex functions work? E.g
useState
oruseContext
In the example below, just think of
useContext
as regular javascript function that returns an object, which you are then destructing to get values from for nowAt this stage in the project it seems like this in its initial phases & that
useContext
is more of a nice expressive and familiar syntax being brought from the react frontend style coding to the backend and isn't doing all complex stuff like re-rendering data and stuff? (i could be wrongCC @orkhanjafarovr )
On the frontend we use context for lots of things, one being sharing state across the application, when a value in the context changes all components subscribed to that context will update.
That example snippet above reminds of the work that the react team is doing with react server components to some degree
See this part of the react-server components announcements
Again this high level thinking with some background in compilers without seeing source code
@orkhanjafarovr did mention this a bit more about this further down in the comments
Thank you, do you have any articles, videos you can recommend to learn react more in depth?
@cliffordfajardo
Thanks for detailed answers! You're awesome, mate ✨
Yep, we can use
useContext
and it will work as expected, in@reactend/express
you can importReqResContext
and pass into useContext to have access req, resIt's also possible to replace
appHOC/appWrapper
of pages and replace html template.You can do like this (Sorry for bad naming, I'll change them later to better ones)
I like these articles:
These Github users below write lots of cool micro libraries for learning purposes, here are tiny react clone in modern JS
A general resource I like to often refer to is this one, when I'm curious about a technology & how it works under the hood
Paid resource
Waiting for it
Have you already thought about a name? Maybe something like Rexpress, Exact, Expract.....?
Actually the best option is react-express, but it's taken(
But there're options (Rexpress too!) I would like to use to name it, but a bit later :)
Ill waiting for it.
Can't wait, would be nice if there's an interactive demo on your heroku site too!
For now there's only demo website - react-xpress-demo.herokuapp.com
That built by using the way described above
So you’re turning React into PHP aye?
It’s something like, “build your server with only html skills” lol. Part of the truth, but I’m working on its updates and sandbox. Soon you’ll be able to play with that
The circle of life :)
I am not sure if even yourself are aware of how many problems such a solution solves.
I am working on a similar concept (it's VueJS and neoan3 instead of React and express, but the principal is the same). Maybe once you solved your components this will give you some ideas: youtu.be/FBLR28qquCI
How better is compared to Next.js?
This one is http server that described with jsx. It can render regular react dom components when you pass it to get response (like a template engine does)
I’m working on its package and it will be possible to play with that in sandbox.
Oh I see the difference is declaring with JSX... ok.
But at the end will do the same SSR, right?
It gonna do only SSR for now, it's more about backend/http-server part than frontend
I like JSX... looks nice =)
not the same purpose
Considering rendering React in server side, Nextjs does this. What Am I missing?
This is adding another level of abstraction on top of writing vanilla javascript code to generate a server code; so instead of writing the code that looks the your typical functional that looks like an express handler, you'd write this it seems
react-express -> spits out server infrastructure code
Side note: I really appreciated the power of declarative languages and built a better mental model on the when/why you would do this after reading Ch2 of Designing Data Intensive Applications by Martin Kleppman
A declarative query language can be more attractive because:
it is typically more concise and easier to work with than an imperative API
But more importantly, it also hides implementation details of the underlying code making it possible for the system to introduce performance improvements without requiring any changes to userland code Other examples
Such a good banner image
They found our secret solution :(
Hide Next.js into shelters
This is cool! ReactPHP might be a more relevant name thought JK :P
Bdw, What rendering engine did you use?
Did you know why you need to use
react
andreact-dom
when building React.js projects?Because React just provides the logic but depends on a renderer to actually output stuff which is where
react-dom
comes in to render the UI to the browser DOM.There is a lesser-known package called
react-reconciler
which is the packagereact-dom
is using and it is what you will use to create your own custom React.js renderers.Good callout @devhammed !
Yes, that’s exactly as Hammed described. The solution is component based http server and you can pass your regular react dom components and render them. Use useContext hook to get req, res in the components you gonna pass in it
🧐 Looks Interesting! 😮
Interesting and really cool! I'm in stars
This looks like IIS lol
react-sql, react-dns, and react-nginx are coming on
Interesting
This is so Cool and I have strong interest
hype post just to trigger people
why though
Smart enough i like it. 👏👏
Can you tell me how to start with renderer stuff cuz i wanna dive into those stuff.
What a horrible day to have eyes.
What's the goal here? Just have a node server serve HTML? Like ReactDomRender?
Forwarded ✨
dev.to/orkhanjafarovr/comment/1bc15