04 - Assignment.md

Namaste React Course by Akshay Saini

Episode 04 - Talk is Cheap, show me the code

Theory:

• Is JSX mandatory for React?
• Is ES6 mandatory for React?
• {TitleComponent} vs {<TitleComponent/>} vs {<TitleComponent></TitleComponent>} in JSX.
• How can I write comments in JSX?
• What is <React.Fragment></React.Fragment> and <></>?
• What is Reconciliation in React?
• What is React Fiber?
• Why do we need keys in React?
• Can we use index as keys in React?
• What is props in React? Ways to.
• What is Config Driven UI?

Coding:

• Build a Food Ordering App
  • Think of a cool name for your app
  • Build an AppLayout
  • Build a Header Component with Logo & Nav Items & Cart
  • Build a Body Component
    • Build RestaurantList Component
    • Build RestaurantCard Component
      • Use static data initially
      • Make your card dynamic(pass in props)
        • Props - passing arguments to a function - Use Destructuring & Spread operator
      • Render your cards with dynamic data of restaurants
      • Use Array.map to render all the restaurants in the body component

PS. Basically do everything that I did in the class, in the same sequence. Don't skip small things.

References:

• React without JSX
• Virtual DOM
• Reconciliation
• React Fiber Architecture
• React Without ES6
• Index Keys as Anti-Pattern