Live data from Hacker News

How I learned to stop worrying and love React

firstdoit.com

91–100 of 107 posts

Re: How I learned to stop worrying and love React

#91
post #87

Earlier quoted context omitted.

If you're using createElement you're doing it wrong.

I am playing around with React and if you want to keep it JSscripty (being the only dev who actually likes JS) or you want to use coffee script then createElement isn't actually horrible to use. Especially not if you make an alias to ce or something like that.

if you want the best of both worlds, i use cjsx (https://github.com/jsdf/coffee-react) for my react components e.g. https://github.com/Azerothian/reacta-test/blob/master/react/...

Re: How I learned to stop worrying and love React

#92
post #84

Earlier quoted context omitted.

I'm a big fan of Clojure and React, but haven't used Clojurescript or Reagent. I find React pretty easy to grok so I'd be interested in how you think Reagent makes it easier to use.

Reagent means you don't have to grok Reagent at all. If you know how Clojure atoms work, how to use Hiccup-style templates, and understand that all templates ('components') that dereference a Reagent atom will be automatically updated when the atom is, then you know how to use Reagent.

I think you meant "grok React". But yes, Reagent is super-nice. I'm surprised much of the community has gone for Om, since Reagent strikes me as much cleaner 98% of the time. Om maps closely to React, when most of the time it doesn't have to.

Re: How I learned to stop worrying and love React

#93
post #66
post #56

Earlier quoted context omitted.

Who's stopping you from putting your jsx in a seperate file?

Build tool complexity is what I dislike - it's certainly possible, but the trend I dislike is build tooling increasing complexity of the build system of the frontend, decreasing accessibility for onboarding developers. JSX is an unnecessary offender in this department, bringing us farther away from plain HTML.

Why use JSX at all, then?

    var d = React.DOM;
    d.div(null, 'Hello', d.strong(null, 'World'))

Re: How I learned to stop worrying and love React

#94
post #69
post #18

Earlier quoted context omitted.

You want to look at the DOM structure of the page as it exists in the loaded page and have I got a treat for you! Figure out how to open the web inspector for your browser; the keyboard shortcuts are ctrl-shift-I or cmd-shift-I or cmd-opt-I on a few (platform, browser) pairs. (This will show you the actual DOM, not the React components... but since you were talking about 'view-source', this might help you too.)

Or hit F12, works in every browser and platform as long as the key is present.

Between Firefox, Chrome, and Safari on OSX, it only does anything in Firefox (toggles Firebug).

Re: How I learned to stop worrying and love React

#95

Earlier quoted context omitted.

Which is why I prefer Ractive.js to React.

I like it too when I read the docs but haven't been able to try it yet for anything real. Have you actually used it for real work?

I have, and it works great. And the fact that it uses Mustache-like templates makes it much easier to collaborate with the designers.

Re: How I learned to stop worrying and love React

#96
post #18

Earlier quoted context omitted.

You want to look at the DOM structure of the page as it exists in the loaded page and have I got a treat for you! Figure out how to open the web inspector for your browser; the keyboard shortcuts are ctrl-shift-I or cmd-shift-I or cmd-opt-I on a few (platform, browser) pairs. (This will show you the actual DOM, not the React components... but since you were talking about 'view-source', this might help you too.)

Thanks, that's what I've been looking for!

You're welcome!

Using the web inspector has been such a massive and continuous boost to my learning/work with webpages and I'm extremely glad to share it with someone it might help.

Re: How I learned to stop worrying and love React

#98

Earlier quoted context omitted.

could you elaborate what specific complexities it abstracts away?

It essentially combines all of React into a single component, the Reagent atom. It's used exactly like a normal Clojure atom, but whenever it's updated, Reagent will automatically update all Reagent components that depend on it. I find this quite elegant, as it allows one to write pretty much any reactive ui using only three functions: deref, update and render-component. Reagent atoms can even be passed between Cloju…

So Reagent is like React + Baobab (https://github.com/Yomguithereal/baobab)? Since Clojurescript has to compile to Javascript anyway, I can't think of a reason why Javascript can't have a counterpart to Reagent.

I'm not familiar with Clojure, but it seems like atom is the data tree that holds the state of the entire application. If so, could you give an example use case of when you'd pass the data tree between threads, and what advantages it has over promises or es7 async/await.

Just to be sure, I'm not questioning the validity of your claims, I'm genuinely curious about how things work in reagent.

Re: How I learned to stop worrying and love React

#99
post #6

I recently worked on my first React project, after working with Angular code for a while. I'm willing to accept that as an app gets more complex, React/Flux really pays off. But there's something to be said for having a single template file for a single page in Angular, versus having JSX scattered among 20+ components for that same single page in React. When you want to get a 10,000-foot-view of how it all comes toge…

Getting the 10k feet view in React is a problem I've head as well. I usually use the the react google chrome extension to help me out with that.

Re: How I learned to stop worrying and love React

#100
post #6

I recently worked on my first React project, after working with Angular code for a while. I'm willing to accept that as an app gets more complex, React/Flux really pays off. But there's something to be said for having a single template file for a single page in Angular, versus having JSX scattered among 20+ components for that same single page in React. When you want to get a 10,000-foot-view of how it all comes toge…

The new Glimmer engine in Ember.js gives you React-like DOM diffing without the use of JSX, and baked into a very organized and easy to grasp framework to boot.

While I like the tooling around Ember, I don't know how much I actually like Ember itself. I mean, there are routers, controllers, templates, views, and components. How many different concepts do you need?
Post reply on HN