Hello and welcome to my Day2 challenge🥰. Started by creating a simple profile card of myself😘. Not my best picture😅.
Profile card
Rules of JSX
JSX works naturally like HTML, but we can enter JavaScript mode by using curly braces ( {} ) for text or attributes.
We place JavaScript expressions inside the curly braces ( {} ) to reference variables, create arrays and objects, loop over an array using the map method , ternary operator e.t.c.
Statements are not allowed (if/else statements, for loop, switch). Statements do not produce a value.
A piece of JSX can only have one root element. So basically one parent and if you need to return two elements from a component you can use React fragment.
JSX produces a JavaScript expression e.g a JSX <h1>Hello world</h1> is converted to the JavaScript expression React.createElement('h1',null,'Hello world').
Differences between HTML and JSX
className is used instead of class.
htmlFor is used instead of for attribute.
Every tag must be closed in JSX.
Event handlers and other properties need to be camelCased. With some few exceptions of aria-* and data-*.
CSS inline styles are written like {{<style>}} and CSS properties are camelCased.
Comments need to be in {} because they are in JavaScript.
Rendering List
- Learnt how to use the map method to loop over a data to display multiple instances of a component instead of repeating components multiple times.
The first image shows the data to be mapped and the second image shows the map method . The pizzaData to be mapped was created in a different component and imported. The last image shows the result from the map method showing the varieties of pizzas😋.
Conditional Rendering using the && operator
If the left side of the && operator evaluates to true, the right side is returned else a short circuit occurs. For example let's create a footer component for our page and render a text if isOpen is evaluated to true.
The second image displays a text at the footer because isOpen is true. If isOpen is evaluated to false then nothing is displayed.
Conditional rendering with the ternary operator
The ternary operator takes three operands. The first is the condition to be evaluated followed by a ?, the second is an expression to be executed if the condition is a truthy followed by a :, and finally the expression to executed if the condition is falsy.
From the example below, the length of the pizza data is greater than zero hence the if block is returned. If the pizza was set to an empty array as in line 15 in the image below, then the else block will be returned.
To be continued......