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