Things every React.js beginner should know • Hacker News Board

Re: Things every React.js beginner should know

#11

Post by arethuza » Mon, Jan 25, 2016, 1:19 PM UTC

pkrumins wrote: post #10

I'm not a React or Angular expert, but do you really put HTML inside of your JS code? It just bothers me too much. We spent years in early web days learning that code and templates should be separate, yet here we are putting HTML inside of code, which goes against years of practice. Can anyone share their professional thoughts about this?

Isn't that because it's really JSX?

https://facebook.github.io/react/docs/jsx-in-depth.html

[NB Not that I know, just checking my own understanding].

Re: Things every React.js beginner should know

#12

Post by vdnkh » Mon, Jan 25, 2016, 1:20 PM UTC

pkrumins wrote: post #10

I'm not a React or Angular expert, but do you really put HTML inside of your JS code? It just bothers me too much. We spent years in early web days learning that code and templates should be separate, yet here we are putting HTML inside of code, which goes against years of practice. Can anyone share their professional thoughts about this?

I'm a fan of practicing "stateless development", where years of "thats what we've always done" has no bearing on what I'm doing now. Writing HTML in JS is much more pleasing than cramming JS into HTML via Angular.

Re: Things every React.js beginner should know

#13

Post by Retozi » Mon, Jan 25, 2016, 1:20 PM UTC

didgeoridoo wrote: post #3

#10: This guide will be out of date in 3 months.

I really don't understand the underlying complaint of your comment that the React ecosystem is in constant flux (see what I did there?)

I've been writing React SPAs for roughly two years now.

Very few things have changed. The first app I've written roughly looks like the newest one. Couple of lessons learned here and there like everywhere else.

Yes, there are many Flux libraries and different implementations. However, a decent State management solution for React is roughly 200-300 LOC. So there are many of those 200-300 LOC libraries. So what?

If it's a big project, you should spend the time to figure out what fits YOUR project and YOUR team the best.

If it's a side project, use the most popular with the best documentation and be done with it.

Re: Things every React.js beginner should know

#14

Post by Ronsenshi » Mon, Jan 25, 2016, 1:23 PM UTC

pkrumins wrote: post #10

I'm not a React or Angular expert, but do you really put HTML inside of your JS code? It just bothers me too much. We spent years in early web days learning that code and templates should be separate, yet here we are putting HTML inside of code, which goes against years of practice. Can anyone share their professional thoughts about this?

Yes we do. I've been in a very similar position as you are - I was complaining against putting HTML in JS, however I've changed my opinion after actually started using React professionally.

From the side it might look like a bad practice, but I promise - this "HTML" in JS leads to fantastic testability. And I certainly prefer to work this way instead of filling HTML with numerous of "ng-" attributes where you're trying to force app generate code that you want.

Sidenote: even though it looks like HTML, it is not exactly HTML.

Re: Things every React.js beginner should know

#15

Post by rakoo » Mon, Jan 25, 2016, 1:23 PM UTC

pkrumins wrote: post #10

I'm not a React or Angular expert, but do you really put HTML inside of your JS code? It just bothers me too much. We spent years in early web days learning that code and templates should be separate, yet here we are putting HTML inside of code, which goes against years of practice. Can anyone share their professional thoughts about this?

Take a look at the talk where the concepts behind React are introduced:

https://www.youtube.com/watch?v=x7cQ3mrcKaY

It turns out there is no good reason to separate code and templates, because they are intrisically linked; one cannot work without the other. The separation should rather happen on units that are really independent, such as 2 separate pages of your application.

Re: Things every React.js beginner should know

#16

Post by DrJokepu » Mon, Jan 25, 2016, 1:25 PM UTC

pkrumins wrote: post #10

I'm not a React or Angular expert, but do you really put HTML inside of your JS code? It just bothers me too much. We spent years in early web days learning that code and templates should be separate, yet here we are putting HTML inside of code, which goes against years of practice. Can anyone share their professional thoughts about this?

You don't have to, you can work with React straight from vanilla JavaScript though. I don't know anyone who does it though (except in tests), because it's nearly not as pleasant to work with as JSX.

It is possible to separate JSX elements from the rest of your code if you use ES6 React components or functional components (that is, you don't use React.createClass), because in those cases there is no need to compile the components themselves, so in theory you could separate the "HTML" bits into separate, dedicated files. It's not really a problem I've faced so far, but might end up doing in the future.

Re: Things every React.js beginner should know

#17

Post by tzaman » Mon, Jan 25, 2016, 1:25 PM UTC

pkrumins wrote: post #10

I'm not a React or Angular expert, but do you really put HTML inside of your JS code? It just bothers me too much. We spent years in early web days learning that code and templates should be separate, yet here we are putting HTML inside of code, which goes against years of practice. Can anyone share their professional thoughts about this?

I think this is what everyone feels when starting with React, but the pros are much bigger (and more of them) than the cons.

the main difference between React and everything else is that React brings HTML to Javascript (and not vice versa). The result is code, that's easy to understand, test, develop. Code and templates should be decoupled, but in UI development, template is just the visual representation of behaviour (code), which means it makes sense to couple them. Plus when you develop in React, most of the logic should be outside of components in any case (I use Redux so it's in reducers and middleware + some util files).

Re: Things every React.js beginner should know

#18

Post by herval » Mon, Jan 25, 2016, 1:26 PM UTC

pkrumins wrote: post #10

I'm not a React or Angular expert, but do you really put HTML inside of your JS code? It just bothers me too much. We spent years in early web days learning that code and templates should be separate, yet here we are putting HTML inside of code, which goes against years of practice. Can anyone share their professional thoughts about this?

A lot of recent trends feel like going backwards to grumpy-me as well. Microservices being preached basically the same way SOA was (and falling on every single pitfall again), languages where copypasta and mutable state are "the idiomatic way", HTML inside js code.

Granted, not all recent developments are bad, of course - eg compiled & typed languages being back in "fashion" is a good development imho. It just feels to me we're either not very good at passing knowledge down or just collectively don't care much about learning history to avoid the same mistakes.

Re: Things every React.js beginner should know

#19

Post by dustingetz » Mon, Jan 25, 2016, 1:27 PM UTC

pkrumins wrote: post #10

I'm not a React or Angular expert, but do you really put HTML inside of your JS code? It just bothers me too much. We spent years in early web days learning that code and templates should be separate, yet here we are putting HTML inside of code, which goes against years of practice. Can anyone share their professional thoughts about this?

there are thousands of threads and blog posts about this please use the search, e.g. https://www.google.com/#safe=off&q=%22jsx+site:news.ycombina...

everyone else please stop replying

Re: Things every React.js beginner should know

#20

Post by Ronsenshi » Mon, Jan 25, 2016, 1:28 PM UTC

#3 Write functional components

I'd say "Write functional components where it makes sense". For simple components that is a reasonable advise, however in cases when you need such methods as `componentDidUpdate` or generally any lifecycle methods - that won't do and you have to use classes.