What is the proper way to build a React 0.12 Project?

Question

I have just upgraded from React 0.11.1 to 0.12.2. Up until now my code structure was that so my Components were in their own directory, I would use Grunt to compile them to a javascript directory and then concatenate that with React.js into one file to use in index.html.

Project
    |_index.html
    | JSX
        |_someFile.jsx
    | JS
        |_somefile.js
        | Lib
            |_react.js
    | Production
        |_concatenated.js


 module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        react: {
            dynamic_mappings: {
                files: [
                    {
                        expand: true,
                        cwd: 'jsx/',
                        src: ['*/*.jsx', '*.jsx'],
                        dest: 'js/',
                        ext: '.js'
                }
              ]
            }
        },
        concat: {
            dist: {
                src: ['js/lib/*.js', 'js/*/*.js'], 
                dest: 'prod/built.js'
            }
        },
    ...
    });
};

Once I upgraded to React 0.12.2 I got the message " Warning: Something is calling a React component directly. Use a factory or JSX instead. See: h[ttp://fb.me/react-legacyfactory][1] " The code would work, but clearly I am using some old conventions. I read react-legacyfactory and the new documentation , it looked like all I had to do was add require to the project, and call var React = require('react'); I did that, I even added react and reactify to my package.json just in case, but now I get " Uncaught Error: Module name "react" has not been loaded yet for context: _. Use require([]) " I'm not terribly familiar with require, or with how React is being built now. Does concatenating all of my JS files contradict with how React projects are supposed to work now?

Answer 1

What version of grunt-react are you using? I believe you'll get this error if you are using the latest version of react in your page but you compiled your jsx with an older version of react-tools.