DEV Community

Discussion on: 🐶 Truly reactive! Rx+JSX experiment

Collapse
 
tiagoha profile image
Tiago A

logic and request in the template? 🤮🤢

Collapse
 
kosich profile image
Kostia Palchyk

Hi, Tiago! Thank you for the comment 🙂

Well, since JSX is a structure of objects, React allows you to do pretty much any wild stuff in their templates too! 🤯

The given example was rather supposed to show that any child could be a stream, which gives us so many powers! (partially described above)

Would it look cleaner if we moved the request logic to a function? E.g.:

function App() {
  return <div>
    <h1>RxJS</h1>
    <p>{ makeRequest() }</p>
  </div>
}
Enter fullscreen mode Exit fullscreen mode

And the engine is flexible, so we can map the whole request result to a JSX
(this one looks more reactish, imho)

function App() {
  return makeRequest().pipe(
     map(result => 
       <div>
         <h1>RxJS</h1>
         <p>{ result }</p>
       </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

Again, with the article examples, I wanted to show the idea of manipulating streams on a level, native to the framework. And I agree that they might not reflect best practices 🙂

Hope, my clumsy examples won't hide an interesting concept behind them ⭐️