[epmatsw]

What linter are you using? ESLint handles JSX fine as far as I know. And with eslint-plugin-react it actually does some pretty neat validation on it as well.

I will say that I initially disliked the inline markup as well, but it honestly just makes practical sense. When we used Handlebars still, I always had the template open in a split when I was editing a view anyway, why not just keep it all as one contained unit?

[riebschlager]

I'm using JSHint. I know it's just complaining because of the way I have my .jshintrc set up, but this markup-in-scripts thing is a big mental shift for me. But hey, I'll try anything once.

[aidos]

It's definitely a big mental shift, but it's worth giving it a proper go.

For those of us who have been coding since before there was even JS, it's hard to let go of the Html / JS split but honestly, it's so much nicer when you just grab the React approach and run with it.

[pritambarhate]

>>this markup-in-scripts thing is a big mental shift for me<<

Yes for me too.

While making web applications with JEE and PHP for a decade, every best practice article on creating maintainable web apps told me to keep markup and logic different. That too in different files preferably in different folders like Controllers, Views, etc. Same for not mixing JS and CSS with HTML. And in practice it worked very well for me. So when I saw React's approach of putting JSX straight in JS code, I was thrown off a bit.

Even Angular 1.x felt wrong with adding nonstandard directives in plain HTML. Common wisdom before Angular was only to use standard HTML/XHTML that passes W3 Validator, then use JavaScript to enhance the page.

But then I just made peace with Angular and React way of doing things. If I want to get the benefits of the Angular/React eco system, then I need to use their approach, and still make sure that I produce maintainable code.