DEV Community

loading...

Discussion on: Express in React! React Backend! Whut?! 🤯

myzel394 profile image
Myzel394

Yeah that makes sense - thank you very much. But how do more complex functions work? E.g useState or useContext

Thread Thread
cliffordfajardo profile image
Clifford Fajardo • Edited

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 now

export const TopNav = () => {
  const { req, res } = useContext(context);
  return (
    <TopWrapper currentPath={req.originalUrl}>
      <Logo href="/"> </Logo>
      <NavItem href="/">Home</NavItem>
      <NavItem href="/components">Components</NavItem>
      <NavItem href="https://github.com/gigantz/react-xpress">Github</NavItem>
    </TopWrapper>
  );
};
Enter fullscreen mode Exit fullscreen mode

At 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 wrong
CC @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

export const TopNav = () => {
  const { req, res } = useContext(context);
  //imagine if "req". was given a new `originalUrl` value from the client via an UPDATE request
  // I could see this creating a new HTML markup tree on the server that could then
  // be streamed to the client & being hot swapped with the older
  // markup in the DOM

  return (
    <TopWrapper currentPath={req.originalUrl}>
      <Logo href="/"> </Logo>
      <NavItem href="/">Home</NavItem>
      <NavItem href="/components">Components</NavItem>
      <NavItem href="https://github.com/gigantz/react-xpress">Github</NavItem>
    </TopWrapper>
  );
};
Enter fullscreen mode Exit fullscreen mode

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

Thread Thread
myzel394 profile image
Myzel394

Thank you, do you have any articles, videos you can recommend to learn react more in depth?

Thread Thread
orkhanjafarovr profile image
Orkhan Jafarov Author

@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 import ReqResContext and pass into useContext to have access req, res

It'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)

registerApp(ExpressApp, {
  appHOC: (Component) => (
    <ReduxProvider store={store}>
      <Component />
    </ReduxProvider>
  ),
  renderHTML: ({ head, styles, root }) => `
    <html>
      <head>
        ${head}
        ${styles}
      </head>
      <body>${root}</body>
    </html>
  `,
});

Enter fullscreen mode Exit fullscreen mode
Thread Thread
cliffordfajardo profile image
Clifford Fajardo • Edited

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

  • KentC Dodds has a react course (epicreact.dev/) covering nearly everything you would need. It's fairly expensive depending on how you view the investment. 5 months ago, I joined a company that uses React. I had production experience with Angular/Vue, vanillaJS and only dabbling with React. I wanted a resource that was cohesive and didn't want to spend time hunting and pieces resources together and building a fragmented view of the react ecosystem so I bought his course. I thought about it like this: Companies pay thousands of dollars for the expertise of someone like Kent C Dodd (author of several top GitHub libraries) and he's offering a course for a few hundred bucks that's replayable and in video with awesome examples..., if I can learn from one of the best that sounds amazing to me
  • Epic React
  • Kent's awesome React blog