Create React App

The easiest way to scaffold a react application is by using the create-react-app tool.

npx create-react-app my-app-name --use-npm

To run the created app:

cd my-app-name
npm run start

Once the app is running, open your browser and visit http://localhost:3000.

When I want to create a simple React app, I like to strip down the boilerplate code generated by create-react-app to the bare minimum! Therefore, I delete everything except for index.html in the public folder. Moreover, I remove everything except for App.js and index.js from the src folder. Finally, I simplify the remaining files as follows.

index.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
index.js 
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <App />, 
  document.getElementById("root")
);
App.js 
function App() {
  return <div>Hello React!</div>;
}

export default App;

Generally speaking, you build your application in the App.js. The index.js contains the instruction to render the application. The app will be rendered (mounted to) the 'root' div element inside the index.html.

The render method can mount any React component to any DOM element. 

ReactDOM.render(/* React Component */, /* DOM element */);

The separation between the App.js and index.js is symbolic! The philosophy of React is to decouple the process of creating an app and rendering it. However, you can combine the two to simplify the template application further!

index.js 
import ReactDOM from "react-dom";

function App() {
  return <div>Hello React!</div>;
}

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