[ohnomrbill]

I fully agree that his version has flaws, and I certainly am not convinced that he presents a credible case against using React. But to be fair, I think part of his rationale for doing things this way is to avoid the configuration needed to develop with React. I'm somewhat ignorant, so what is the necessary tooling/configuration needed to convert this file to something that can easily be executed in the browser?

[undo76]

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...

[true_religion]

I think the issue people have with React is that a lot of tutorials assume you are already using NPM/Babel.

If you're using a module importer already then adding React to your stack is pretty easy. For example with JSPM:

$ jspm install --dev react react-dom $ npm install --save-dev babel-preset-react

Then add 'react' to your .babelrc preset.

In your ES6 javascript file you can now use react via:

import React from 'react';

----

That's it.

However, if you have none of that already set up... Then you'll naturally be persuaded that now is the time to get a 'modern' javascript environment setup and doing so can take time. It took me about 2 days of beating through RequireJS --> Webpack --> JSPM before I settled on the latter.

Figuring all that was difficult, but looking back on it was extremely useful to now have all my Javascript bundling done within JSPM rather than using some Django bundler, and downloading raw JS files from the internet without evening using Babel to help me write ES6/ES7.

[dceddia]

This article was my first exposure to React, and it goes through the basics of building a very simple "list of people" using nothing more than a single HTML file. It doesn't even use JSX, instead showing you how to build the raw JS that the JSX would compile to. I found it to be a great introduction without a lot of overhead to learn.

http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webp...

[Chris_Newton]

There are a few ways you could build a working site from undo76’s example. Unfortunately all the noise around modern JS does make it seem more complicated than it really is, but you can set up everything you need in about two minutes.

The only essentials you need are React itself and, because the example uses ES2015 and JSX code, Babel to transpile the script into more portable JS that will run in today’s browsers.

In practice you’d probably also be using Node/NPM to manage packages and a tool like Browserify or Webpack to resolve dependencies. I’ll use Browserify.

So, here is a complete working example. For the script, we’ll use undo76’s original code verbatim, and add imports of the React modules at the start of the file. Let’s call this index.src.js:

    import React from "react";
    import ReactDOM from "react-dom";

    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'));

As usual, we need an HTML file to load that script, though it doesn’t need to do much else except provide a <div> with an ID where we’ll put the content that React renders. Otherwise just use your preferred boilerplate. Let’s call this index.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>React test</title>
    </head>
    <body>
    <div id="content"></div>
    <script src="index.js" charset="utf-8"></script>
    </body>
    </html>

Finally, we need the tools and React packages:

    npm init
    npm install --save react react-dom
    npm install --save-dev browserify babelify babel-preset-es2015 babel-preset-react

Now we can run Browserify to generate our output JS file (adjust the / to \ if you’re running on Windows):

    node_modules/.bin/browserify index.src.js -o index.js -t [ babelify --presets [ es2015 react ] ]

That will produce index.js, which is just the code from undo76 linked with React and then transpiled to a more portable level of JS that today’s browsers can cope with. (Incidentally, this is literally the first example on the Babelify documentation page, which gives you an idea of how routine it is once you’re familiar with these tools.)

Now load index.html in your browser of choice and enjoy. :-)