Create React App

link - create-react-app.dev/

This creates a front-end build framework for quickly creating single-page applications that use React.
This offers client side rendering (NextJS can be used for server side rendering)
You can use this to create a project that lets you focus in the code rather than the build tools.
It sets up your development environment so that you can use the latest JavaScript features,
Under the hood this uses [[Babel]] and [[Webpack]].

Creating

Create a folder C:\temp\create-react-app\
Install the Create React App Node module locally.

npx create-react-app myappname     // application name must be lowercase 
npm start    // starts the React local development server on port 3000

This takes a few minutes to install.

cd myappname

starts the React local development server on port 3000 and displays "http://localhost:3000"

npm start

Press Ctrl + C to terminate.

npm run build   // bundles the app into static files

package.json

{ 
   "name": "myappname", 
   "version": "0.1.0", 
   "private": true, 
   "dependencies": { 
      "@testing-library/jest-dom": "^5.17.0", 
      "@testing-library/react": "^13.4.0", 
      "@testing-library/user-event": "^13.5.0", 
      "react": "^18.2.0", 
      "react-dom": "^18.2.0", 
      "react-scripts": "5.0.1", 
      "web-vitals": "^2.1.4" 
   }, 
   "devDependencies": {}, 
   "scripts": { 
      "start": "react-scripts start", 
      "build": "react-scripts build", 
      "test": "react-scripts test", 
      "eject": "react-scripts eject" 
   } 
   "eslintConfig": { 
     "extends": [ 
       "react-app", 
       "react-app/jest" 
     ] 
   } 
}

public/index.html

The public folder contains all the static files.

<!doctype html> 
<html lang="en"> 
   <head> 
      <meta charset="utf-8" /> 
      <meta name="viewport" content="width=device-width, initial-scale=1" /> 
      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 
      <meta name="viewport" content="width=device-width, initial-scale=1" /> 
      <meta name="theme-color" content="#000000" /> 
      <meta name="description" content="Web site created using create-react-app" /> 
      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 
      <title>React App</title> 
   </head> 
   <body> 
      <noscript>You need to enable JavaScript to run this app.</noscript> 
      <div id="root"></div> 
   </body> 
</html>

src/index.js

The src folder contains all the dynamic/source files.

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

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

src/index.css

body { 
   margin: 0; 
   font-family: sans-serif; 
} 
code { 
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 
}

src/App.js

import logo from './logo.svg';  
import '/App.css';  

function App() { 
  return ( 
    <div className="App"> 
      <header className="App-header"> 
        <img src={logo} className="App-logo" alt="logo" /> 
        <p> 
          Edit <code>src/App.js</code> and save to reload. 
        </p> 
        <a 
          className="App-link" 
          href="https://reactjs.org" 
          target="_blank" 
          rel="noopener noreferrer" 
        > 
          Learn React 
        </a> 
      </header> 
    </div> 
  ); 
} 
export default App;

src/App.test.js

import { render, screen } from '@testing-library/react';  
import App from './App';  

test('renders learn react link', () => { 
  render(<App />); 
  const linkElement = screen.getByText(/learn react/i); 
  expect(linkElement).toBeInTheDocument(); 
});

src/App.css

.App { 
   text-align: center; 
} 

.App-logo { 
   animation: App-logo-spin infinite 20s linear; 
   height: 80px; 
} 

@media (prefers-reduced-motion: no-preference) { 
  .App-logo { 
    animation: App-logo-spin infinite 20s linear; 
  } 
} 

.App-header { 
  background-color: #282c34; 
  min-height: 100vh; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  font-size: calc(10px + 2vmin); 
  color: white; 
} 

.App-link { 
  color: #61dafb; 
} 

@keyframes App-logo-spin { 
   from { transform: rotate(0deg); } 
   to { transform: rotate(360deg); } 
}

src/setupTests.js

jest-dom adds custom jest matchers for asserting on DOM nodes.
Allows you to do things like: expect(element).toHaveTextContent(/react/i)

import '@testing-library/jest-dom';