ReactProject

Topics

• JSX
• React.createElement vs JSX
• Benefits of JSX
• Behind the Scenes of JSX
• Babel & parcel role in JSX
• Components
• Functional Components
• Composing Components

Theory Assignment:

• What is JSX?
• Superpowers of JSX.
• Role of type attribute in script tag? What options can I use there?
• {TitleComponent} vs {<TitleComponent/>} vs {<TitleComponent></TitleComponent>} 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 attribute into the tag in JSX
  • Composition of Component (Add a component inside another)
  • {TitleComponent} vs {<TitleComponent/>} vs {<TitleComponent></TitleComponent>} in JSX.

• Create a Header Component from scratch using Functional Component 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
• Attribute Type
• JS Modules
• Babel Playground
• React without JSX