See here for dev env setup



My notes are in green italics:

Success! Created my-app at D:\checkoutsFromGitRepositories\github.com.sohrabsaran\softwareSkillsDemos\frontend\react\developOnLocalDevEnv\my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server. Somehow works even if homepage attribute is set/changed in package.json. 

  npm run build
    Bundles the app into static files for production. 
    These files are available in chunks (no longer a single bundle.js) in the 'build' folder.
    Chunks are used among other things, to reduce the loading time (see here for more details). 
    The easiest way I found to deploy, was to commit this folder and so comment out 'build' from .gitignore.
    Then set homepage attribute in package.json to the corresponding github page url.
    The build then gets deployed to this url, whenever 'npm run build' is done, and the changes to the build folder are committed.
    
    
  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!



Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.33 KB  build\static\js\2.db39837d.chunk.js
  1.59 KB   build\static\js\3.4a34e60f.chunk.js
  1.17 KB   build\static\js\runtime-main.40989a61.js
  590 B     build\static\js\main.a31a76ce.chunk.js
  531 B     build\static\css\main.8c8b27cf.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment




Setup: see here. I named my app react-typescript-app.

The output of 'npx create-react-app react-typescript-app --template typescript' is identical to the output of the without-typescript 'npx create-react-app...' command.
Deployment steps are also identical; the app is deployed here.

Tips:
- See here for localhost SSL certificate deployment for create-react-app.
- To pass container component state changes down to the children, set 'children' field of the container component's props interface to have return type of function that takes in the changed data as input parameters and renders JSX as output. In the container component, in the rendering function, call the function children(...). When using the container component in JSX, only a function having the signature of the children props is now allowed to be rendered between the opening and closing tags of the container. However one can still render JSX directly in this function.   
- To pass component state either upwards or downwards (but with more code than render props) have a callback function prop that can be listened to by whoever needs to listen. Ensure that the callback function is called by the component that needs to expose the state, only after that component's own rendering function has been completed. In React Functional Components, the callback function can be called inside a useEffects() hook, with the dependency array parameter containing only those state variables that are being exposed as changed, via the callback function.