Why would you want to render JSX in a Vue app? In my opinion, it has no real sense, because of the following points:
the idea of React is not rendering vanilla JavaScript code, but HTML in JavaScript, hence why it is called “JSX”, you’re not manipulating the DOM with vanilla JS. JSX is then translated into vanilla JavaScript on compile time.
secondly, even if you are working on a component library, it is unlikely that you would build a component for a React environment, and then translate it to other frameworks like Vue, because even though the core patterns look similar, the syntax and structure of the code are different. A feasible approach would be to first define the scope, design, and then build components for each framework. That’s why when you have different repos or directories in a component library for React, Vue, Svelte, Angular, and so on.
thirdly, rendering vanilla JavaScript in Vue is the opposite of the what the framework syntax was designed for: using template HTML to define components.
Yes, it is true, you can use JSX in Vue, but it makes absolutely no sense. It is like building a project with the two frameworks, why would you do it?
I am a passionate developer, striving to create useful libraries and applications for the front-end community. I enjoy studying open-source projects and figuring out how things work behind the scenes.
I disagree; it actually makes sense to use JSX syntax in a Vue app (not React, but the JSX syntax). Vue is a framework, which means the framework's template syntax is limited for advanced programmatic usage. If the component requires advanced template logic, then one approach would be to use JSX syntax for the template structure (again, just the syntax, not React). There is a plugin for that called "@vitejs/plugin-vue-jsx", and big projects like Vuetify are using it.
Rendering JSX has many methods, one of which is using the React library, which is not the best way. However, the purpose of this article is to demonstrate that method in a Vue app.
When working on a component library, one approach is to rewrite the project for every framework, but it is costly. Instead, it is more time and cost efficient to have a single core with a fast JavaScript library (like Preact or Solid.js) and a connector component for each framework (the connector component is in a separate repo). Check out fullcalendar.io, which is doing the exact same thing.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Why would you want to render JSX in a Vue app? In my opinion, it has no real sense, because of the following points:
Yes, it is true, you can use JSX in Vue, but it makes absolutely no sense. It is like building a project with the two frameworks, why would you do it?
it's about component reuse or maybe importing an existing react library
I disagree; it actually makes sense to use JSX syntax in a Vue app (not React, but the JSX syntax). Vue is a framework, which means the framework's template syntax is limited for advanced programmatic usage. If the component requires advanced template logic, then one approach would be to use JSX syntax for the template structure (again, just the syntax, not React). There is a plugin for that called "@vitejs/plugin-vue-jsx", and big projects like Vuetify are using it.
Rendering JSX has many methods, one of which is using the React library, which is not the best way. However, the purpose of this article is to demonstrate that method in a Vue app.
When working on a component library, one approach is to rewrite the project for every framework, but it is costly. Instead, it is more time and cost efficient to have a single core with a fast JavaScript library (like Preact or Solid.js) and a connector component for each framework (the connector component is in a separate repo). Check out fullcalendar.io, which is doing the exact same thing.