Progressive Web Apps with React

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