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 ...
For further actions, you may consider blocking this person and/or reporting abuse
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.
Why would you not use a tool that makes your job easier? JSX is not HTML, it is just a different syntax for working with JavaScript that is contextually more similar to a markup language. You can write react components using standard syntax, but why would you want to?
This: JSX isn't HTML, it's just syntactic sugar for a tree structure of JS values. (Take one look at the compiled output in Babel's REPL - you'll likely get over the initial "HTML phobia" as soon as you understand why JSX is just JavaScript and not HTML at all.)
If you want more separation, use functional components and put them in separate files - there's almost no ceremony around the JSX elements, just an export statement and some braces. (I don't mind mixing, but the degree of separation is entirely your choice.)
I would say the upside is you can return html primitives from functions to create snippet factories. I.e. a function can return an actual div or button or whatsit without building a DOM fragment or calling templating functions. IMO these methods are not mutually exclusive.
x.createMagicButton() is useful when you need a prefab button that you then build on.
y.getUserProfile() would be useful to build a complex presentation box or something by passing data through a template.
Think this has more to do with people getting a new hammer and making every problem a nail :) Realize it's potential and use it where it makes sense.
I'm no fan of Node, but Jsx is interesting :)
you don't.
If it bugs you that much avoid react in the first place.
I'd want to love it, cause people are creating great stuff and components with it. Things change, maybe in the future i can approach it again.
In fact, if it counts, i already use Docusaurus for internal doc.
of companies i consult.
Don't let the fear of change get in the way of your progress m8. Force yourself to spend a day or two with it - worst-case scenario, you'll be better informed when you argue against it.
I am also not a fan of HTML in Javascript. For me it always seems to miss a piece of the component, which is why I enjoy things like vue or svelte for the all-in-one approach.
I also don't like pug
i like pug, in html i feel like half of the editor page is wasted and find myself trying to match tags sometimes(yes there are plugins, features etc. but...). in pug it's almost subliminal :)
maybe a bit off topic but i always admired the people who use lisp dialects without distraction and i can't even follow html easily :)
My issue with pug is that I hate indent-based replacements for HTML, which Pug is big about. For my editor with HTML if I feel like I'm seeing too much on the screen I'll just fold down everything I'm not looking at.
Technically is JSX, not React..
And you use jsx without react like never...
I recommend you take a look at Stencil.js.
Cool stuff.
Here's a link: stenciljs.com/
So I will repeat your point, you would rather markup with anything other than an XML derived language. Okay fair you would rather use another language which translates to html instead, by using pug in Vue, okay, let me offer another point of view, conceptually you dislike html but is is not 'real' html at all, under the hood it's a bunch of render functions, anything in JavaScript files is just JavaScript, and it's related to this: github.com/hyperhype/hyperscript/b... so both pug and "html" in js transform into that. Why don't you forego the overhead and just write that instead of compiling something that looks just like render functions?
Ultimately the web was born with html and it, just like CSS will always be compile targets because they are historically the base level of the web. And on the subject, name any other language other than html that if written incorrectly still parses, html is underrated.
The trouble is, the seperation of concerns opinion gets completely misunderstood, it doesn't say don't mix languages, it says don't mix responsibility, as Vue and react are for displaying html, html belongs here.
I must add that I am not arguing or ranting at all it's a valid opinion, but I wanted to give you some other perspectives.
I have tried about a half dozen ti.es or so to get into Rwact, just because of all the hype. Every single time I see jsx I quit. I dont know exactly why, but I cannot come to grips with inserting html directly into my js. It just, it's wrong. Vue ftw.
Technically, React doesn’t have html in it - it has JSX. Crisis averted. :)
React is not a framework is a library
I work with react because of his popularity, but I think the same as you, whenever I can, I use vue.js on my projects, but I still prefer react.js for larger projects.
I'm not quite sold on HTML in JavaScript either.
The issue is, if you have to change something, the code is buried in a file somewhere and finding it takes more time than it should.
Same to me. I remember then all wrote php + html in same file..., now we writing js + html :D amazing...
I don’t like script tags in html... I don’t like mixing code and data. But if you truly believe in “separation of concerns” you‘ll like having one file that completely describes one component.
There is a plugging called react-templates. It's pretty basic and you have separated code just as you do in Vue.
github.com/wix/react-templates/blo...
No way! Unfortunately react has Facebook behind its back and it pull the global dev community to its direction, keping VueJs underrated!