Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Learning Node.js and React while building a product

javascriptkicks.com

Post reply on HN
Print view View original

31–40 of 42 posts

Re: Learning Node.js and React while building a product

#31

Post by kaonashi »

baron816 wrote: post #20

You don't have to use 'this' at all in React. I've written about it here: https://medium.com/@baronmaximilianwilleford/react-without-t... I never use 'this', 'bind', 'apply', 'call', 'class', and only use 'new' to create React components. I find it much easier and more fun to work with React as a result. I hope other people would give it a try.

bind is useful as a curry that's built-in, but I always pass `null` as the first argument.

not a huge fan of the `new` keyword in js; it's difficult to mock and there are better options (Object.create/freeze e.g.)

Re: Learning Node.js and React while building a product

#32

Post by tracker1 »

caleblloyd wrote: post #14

If your team is from a .NET background, you may be better off using something with first class Typescript support. I have been working on a boilerplate that uses VueJS with typescript. It is still reactive. I setup the UI to closely mirror the structure of a .NET MVC app. It is much more intuitive to me coming from a strongly typed OO background. The boilerplate is not fully done yet, but here is the UI portion if yo…

There are a lot of people using Typescript with React... it's not so bad, I don't see the point nearly as much as some, but it's definitely there, and pretty well supported.

Re: Learning Node.js and React while building a product

#33

Post by jbrantly »

antihero wrote: post #16
miroslavpopovic wrote: post #5

Earlier quoted context omitted.

Hey @acemarke, thanks for the comment! For myself, I still have not decided whether I like JSX or not :) My colleague finds it great, and I like the declarative nature of it, just need to persuade myself to accept it mixed in JS file. Yes on .bind, but I got used to not having to care about it in Aurelia (and Angular also). Got my fair share of `this` handling in pre-ES6. And of course, thank you for the links. Bookm…

I've found that the best way to make event handlers is instead of doing class Blah { private handleThing(...) {} } to instead do this class Blah { private handlething = (...) => {} } this means that it is created only once, at instantiation of the component, so it is fast, looks decent, and has access to `this` as it's technically a method on the object, not the class. Also, if you're coming from C# land, head straig…

One problem with using fat arrow syntax like this is the method is no longer attached to the prototype so it's not shared across all instances and is less memory efficient. It also doesn't work well with React HMR if you're using that. If you can use decorators I highly recommend autobind-decorator: https://github.com/andreypopp/autobind-decorator

Also I think you're using a TypeScript-specific `private` syntax there which likely changes the runtime semantics so my comment really only applies if you don't use that.

Re: Learning Node.js and React while building a product

#34

Post by foota »

miroslavpopovic wrote: post #26
ng12 wrote: post #11

Earlier quoted context omitted.

> just need to persuade myself to accept it mixed in JS file Why is this a bad thing? The most important thing about JSX is that it's a single source of truth -- you never have to wonder if data is processed in the JS or in the template. I really think everything in one file is the ideal, we've even started moving the styles inline via styled-components.

Not a bad thing. Just a personal preference of trying to separate views and view models for a long time. I believe it just needs some time to get used to it. As I said, I really do like declarative nature of JSX, knowing that it's just compiled to a regular JS/DOM code.

Fwiw I think "compiled to" is a bit of a misnomer. From my understanding it's more like a DSL that gets interpreted by the renderer.

Re: Learning Node.js and React while building a product

#35

Post by ng12 »

foota wrote: post #34
miroslavpopovic wrote: post #26

Earlier quoted context omitted.

Not a bad thing. Just a personal preference of trying to separate views and view models for a long time. I believe it just needs some time to get used to it. As I said, I really do like declarative nature of JSX, knowing that it's just compiled to a regular JS/DOM code.

Fwiw I think "compiled to" is a bit of a misnomer. From my understanding it's more like a DSL that gets interpreted by the renderer.

I think compilation is fair wording -- JSX is just sugar around the createElement API. : https://facebook.github.io/react/docs/react-api.html#createe...

Re: Learning Node.js and React while building a product

#36

Post by miroslavpopovic »

caleblloyd wrote: post #14

If your team is from a .NET background, you may be better off using something with first class Typescript support. I have been working on a boilerplate that uses VueJS with typescript. It is still reactive. I setup the UI to closely mirror the structure of a .NET MVC app. It is much more intuitive to me coming from a strongly typed OO background. The boilerplate is not fully done yet, but here is the UI portion if yo…

We also have a strong JavaScript background. Preferring JavaScript instead of TypeScript.

Cool, nice idea for the project!

Re: Learning Node.js and React while building a product

#37

Post by miroslavpopovic »

coldtea wrote: post #27
miroslavpopovic wrote: post #9

Earlier quoted context omitted.

Yep, we are using arrow functions and other ES2015+ goodies, but they don't help with event handlers. In fact, I believe class property syntax helps with that, but we only figured it out after we built these few pages and components necessary for the web app part.

> Yep, we are using arrow functions and other ES2015+ goodies, but they don't help with event handlers. They do. Just do: myHandler = (v) => { ... } and you don't need to bind in the constructor anymore. You'll need to use Babel of course to transpile that.

Yes, class properties syntax. I mentioned that in the article.

Re: Learning Node.js and React while building a product

#38

Post by coldtea »

miroslavpopovic wrote: post #37
coldtea wrote: post #27

Earlier quoted context omitted.

> Yep, we are using arrow functions and other ES2015+ goodies, but they don't help with event handlers. They do. Just do: myHandler = (v) => { ... } and you don't need to bind in the constructor anymore. You'll need to use Babel of course to transpile that.

Yes, class properties syntax. I mentioned that in the article.

Hmm, so why do you say "but they don't help with event handlers"? Because it's not yet standard?

Re: Learning Node.js and React while building a product

#39

Post by caleblloyd »

tracker1 wrote: post #32
caleblloyd wrote: post #14

If your team is from a .NET background, you may be better off using something with first class Typescript support. I have been working on a boilerplate that uses VueJS with typescript. It is still reactive. I setup the UI to closely mirror the structure of a .NET MVC app. It is much more intuitive to me coming from a strongly typed OO background. The boilerplate is not fully done yet, but here is the UI portion if yo…

There are a lot of people using Typescript with React... it's not so bad, I don't see the point nearly as much as some, but it's definitely there, and pretty well supported.

I tried typescript with react, but found that I was constantly adding `: any` when dealing with `props` and `dispatch`. It felt like it was getting in the way more than it was helping.

Re: Learning Node.js and React while building a product

#40

Post by miroslavpopovic »

coldtea wrote: post #38
miroslavpopovic wrote: post #37

Earlier quoted context omitted.

Yes, class properties syntax. I mentioned that in the article.

Hmm, so why do you say "but they don't help with event handlers"? Because it's not yet standard?

Sorry, I didn't think about the arrow functions being used in class property syntax too. :) So yes, they do help with event handlers, I stand corrected.
Post reply on HN