Though no longer the recommended path by reactjs.dev to spin up a new react up, this tut will use create-react-app.dev to get started quickly. Prerequisites are node>=14 needs to be installed and npm>=5.6 needs to be installed.

• Check the versions of each by running these commands: node --version & npm --version in a shell.

To create a project called my-app, at the root folder, run this command: npx create-react-app client-app --use-npm --template typescript

If you receive npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY error, try running: npm config set strict-ssl false to disable SSL first.

When finished, if successful, a new "client-app" folder with contents should exist in the root folder.

Switch into the new folder and start the new app: cd client-app & npm start that will launch the browser at http://localhost:3000.

The code generated a single-page application, which can be viewed at client-app\public\index.html.

The client loads the HTML, and then it goes and gets whatever javascript it needs for the application to function. When the page is served, the React app complies into javascript (even though it is typescript) and then injected into the HTML from memory, which is then loaded into bundle.js script tag.

In the index.html - <div id="root"></div> is where the react application goes. That root element maps to the client-app\src\index.tsx code which retrieves by id and then renders the react component called app:

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

The React App component displayed on that page is viewable at client-app\src\App.tsx which is typescript. Note, if it was just pure Javascript then the ext would be .jsx instead.

The package.json contains a dependencies node, which describes what the app needs to run and are populated into the client-app\node_modules folder when npm install is run.