Hacker News Reader

Comment by Mc_Big_G | Hacker News Reader

I still can't believe everyone has accepted mixing logic and presentation is a good idea. Html mixed with javascript is a mess and I can only imagine what a "mature" React app looks like after a few years of iteration. I can't wait for the "React turns out to be a shit idea" posts in a year or two just like we're seeing with microservices. It's like a mass hallucination or something. Maybe Facebook had Cambridge Analytica help them market React or something. At least that would explain the brainwashing.

View on HN

You can keep a very comfortable degree of separation between logic and presentation with React, and there are multiple ways to do so, such as using Container Components for state-management and stateless Presentational Components for the actual appearance of your app, using Higher-Order Components, or the "Render Prop" technique that's been making rounds lately . I am working on a React SPA and I have no problem at all keeping things such as data fetching, local state and what not separate from the presentation, either in my codebase or in my head.

This is such a poorly done react app, you can not take this as the current state of react. If you've never seen a mature react app, and have at best checked out a few blogs that try to compare it to other frameworks, then you have not been exposed to nearly enough to make a real decision and are throwing around empty opinions.

I'll admit mostly ignorance since I've only done a Udemy react course and read some blogs. However, I've never seen it done any other way. Isn't JSX an integral part of React?

I wrote an extended answer to this on Reddit a few weeks ago [0]. I'll paste it here for ease of reading:

JSX is not required. Literally, all you need is to include script tags for `react.js` and `react-dom.js`, and then you write "raw" `React.createElement()` calls.

However, most people find that to be too repetitive. So, the "default" approach is to use JSX syntax, which converts `<MyComponent a={1} b="blah">Text</MyComponent>` into `React.createElement(MyComponent, {a : 1, b : "blah"}, "Text")`.

Yes, JSX requires a transformation/compiler step. As I said earlier, a typical "real" app needs build tools to bundle anyway, and you're probably targeting a variety of browsers but don't want to restrict yourself to the least common denominator subset of JS syntax, so you're probably already using a transpiler too.

But, if you truly don't want to use JSX for whatever reason, there's plenty of choices:

- Write raw `React.createElement()` calls by hand

- Alias `React.createElement()` as `h()` so it's shorter

- Use a functional VDOM wrapper generation library like `react-hyperscript-helpers` (https://github.com/Jador/react-hyperscript-helpers/).

- Use a runtime JS templating library like Dominic Gannaway's `t7` templates(https://github.com/trueadm/t7)

- Use an actual separate templating library, like `react-templates`(https://github.com/wix/react-templates) or `handlebars-react`(https://github.com/stevenvachon/handlebars-react)

Almost everyone chooses to use JSX. The docs use JSX. Tutorials across the internet use JSX. It's the accepted approach. But, it's not _required_. You do not _need_ it. There are other options. It's your choice.

[0] https://www.reddit.com/r/javascript/comments/81fkhi/this_may...

If you are mixing logic in react components then you are doing something completely wrong. React serves its purpose marvellously well in big projects.

I thought the same. But, as I started to work with react in a side project, now I really enjoy it. In the beginning is a really mess. But, as you begin to think in a "data stream oriented way" (like you do in Haskell with lists), your templates look like any regular framework. It stay isolated in a function with no more than value substitutions. You even can separate in a different file. The only really JS code I have mixed with html has "if" and "map/for" statements. This is, yet, the uglier part for me (at least, now). BTW: I don't use redux (and I never will!).

Not sure how this

    {isVisible && <div>Hello World</div>}

is uglier than

    <div ng-if="isVisible">Hello World</div>

    <div v-if="isVisible">Hello World</div>

    {{#if isVisible}}
        <div>Hello World</div>
    {{/if}}

Plus, isVisible in React is not a string but a variable, so you can use Rename Symbol and Find All References on it, inspect its value in your browser's debugger, inspect its type if you are using TS or Flow, and so on.

Logic and presentation are not mixed. The logic is inside the Class methods and the presentation is inside the Class render(). You can also move the logic outside of the Class component (that's one reason to use Redux).

And you can also create stateless components without any logic, eg.:

    const Header = () => <h1>Hello World</h1>

I'm not a huge fan of react either. To be honest, I don't know it very well, but we tried using it for an MVP, and things just took way too long. Ended up redoing the entire MVP as a rails project, which I didn't know either, but was able to make a fast MVP with.

Reply on news.ycombinator.com