03-Assignment 👷‍♀️

[mancho-ged]

Chapter 03 - Laying the Foundation Topics ● JSX ● React.createElement vs JSX ● Benefits of JSX ● Behind the Scenes of JSX ● Babel & parcel role in JSX ● Components ● Functional Components ○ Composing Components Assignment ● What is JSX? ● Superpowers of JSX ● Role of type attribute in script tag? What options can I use there? ● {TitleComponent} vs {} vs {} in JSX Coding Assignment: ● Create a Nested header Element using React.createElement(h1,h2,h3 inside a div with class “title”) ○ Create the same element using JSX ○ Create a functional component of the same with JSX ○ Pass attributes into the tag in JSX ○ Composition of Component(Add a component inside another) ○ {TitleComponent} vs {\} vs {} in JSX ● Create a Header Component from scratch using Functional Components with JSX ○ Add a Logo on left ○ Add a search bar in middle ○ Add User icon on right ○ Add CSS to make it look nice References ● Babel: https://babeljs.io/ ● Attribute Type: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type ● JS Modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules ● Babel Playground: https://babeljs.io/repl# ● React without JSX: https://reactjs.org/docs/react-without-jsx.html

[mancho-ged]

1) JSX is an html-like syntax for javascript 2) JSX is superpower because of its readability and convenience of use, also it provides sanitazation and prevents malicious cross-scripting code attacks 3) In script tag we can use type attribute with option "module" to use javascript modules, that is import and export variables from files 4) ● {TitleComponent} vs {} vs {} in JSX

first of them is the variable to which react element (JSX code) is assigned, second is for inserting component into other component or JSX element, the third is just different syntax for the second option

[mancho-ged]

### type This attribute indicates the type of script represented. The value of this attribute will be one of the following:

Attribute is not set (default), an empty string, or a JavaScript MIME type Indicates that the script is a "classic script", containing JavaScript code. Authors are encouraged to omit the attribute if the script refers to JavaScript code rather than specify a MIME type. JavaScript MIME types are listed in the IANA media types specification.

importmap This value indicates that the body of the element contains an import map. The import map is a JSON object that developers can use to control how the browser resolves module specifiers when importing JavaScript modules.

module This value causes the code to be treated as a JavaScript module. The processing of the script contents is deferred. The charset and defer attributes have no effect. For information on using module, see our JavaScript modules guide. Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching.

speculationrules Experimental This value indicates that the body of the element contains speculation rules. Speculation rules take the form of a JSON object that determine what resources should be prefetched or prerendered by the browser. This is part of the Speculation Rules API.

Any other value The embedded content is treated as a data block, and won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. All of the other attributes will be ignored, including the src attribute.