Learning React and JSX

Learning React and JSX

Key Terms

Transiplation

“Transpilation” is the act of code “conversion” from one form to another, within the same language / format family

• One example would be sibling languages / language extensions (eg. .jsx → .js)
• Another example would be for version compatability (eg. JavaScript ES6 → JavaScript ES5 via Babel)

Some example termninal commands used for transpilation can be found below

# Transpile JSX to JS using Babel CLI
npx babel src --out-dir lib --extensions ".js,.jsx"

# Transpile ES6+ to ES5
npx babel script.js --out-file script.es5.js

Common Directory Structure of a React App

my-app/
  ├── build/
  │   ├── src/
  │   │   ├── css/
  │   │   ├─ main.f855e6bc.css
  │   │   └── main.f855e6bc.css.map
  │   │   │
  │   │   ├── js/
  │   │   ├── 453.ed3810f9.chunk.js
  │   │   ├── 453.ed3810f9.chunk.js.map
  │   │   ├── main.30b36790.js
  │   │   ├── main.30b36790.js.LICENSE.txt
  │   │   └── main.30b36790.js.map
  │   │   │
  │   │   ├── media/
  │   │   └── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg
  │   │
  │   ├── asset-manifest.json
  │   ├── favicon.ico
  │   ├── index.html
  │   ├── logo192.png
  │   ├── logo512.png
  │   ├── manifest.json
  │   └── robots.txt
  │
  ├── node_modules/
  │   ...
  │
  ├── public/
  │   ├── favicon.ico
  │   ├── index.html
  │   ├── logo192.png
  │   ├── logo512.png
  │   ├── manifest.json
  │   └── robots.txt
  │
  ├── src/
  │   ├── App.js
  │   ├── App.css
  │   ├── App.test.js
  │   ├── index.css
  │   ├── index.js
  │   ├── logo.svg
  │   ├── reportWebVitals.js
  │   └── setupTests.js
  │
  ├── .gitignore
  ├── package.json
  ├── package-lock.json
  └── README.md

Miscellaneous

• robots.txt is a file to tell “good” bots / web scrapers where they should avoid indexing, it does not physically stop a “bad” bot from accessing anything
• Using npx create-react-app my-app ⇒ cd my-app ⇒ npm start or npm run build is apparently deprecated in favour of using a framework or build tool, as the older method required more manual setup and less consistency across projects