A lot of people use react for web development and mobile. It is a really cool framework.
I don't want to be the one, but i can't stand writing or seeing html inside js. Even further that i don't like html, xml, or any *ml with opening and closing tags.
That's why my preference is;
Vue with pug template language.
In Vue you can separate html, js and css clearly.
I haven't write anything large scale in react, but as far as i know,
you can separate template and js to some level but at the end there is always a mix of js and html somewhere in the same block, which makes me uncomfortable :)
How do you get used that?, or is it only my obsession :)
Top comments (57)
There is no separation in react. Non html infused js would be considered vanilla js or vanilla html that works with the react bits. But that's all intentionally part of the "declarative" style that fb wanted for react.
I'm curious why it bothers you. Is it the MVC violation? Or something else?
no not technically, it just feels weird visually.
"feels weird" doesn't sound like a solid argument to me. I really like react so I'm a little biased here.
The separation in react is simply different - you don't separate logic and structure by using different languages, but by using different components.
Don't get me wrong, there is nothing against react here. It's perfect. But combining
htmlandjsin the same code is visually not attractive for me.I'd like the code to be clear visually and when using/reading react i feel like;
Ok, here is my speech, some words in Spanish and some in French but overall meaning is so deep and touchy :)
As i said it's very personal, the framework itself is very powerful.
It takes time to get used to. I've never tried Vue (although I definitely should, with all the hype), but honestly it makes the DOM so much more powerful (that's what I feel anyway) and easy to work with.
'Feels weird' is a valid excuse if you're going to work on a large code base that isn't all your code. The cognitive load will cause frustration that gets in the way of working.
I suppose that's why there are so many different frameworks - everyone has a different concept of what is most natural to them.
"Feels weird" is how an inexperienced developer describes coming across code smells that they're beginning to become skilled enough to identify but can't fully explain.
I think it's an extremely valid argument and I encourage you to explore that feeling thoroughly.
You may discover that you're wrong but you'll come out a better developer than one who just accepts what they are told. A big difference in a good developer and an "ok" one is knowing when to ignore the "rules" and really look at something objectively.
To me, "feels weird" in this context is more related to someone not being familiar with the tools than anything else. For someone new to Python, "ask for forgiveness not permission" might "feel weird".
Unless you can better express what you mean, "feels weird" is void.
Not sure how clearer JSX can be?
It's declarative and in your face. You understand how it will render by just looking at what JSX is returned.
Sure it looked weird at first, but once you work with it a bit you understand it's power and why JSX is JSX
I also feel weird this blend, hence never tried react at first place angular and vue js seems to be doing good for me.
I'm intolerant of html outside of JS 😉
Jokes aside this is the way I like to write html. If you look into new native web components - usually the html is inside the js as a string or through jsx. So this style isn't going anywhere.
When you write js you'll often end up interacting with the Dom often enough to have it make sense to so tightly couple them.
Realistically, I'm not sure why we even have html files anymore. Or an html based Dom for that matter. When your js can hold an entire Dom tree - why not just have a browser render that directly?
why we even have html files anymore
I was thinking that a couple of years ago and mithril was the closest thing to that, i had found. Never used it though.
Me too. I have used a bunch of template-based tools (AngularJS, Angular, Polymer, Vue) and then React for a while and, while I am getting kind of used to the latter, I am still struggling to understand why it is so popular. I find the template-based approach preferable because it:
Lets you write code that is near-identical to the end result (more straightforward, less cognitive load)
Similarly, lets you more easily make use of the browser inspector
Helps you very quickly grasp what the component will look like, when reading it
Should be familiar to anyone who has done any kind of frontend programming before
Reduces JS boilerplate
Naturally separates view from logic
Is there something I'm missing?
You are not alone on this. I personally don't mind when JSX is use to describe a piece of the UI, basically when is just HTML but with custom tags. The thing is that the amount of crazy things you can do with it has no limits.
It's great having choices and being able to write code however you want.
Are we talking about programming languages? Sure, freedom is great.
Are we talking about a DSL like HTML? I would prefer a small set of rules that let me be explicit about my intention.
I prefer using templates as well. I like to treat views/templates as a more basic entity where you need an occasional if-statement or loop to output data. Any more complex logic has its own dedicated place. Having the power of JavaScript inside the HTML template sounds beneficial but I could see the code becoming hard to manage if there is a mess of JS, CSS, and HTML in the JSX. An example is this component from the React documentation: github.com/reactjs/reactjs.org/blo... I think that file would be so much easier to read through and work in if it was separated into
<style>,<script>, and<template>. I'm not a Vue or Svelte user, but that style of writing components looks more appealing to me.Looking at some React code reminds me of my experience with legacy PHP and ColdFusion scripts that were mixed with HTML, CSS, and JS. Those old legacy applications were very difficult to update because everything was intertwined and tightly coupled. You couldn't easily refactor, restructure the page, or re-style it because everything was scattered throughout the file.
Ugh. That looks like a nightmare. Where is this in the docs?
To me personally, it feels way more comfortable than those old-school DOM accessing techniques in vanillaJS or jQuery
How about Vue ?
I never tried Vue to be honest. The problem's that I'm relatively new to WebDev and I don't want to jump from framework to framework before getting at least somewhat proficient in one of them. And React felt super easy to pick up from the first try, so I decided to go for that one :)
You can use jsx inside VUE.
vuejs.org/v2/guide/render-function...
Here 🙋🏻♂️. I don't like jsx neither react
I didn't like it at first; it wasn't clear to me where it was-and-wasn't allowed and what was-and-wasn't allowed inside it.
Once I learned how the parser detects JSX, and learned exactly what it compiles to, then it felt perfectly natural and has been amazing.
As a side note, I hate React (I've used it for years). I disagree with the downwards stateful flow and the context API/Redux. JSX in my opinion is at its best outside of React.
Personal preference will always be a controversial topic, and you don't have any really strong, objective arguments for preferring HTML and JS in separate places.
For example, while I do think pug templates are clearer, I do not prefer them them over standard HTML for objective reasons that weight more than the "it's cleaner" argument:
As for React, I do not like JSX, but not for the reasons everyone here thinks.
JSX in general sounds like a great idea on paper. If we're building web components, why keep the code separate when it's clearly strongly tied together? The separation of concerns argument quickly falls apart when you realize it comes with the detriment of making code harder to navigate and locate.
What I do NOT like about JSX is the fact it makes it extremely easy to build HTML-in-JS frankenstein monsters. It's a complete mindboggler to me how quickly people forget we HATED JSPs for this exact reason. And yet they give a free pass to React just because it's the cool new kid on the block. This doesn't mean you can't write clean code in JSX, it just means you require more discipline. Which of course means people will end up abusing it and writing messy code.
Vue and Angular had the right idea when instead of allowing users to write JS in HTML all willy-nilly they said no, and instead limited the power in templates to directives and custom html elements/attributes. Which makes for usually cleaner code.
well, me too
but what can i do, its The React
besides, vue currently doesnt have static site generator like gatsby
since most of my project are static site
i help micro-startup bussines in my town to build website for cheap. thats why most of my project are static.
they are fast, cheap, flexible. and i should add, not hackable
Checkout gridsome.org/
woah, i never heard about this one.
thank you. ill take it for a ride
As primarily a Vue developer, I don't mind JSX. I see the appeal and in advanced components would actually prefer to not have my template so separated from the logic. However, I really don't want to use JSX with Vue, even though it supports it, because Vue gives so much power to the template with built in directives, I feel like JSX with it would be a step back in many cases.
However, what really turns me off about React is styling. React itself supports global styling and CSS Modules. Neither are anywhere close to as nice as just throwing "scoped" on your style tag in Vue and never worrying again about styling clashes. The problem is made even more evident with the multitude of styling solutions in 3rd party libraries. Vue solved this problem from day 1, why the React community is so fragmented in how to style their apps, I'm not sure. There's even a suggestion from @dan_abramov that's been sitting around for a year in the React GitHub issues to address this and after ~50 comments of people suggesting every CSS-in-JS solution under the sun, there's still no easy solution that just works like you'd expect CSS to.
Vue + Typescript is just better imho. Too much js in the HTML makes it really hard if you need to hand the project to a digital designer to do the CSS. Separation of concerns lowers the entry level to the project, and therefor is a good thing.
Nothing's stopping you from writing react components using React.createElement everywhere. Everything will work the same. You won't have "HTML in your JS", so you'll be happy.
Your only trade-offs would be a less maintainable codebase and longer developing time.
I really don't understand the argument against using JSX...
Assigning
React.createElementto a variable with a short name is also a valid approach:Vue is just JS inside HTML though. I happen to prefer Vue but only out of familiarity bias. It's all just a matter of preference IMO. I can't see a strong argument supporting one being technically superior
My point exactly, I had the same reservation when I first heard about react from the first version. I was surprised when it eventually took the world by storm. I preferred vue by far. But I'm beginning to warm up to react but I still hate the mixing of HTML tags in js.