What is CRA?

Tool which can use to create react app

• with some basic React code

• most importantly a bunch of configuration files which help build that React app for production use

  ⇒ it turns out that there will be a couple of transformation and optimization steps between developing and running a React App in production

  → simplified development process

Inside

index.js

• it tells React where this React Application (this user interface, which you build with React in the end)

  → Index.html

  • In public folder
  • this folder is a folder in which we will rarely work but hold important file
  • there is single(only) html file — which is in the end loaded by the browser here
  • Entry point — the place where the React-driven user interface
  • can find <div id=”root”></div>
  • then render by root.render(<App/>)

JSX

• JSX stands for JS XML

  • Html in the end is XML

• JSX is not support in the browser

  • it will automatically be transformed to code
  • which does run in the browser so that we have the best of both worlds

• when check dev toll — you should see some static/JS

• exact number and names of these files might differ

  • but ultimately if you click through these files, you should see some code which looks fairly cryptic .
  • which is definitely not the code we wrote here

  → it hold whole package code (include library code)

Reference