undo76

Reality is stubborn, isn't it?

I agree that maybe "trolling" is not the most accurate description. The author seems to be a competent coder, so I am assuming that he knows that such a solution for view components is flawed at least and that it would be a nightmare to go that way.

My biggest concern with the original post is the next sentence, "If you want to use React, fine, I am not trying to convince anyone not to. I just want to show that components in a JavaScript application are quite simple to do and do not require any framework at all to do so." (The author has updated the post to clarify that "I am a proponent of using libraries and frameworks." I think that this was missing in the original post, I think that it would have been nice to add at the end of the post "Crazy, isn't it? Don't do it! Don't reinvent the wheel and tada-tada-tada...)

Not sure about the intentions of the author, but I think that the original post makes a great case to support the use of these frameworks and not the opposite.

Stupid me. I missread the code and did a proof of concept in jsbin just adding "</script><script>alert('XSS');</script><script>" as a hobby. Now I realise that I added it in the HTML view so I was just closing the original <script> tag. So, no XSS issues, AFAIK. I am updating my original response to reflect this.

Nevertheless, using a framework like React protects you automatically from accidentally adding XSS vulnerabilities.

Well, technically you don't need to know JSX, but it pays off to know it IMHO. Moreover, the DOM API is much more complicated than React API and the latest doesn't depend on the particular browser you are using.

But yes, to use a technology, you need to understand it.

Regarding the size, you are right, I wouldn't recommend to use React for such a tiny task.

It is a misconception that you need a lot of configuration to start with React. The minimum setup requires just to import the React libs in your webpage and to transpile your code to ES5 using Babel in case you are using JSX/ES6 (recomended).

Of course for bigger projects, it pays off to use an automatic build tool like webpack or gulp.

https://jsbin.com/keyuqohusa/edit?html,js,output

https://babeljs.io/repl/#?experimental=false&evaluate=true&l...

Am I the only one that thinks that the author is trolling? I mean, the final code has obvious flaws:

a) Difficult to read and mantain. (Compare with the version below).

b) Inefficient in a real world scenario as it has to recreate the DOM every time the model changes.

c) Difficult to test as it requires a DOM API.

d) XSS issues (Text returned from the service is not escaped in the DOM!)

e) Non isomorphic (Unless we have a DOM API in the server capable of emiting plain HTML).

Nevertheless, I agree that using React for such a trivial project would be too much, but there are other alternative frameworks that would fit for this kind of task (e.g. riot.js, Cycle.js, [Insert here your favourite one]).

My React version:

  const DATA = {    
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
  }

  const App = ({ profileData }) => (
    <div>
      <Profile { ...profileData } />
      <Hobbies { ...profileData } />
    </div>
  );

  const Profile = ({ name, imgURL }) => (
    <div>              
      <h3>{name}</h3>
      <img src={imgURL} />
    </div>
  );    

  const Hobbies = ({ hobbyList }) => (
    <div>
      <h5>My hobbies:</h5>
      <ul>
        { hobbyList.map( (hobby, idx) => (
          <li key={ idx }>{ hobby }</li>
        ))}
      </ul>
    </div>
  );

  ReactDOM.render(<App profileData={DATA} />, document.getElementById('content'));