6 ms·

I was really turned off by react because of the necessity to use JSX, which in turn required me to use babel, its just adding too much complexity. So I'm still

by kart23 7y ago

I was really turned off by react because of the necessity to use JSX, which in turn required me to use babel, its just adding too much complexity. So I'm still just using jquery.

hastes 7y ago
I would look into CRA (https://github.com/facebook/create-react-app https://github.com/facebook/create-react-app). It handles all the Babel/Transpiling/Webpack mumbo-jumbo for you so you can focus on writing code. Although I would eventually recommend learning how to utilize Babel & Webpack yourself because knowing why and how it works is useful.
- brlewis 7y ago
  If kart23's objection to complexity is how long it takes to get up and running, I agree about CRA. I agree about knowing the why of Babel and Webpack. But how they work isn't something everybody has to learn. If it's some other objection to complexity, I'd recommend learning modern web dev using https://mithril.js.org/ https://mithril.js.org/ which can use JSX, but in documentation the non-JSX form is primary.
  - pier25 7y ago
    I second Mithril with JSX. I've been using for a couple of months and it's amazing. I started working on making the JSX docs a little better but got stalled... hopefully I will have some time later this month. https://github.com/MithrilJS/mithril.js/pull/2551 https://github.com/MithrilJS/mithril.js/pull/2551
Sophistifunk 7y ago
You don't need to use JSX, it just makes things nicer. But if your project doesn't already have enough complexity that it needs some sort of build tool, then react is probably overkill for your project anyway.
- kart23 7y ago
  I dont use any build tool right now. You're right, I'm not building the most complicated thing in the world, but my site would definitely benefit from using react and I mostly want to switch to make future things easier, and jquery is already becoming pretty annoying. Theres pages of content that can be sorted and filtered, so I mainly want to use it to dynamically update the elements, with the data coming from ajax calls.
spankalee 7y ago
You might like lit-html, which has a very similar structure as JSX, but does so with standard JavaScript: https://lit-html.polymer-project.org/ https://lit-html.polymer-project.org/ React: const Welcome = (props) => <h1>Hello, {props.name}</h1>; ReactDOM.render(<Welcome name="Taylor" />, document.getElementById('react-welcome')); lit-html: const welcome = (name) => html`<h1>Hello, ${name}</h1>`; render(welcome('lit-html'), document.getElementById('lit-welcome'));
- Scarbutt 7y ago
  What do you get in return for losing all the react ecosystem?
  - spankalee 7y ago
    Less required tooling, better performance, smaller bundle sizes, and more interoperability.
- zelcon 7y ago
  disclosure: this is your project
Signez 7y ago
I would suggest you to take a look at Vue; you can use it without any transpiler or heavy toolchain, just adding a good ol' script tag in your headers and voilà. The getting started guide [1] is awesome and translated to a gazillion of languages, so it also helps :) I recommand Vue to any Javascript beginner that want to add interactivity to their page without having to handle the DOM manipulation themselves. [1]: https://vuejs.org/v2/guide/ https://vuejs.org/v2/guide/
- pjmlp 7y ago
  That is what I love about it.
pier25 7y ago
I hated JSX too when I started doing React 4-5 years ago. Then I used Vue for a couple of years in part because of templates. After that I tried InfernoJS which uses JSX because I needed the performance for a project and now I've turned around on JSX. Personally I couldn't go back to template based frameworks like Vue or Svelte because they usually put you into this one component per file mindset. I much prefer being able to create micro-components in the same file like say buttons or table rows. The thing that annoyed the most with JSX was that writing conditionals and loops inline was ugly or a pita. Then I discovered this Babel plugin and I love it: https://github.com/AlexGilleran/jsx-control-statements https://github.com/AlexGilleran/jsx-control-statements
- xodeus 7y ago
  That plugin is the worst thing I've ever seen
  - pier25 7y ago
    How come?
    - Legion 7y ago
      I'm not the person that insulted the plugin, but I had a less than positive reaction to it too. I would say that this is putting into the template what belongs as JavaScript. In pretty much every case, where the README shows the "before transformation" and "after transformation" comparison, the "after" part is what you should be writing to begin with. This feels like adding an extra layer of abstraction just for the purpose of not learning to do some simple things in JavaScript itself. I would be pretty annoyed if I started working on an existing React project and it had that sprinkled across all the components.
  - iaml 7y ago
    I'm currently working on a project where some people had a bright idea of implementing this exact <If /> via a component instead of babel transform, so not only it looks like shit, it also breaks if you mention something that doesn't exist at this point...
ferzul 7y ago
if you want to skip jsx, just write React.createElement(ComponentName, props) and your done. jsx just makes it a bit simpler to read, so no one feels tempted by horrible angular like template languages shudder
victorvation 7y ago
React is usable without JSX, which is just syntactic sugar for `React.createElement()` calls. If it's the complexity of babel/tooling that turns you off, it's also possible to use _just_ JSX without other transpilation steps: https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx https://reactjs.org/docs/add-react-to-a-website.html#optiona....
- kart23 7y ago
  I know I can use just JSX, but it looks really ugly, plus I have to set all the html attributes in createElement. I guess my bigger complaint is that its all 'possible', but not recommended for production, its going to slow down your site in some way, etc. There are always drawbacks to not using the recommended way. Its like eating soup with a spork. Yeah you can do it, but its going to take you a lot longer than with the proper tool.
zelcon 7y ago
Honestly I would not shed a single tear if node.js and npm got thanos'd out of existence overnight. It is hands down the worst thing to happen to software, arguably even worse than C.
ramijames 7y ago
I was also really turned off by JSX. It still feels like an abomination. I love the fuck out of Vue.js/NUXT though.
tsukurimashou 7y ago
unless you have to support internet explorer, modern browsers have a lot of native functions and APIs that can replace jquery easily (been hearing that for years, but last time I checked it really looked promising)
atrilumen 7y ago
Try Choo (4kb ninja sword). I think the design really nails it: just enough architecture, tagged template literal rendering, functional DOM tree composition with an optional component system. I prefer to avoid stateful components in favor of pure rendering functions, as much as possible. Choo's renderer is based on morphdom, which is interesting because it diffs against the real DOM rather than maintaining a virtual one. I use monoapp, which is a fork of Choo allowing you to bring your own renderer (such as lit-html). https://github.com/choojs/choo https://github.com/choojs/choo https://github.com/jongacnik/monoapp https://github.com/jongacnik/monoapp
CSSer 7y ago
Not sure what you mean by necessity. I promise I’m not trying to be pedantic, but it’s not required. Plus, there are other, newer JS frameworks out there that use html templates and the like. The struggle is just maintaining valid HTML.

by kart23 7y ago

I was really turned off by react because of the necessity to use JSX, which in turn required me to use babel, its just adding too much complexity. So I'm still just using jquery.

hastes 7y ago

I would look into CRA (https://github.com/facebook/create-react-app https://github.com/facebook/create-react-app). It handles all the Babel/Transpiling/Webpack mumbo-jumbo for you so you can focus on writing code. Although I would eventually recommend learning how to utilize Babel & Webpack yourself because knowing why and how it works is useful.

brlewis 7y ago
If kart23's objection to complexity is how long it takes to get up and running, I agree about CRA. I agree about knowing the why of Babel and Webpack. But how they work isn't something everybody has to learn. If it's some other objection to complexity, I'd recommend learning modern web dev using https://mithril.js.org/ https://mithril.js.org/ which can use JSX, but in documentation the non-JSX form is primary.
- pier25 7y ago
  I second Mithril with JSX. I've been using for a couple of months and it's amazing. I started working on making the JSX docs a little better but got stalled... hopefully I will have some time later this month. https://github.com/MithrilJS/mithril.js/pull/2551 https://github.com/MithrilJS/mithril.js/pull/2551

Sophistifunk 7y ago

You don't need to use JSX, it just makes things nicer. But if your project doesn't already have enough complexity that it needs some sort of build tool, then react is probably overkill for your project anyway.

kart23 7y ago
I dont use any build tool right now. You're right, I'm not building the most complicated thing in the world, but my site would definitely benefit from using react and I mostly want to switch to make future things easier, and jquery is already becoming pretty annoying. Theres pages of content that can be sorted and filtered, so I mainly want to use it to dynamically update the elements, with the data coming from ajax calls.

spankalee 7y ago

You might like lit-html, which has a very similar structure as JSX, but does so with standard JavaScript: https://lit-html.polymer-project.org/ https://lit-html.polymer-project.org/ React: const Welcome = (props) => <h1>Hello, {props.name}</h1>; ReactDOM.render(<Welcome name="Taylor" />, document.getElementById('react-welcome')); lit-html: const welcome = (name) => html`<h1>Hello, ${name}</h1>`; render(welcome('lit-html'), document.getElementById('lit-welcome'));

Scarbutt 7y ago
What do you get in return for losing all the react ecosystem?
- spankalee 7y ago
  Less required tooling, better performance, smaller bundle sizes, and more interoperability.
zelcon 7y ago
disclosure: this is your project

Signez 7y ago

I would suggest you to take a look at Vue; you can use it without any transpiler or heavy toolchain, just adding a good ol' script tag in your headers and voilà. The getting started guide [1] is awesome and translated to a gazillion of languages, so it also helps :) I recommand Vue to any Javascript beginner that want to add interactivity to their page without having to handle the DOM manipulation themselves. [1]: https://vuejs.org/v2/guide/ https://vuejs.org/v2/guide/

pjmlp 7y ago
That is what I love about it.

pier25 7y ago

I hated JSX too when I started doing React 4-5 years ago. Then I used Vue for a couple of years in part because of templates. After that I tried InfernoJS which uses JSX because I needed the performance for a project and now I've turned around on JSX. Personally I couldn't go back to template based frameworks like Vue or Svelte because they usually put you into this one component per file mindset. I much prefer being able to create micro-components in the same file like say buttons or table rows. The thing that annoyed the most with JSX was that writing conditionals and loops inline was ugly or a pita. Then I discovered this Babel plugin and I love it: https://github.com/AlexGilleran/jsx-control-statements https://github.com/AlexGilleran/jsx-control-statements

xodeus 7y ago
That plugin is the worst thing I've ever seen
- pier25 7y ago
  How come?
  - Legion 7y ago
    I'm not the person that insulted the plugin, but I had a less than positive reaction to it too. I would say that this is putting into the template what belongs as JavaScript. In pretty much every case, where the README shows the "before transformation" and "after transformation" comparison, the "after" part is what you should be writing to begin with. This feels like adding an extra layer of abstraction just for the purpose of not learning to do some simple things in JavaScript itself. I would be pretty annoyed if I started working on an existing React project and it had that sprinkled across all the components.
- iaml 7y ago
  I'm currently working on a project where some people had a bright idea of implementing this exact <If /> via a component instead of babel transform, so not only it looks like shit, it also breaks if you mention something that doesn't exist at this point...

ferzul 7y ago

if you want to skip jsx, just write React.createElement(ComponentName, props) and your done. jsx just makes it a bit simpler to read, so no one feels tempted by horrible angular like template languages shudder

victorvation 7y ago

React is usable without JSX, which is just syntactic sugar for `React.createElement()` calls. If it's the complexity of babel/tooling that turns you off, it's also possible to use _just_ JSX without other transpilation steps: https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx https://reactjs.org/docs/add-react-to-a-website.html#optiona....

kart23 7y ago
I know I can use just JSX, but it looks really ugly, plus I have to set all the html attributes in createElement. I guess my bigger complaint is that its all 'possible', but not recommended for production, its going to slow down your site in some way, etc. There are always drawbacks to not using the recommended way. Its like eating soup with a spork. Yeah you can do it, but its going to take you a lot longer than with the proper tool.

zelcon 7y ago

Honestly I would not shed a single tear if node.js and npm got thanos'd out of existence overnight. It is hands down the worst thing to happen to software, arguably even worse than C.

ramijames 7y ago

I was also really turned off by JSX. It still feels like an abomination. I love the fuck out of Vue.js/NUXT though.

tsukurimashou 7y ago

unless you have to support internet explorer, modern browsers have a lot of native functions and APIs that can replace jquery easily (been hearing that for years, but last time I checked it really looked promising)

atrilumen 7y ago

Try Choo (4kb ninja sword). I think the design really nails it: just enough architecture, tagged template literal rendering, functional DOM tree composition with an optional component system. I prefer to avoid stateful components in favor of pure rendering functions, as much as possible. Choo's renderer is based on morphdom, which is interesting because it diffs against the real DOM rather than maintaining a virtual one. I use monoapp, which is a fork of Choo allowing you to bring your own renderer (such as lit-html). https://github.com/choojs/choo https://github.com/choojs/choo https://github.com/jongacnik/monoapp https://github.com/jongacnik/monoapp

CSSer 7y ago

Not sure what you mean by necessity. I promise I’m not trying to be pedantic, but it’s not required. Plus, there are other, newer JS frameworks out there that use html templates and the like. The struggle is just maintaining valid HTML.