Splitting up our app

To organize our app a bit better (and to do some magic in the next section), let’s move our JSX into a separate file from our ReactDOM.render. This will ensure good separation of concerns throughout our file structure.

Next to index.js, in our src folder, create a file called App.js. Inside, we’ll just make a function called App, which returns our JSX:

import React from 'react';

const App = () => {
  return <h1>Hello from React!!</h1>
};

export default App;

Note the export statement at the bottom; this means when we import our file, we’ll automatically get this function as the default import. We'll see an example of non-default imports down the line, which will make this clearer.

If we jump back to index.js, we can now import App from './App’. Then, we render it, as shown:

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

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

Note that we are using it just like an HTML (or rather, JSX) tag. We’ll talk more about why in the coming chapters; for now, the important thing is that our app is a bit more organized, with our view logic (the JSX) separate from the render logic (ReactDOM.render).