Create React App

The recommended way to create react applications is with the Vite npm package:
npm install -g vite
 
 

Creating the application

Once you have the vite module installed, you can create your standard react application skeleton as follows:
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev


Common React CLI commands

Start the development server:
npm start

Bundle the app into static files for production:
npm run build

Start the test runner:
npm test

Clearing npx cache:
npx clear-npx-cache

react-scripts vulnerability

The npm audit for the front end React framework is not accurate because react-scripts is used during the build of the project, but is not included in the production build of the code, so it is not a true vulnerability and should be omitted from the audit. This is done by moving react-scripts to devDependencies in the package.json file:
"devDependencies": {
"react-scripts": "5.0.1"
},

Then when you audit the module, you should omit the dev dependencies:
npm audit --omit=dev

Reference: https://github.com/facebook/create-react-app/issues/11174

HTML

class to className

HTML properties become camelCase. Ex. maxlength to maxLength

Numbers must be in curly braces. Ex. maxLength = {13}

If conditions must be done outside of JSX, but ternary expressions are allowed. Ex. {(x) < 10 ? "Hello" : "Goodbye"}

In-Line CSS Styles must be objects. Ex. style={{color: "red"}}

Bundling

JSX is our source code.

Babel converts JSX to JavaScript.

WebPack merges all our our code into a single bundle.js file.