E3 - Laying the foundation

Building on the basics, we lay a solid foundation for our React app. You'll learn about component hierarchies, how to pass data with props, and manage component state. These core concepts are the building blocks of every React project.

• Laying the Foundation Notes
• Assignment - Laying the Foundation

Reference links from pdf notes & assignments

• https://babeljs.io/
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
• https://babeljs.io/repl#
• https://legacy.reactjs.org/docs/react-without-jsx.html

key points

• Add script in package.json to run in dev, prod env build & serve
• React Elements v/s DOM Elements
  • React Elements similar like DOM Elements
  • React Elements are just JS Objects, light weight when we rendered into actual DOM becomes HTML elements
• JSX
  • JSX is just syntactic sugar for React.createElement, not developer friendly to use React.createElement to build apps, instead of that using JSX
  • JSX - Javascript XML (combine html & js together)
  • JSX is not HTML inside JS
  • JSX is HTML like or XML like syntax
• Babel is JS compiler, used to convert JSX into JS
  • Explore more on Babel
• React Components
  • Functional Components - JS function which returns JSX / React elements to render
• Every React component name starts with capital letter
• Component composition
• what ever inside { } jsx will sanitized by jsx before render into actual DOM

Assignments - Q & A

1.sada

2.asda