Net Ninja's React JS tutorial in c9.io - skipping webpack by using create-react-app

OK, many are the quirks in c9.io and many many are the quirks in configuring webpacket.

At this point I just want to improve how react itself works and not get bogged down in figgerin out webpacket (I will do that later, however).

So what I did was go through the first page or two of this tutorial: http://www.react.express/environment and am just figuring out how to do the Net Ninja tutorial on top of the template you get when you use create-react-app

The flavors of react are a little different bu I believe that will save me a lot of time.

First I got the create-react-app up and running just fine in the browser.

So going forward I am just tacking the Net Ninja components onto the existing app.

So for example the react app gives you

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
   import registerServiceWorker from './registerServiceWorker';

     ReactDOM.render(<App />, document.getElementById('root'));
     registerServiceWorker();

and 

    import React, { Component } from 'react';

    import logo from './logo.svg';

    import './App.css';

    class App extends Component {

     render() {

         <header className="App-header">

              <img src={logo} className="App-logo" alt="logo" />

              <h1 className="App-title">Welcome to React</h1>

             </header>

            <p className="App-intro">

              To get started, KLJHKJLHKJ dit <code>src/App.js</code> and save to reload.

             </p>

        );

      }   

    }

    export default App;

So, for the very first component Net Ninja has us build, I just changed App to 

    import React, { Component } from 'react';

    import logo from './logo.svg';

    import './App.css';

    class App extends Component {

     render() {

         return (

          <div className="App">

           <h1>hellooooooooo</h1>

          </div>

        );

      }   

    }

    export default App;

Now, if I wanted to in turn add a child component to App I can just do this:

    import React, { Component } from 'react';

    import logo from './logo.svg';

    import './App.css';

    import Howdy from './Howdy';

    class App extends Component {

     render() {

         return (

          <div className="App">

           <h1>hellooooooooo</h1>

           <Howdy />

          </div>

        );

      }   

    }

    export default App;

and here is the 'Howdy' component:

    import React, { Component } from 'react';

    import logo from './logo.svg';

    import './App.css';

    class Howdy extends Component {

     render() {

         return (

          <div className="App">

           <h1>howdy howdy howdy howdy howdy!</h1>

          </div>

        );

      }   

    }

    export default Howdy;

NOTICE THE FOLLOWING:

The App component can use the Howdy component because the App component contains

     import Howdy from './Howdy';

And the Index component can use the App component because the Index component contains

    import App from './App';