04-Assignment 👩‍💻👩‍💻👩‍💻

[mancho-ged]

Chapter 04 - Talk is cheap, show me the code! Assignment ● Is JSX mandatory for React? ● Is ES6 mandatory for React? ● {TitleComponent} vs {} vs {} in JSX ● How can I write comments in JSX? ● What is </React.Fragment> and <></> ? ● What is Virtual DOM? ● What is Reconciliation in React? ● What is React Fiber? ● Why we need keys in React? When do we need keys in React? ● Can we use index as keys in React? ● What is props in React? Ways to ● What is a Config Driven UI ? Coding Assignment: ● Build a Food Ordering App ○ Think of a cool name for your app ○ Build a 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 PS. Basically do everything that I did in the class, in the same sequence. Don't skip small things. References ● Code Link: https://bitbucket.org/namastedev/namaste-react-live/src/master/ ● React without JSX: https://reactjs.org/docs/react-without-jsx.html ● Virtual DOM: https://reactjs.org/docs/faq-internals.html ● Reconciliation: https://reactjs.org/docs/reconciliation.html ● React Fiber Architecture: https://github.com/acdlite/react-fiber-architecture ● React Without ES6: https://reactjs.org/docs/react-without-es6.html ● Index Keys as Anti-Pattern: https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/

[mancho-ged]

1. JSX is not mandatory for react. It is transpiled into react.createElement with babel. Although it is not mandatory it is very convenient and readable syntax so it is used quite a lot.
2. I think ES6 is mandatory for react library, but is not mandatory for developing on it.
3. First is just like react element, but then it actually should be written with lowercase letter, the second is react component included in JSX as self-closing tag and the third is the same component tag but with different syntax
4. In JSX(JavaScript XML), you can use curly braces {} to embed JavaScript expressions, including comments. However, unlike regular JavaScript comments (which are used ‘ / / ' for multi-line comments and ‘ // ' used for single-line comments), JSX comments are treated as JavaScript expressions. {/ This is a single-line comment in JSX /} {/ This is a multi-line comment in JSX. It spans across multiple lines. /}
5. and <> are used when we don't want our component to be included in single html element. It is like placeholder for starting and ending component html code.
6. virtual DOM is a representation of actual DOM and is used to minimise full page repaint when changing something in the DOM.
7. Reconciliation algorithm in react is calculating what is changed in the dom and changes only the parts that should be changed.
8. React Fiber is name of new reconciliation algorithm for react.
9. We need uniq keys in react for our reconciliation algorithm work properly and efficiently and being able to distinguish changed elements from the rest.
10. index as a key is antipattern in React. You should always try to avoid it, because the reconciliation will not work efficiently if order of the elements change and we have index as a key. In this case it will cause rerendering all the list of items.
11. props in react are like an arguments to a function. When we add props as attributes to our react component tag, they will be combined as a properties to an object and passed to component as one object argument.
12. Config driven UI is when UI is dependent on information from back-end

[mancho-ged]

\

[mancho-ged]

src folder