How React Works

Question 1

In React we create apps using what king of JS syntax?

Answer 1

JSX

Question 2

The most atomic units of React are …..

Answer 2

React Elements

Question 3

HTML elements relate to one another in ……

Answer 3

in a hierachy that resembles a family tree

Question 4

<section id="baked-salmon">
  <h1>Baked Salmon</h1>
  <ul class="ingredients">
    <li>2 lb salmon</li>
    <li>5 sprigs fresh rosemary</li>
    <li>2 tablespoons olive oil</li>
    <li>2 small lemons</li>
    <li>1 teaspoon kosher salt</li>
    <li>4 cloves of chopped garlic</li>
  </ul>
  <section class="instructions">
    <h2>Cooking Instructions</h2>
    <p>Preheat the oven to 375 degrees.</p>
    <p>Lightly coat aluminum foil with oil.</p>
    <p>Place salmon on foil</p>
    <p>Cover with rosemary, sliced lemons, chopped garlic.</p>
    <p>Bake for 15-20 minutes until cooked through.</p>
    <p>Remove from oven.</p>
  </section>
</section>

How many root elements are there and how many children are there?

Answer 4

One root element (in this case, a section) - which has three children: a heading, an unordered list of ingredients, and a section for the instructions.

Question 5

In web development SPA stands for ?

Answer 5

Single-Page Applications

Question 6

What features of JS lead to ease of developing SPA ?

Answer 6

AJAX
Asynchronous JS and XML

Question 7

The DOM API is a collection of ….

Answer 7

Objects

Question 8

DOM is made up of DOM elements; and the React DOM is made up of ……

Answer 8

React Elements

Question 9

A React element is a description of ….

Answer 9

What the actual DOM element should look like.

In other words, React elements are the instructions for how the browser.

Question 10

What would creating the following HTML look like in React?
```<h1 id="recipe-0">Baked
Salmon</h1>
~~~

Answer 10

React.createElement("h1", { id: "recipe-0" }, "Baked Salmon");

Question 11

What are the arguments in the following reactJS expression?
```React.createElement(“h1”, { id: “recipe-0” }, “Baked Salmon”);
~~~

Answer 11

• The first argument defines the type of element we want to create. eg. h1 element.
• The second argument represents the element’s properties in this case id of recipe-0.
• The third argument represents the element’s children: any nodes that are inserted between the opening and closing tag

Question 12

How would the JS literal for the following DOM element look like?
```<h1 id="recipe-0">Baked Salmon</h1>
~~~

Answer 12

{
  \$\$typeof: Symbol(React.element),
  "type": "h1",
  "key": null,
  "ref": null,
  "props": {id: "recipe-0", children: "Baked Salmon"},
  "_owner": null,
  "_store": {}
}

- These are fields used by React to construct the DOM element.

Question 13

How are react elements created and rendered?

Answer 13

1. To created element - use the React.createElement( )
2. To render use ReactDOM.render()
   ~~~
   const dish = React.createElement(“h1”, null, “Baked Salmon”);

ReactDOM.render(dish, document.getElementById(“root”));
~~~

Question 14

What are the arguments for the ReactDOM.render( ) ?

Answer 14

1. The first argument is the DOM element to be rendered?
2. The second element is the “root” or node where the element is inserted.
   ~~~
   const dish = React.createElement(“h1”, null, “Baked Salmon”);

ReactDOM.render(dish, document.getElementById(“root”));
~~~

Question 15

What would be the JS literal for the following DOM element?
```<ul>

<li>2 lb salmon</li
<li>5 sprigs fresh rosemary</li>
<li>2 tablespoons olive oil</li>
<li>2 small lemons</li><li>1 teaspoon kosher salt</li><li>4 cloves of chopped garlic</li>
</ul>
~~~
</li>

Answer 15

{
    "type": "ul",
    "props": {
    "children": [
    { "type": "li", "props": { "children": "2 lb salmon" } … },
    { "type": "li", "props": { "children": "5 sprigs fresh rosemary"} … },
    { "type": "li", "props": { "children": "2 tablespoons olive oil" } … },
    { "type": "li", "props": { "children": "2 small lemons"} … },
    { "type": "li", "props": { "children": "1 teaspoon kosher salt"} … },
    { "type": "li", "props": { "children": "4 cloves of chopped garlic"} … }
    ]
    ...
    }
}

Question 16

Given the following data set how would you create ul element with its indexes making up the li items using React.createElement() ?
~~~
const items = [
“2 lb salmon”,
“5 sprigs fresh rosemary”,
“2 tablespoons olive oil”,
“2 small lemons”,
“1 teaspoon kosher salt”,
“4 cloves of chopped garlic”
];
~~~

Answer 16

One can try:
~~~
React.createElement(
“ul”,
{ className: “ingredients” },
items.map((ingredient, i) =>
React.createElement(“li”, { key: i }, ingredient)
)
);
~~~

Question 17

what is the syntax for a react class component?

Answer 17

class IngredientsList extends React.Component {
  render() {
    return React.createElement(
      "ul",
      { className: "ingredients" },
      this.props.items.map((ingredient, i) =>
        React.createElement("li", { key: i }, ingredient)
      )
    );
  }
}

Question 18

What is JSX?

Answer 18

A JS extention that allows us to define React elements/components using a tag-based syntax

Question 19

Inside JSX JS expression are wrapped in …

Answer 19

curly braces
~~~

<h1>{title}</h1>

~~~

Question 20

Before JSX can be intepreted by a browser it needs to ….

Answer 20

To be converted to JavaScript

This process is called compiling, and it’s what compilers like Babel are

Question 21

Given the following data set outline how you can create react components that display it as ul ements from it?

const data = [
  {
    name: "Baked Salmon",
    ingredients: [
      { name: "Salmon", amount: 1, measurement: "l lb" },
      { name: "Pine Nuts", amount: 1, measurement: "cup" },
      { name: "Butter Lettuce", amount: 2, measurement: "cups" },
      { name: "Yellow Squash", amount: 1, measurement: "med" },
      { name: "Olive Oil", amount: 0.5, measurement: "cup" },
      { name: "Garlic", amount: 3, measurement: "cloves" }
    ],
    steps: [
      "Preheat the oven to 350 degrees.",
      "Spread the olive oil around a glass baking dish.",
      "Add the yellow squash and place in the oven for 30 mins.",
      "Add the salmon, garlic, and pine nuts to the dish.",
      "Bake for 15 minutes.",
      "Remove from oven. Add the lettuce and serve."
    ]
  },
  {
    name: "Fish Tacos",
    ingredients: [
      { name: "Whitefish", amount: 1, measurement: "l lb" },
      { name: "Cheese", amount: 1, measurement: "cup" },
      { name: "Iceberg Lettuce", amount: 2, measurement: "cups" },
      { name: "Tomatoes", amount: 2, measurement: "large" },
      { name: "Tortillas", amount: 3, measurement: "med" }
    ],
    steps: [
      "Cook the fish on the grill until cooked through.",
      "Place the fish on the 3 tortillas.",
      "Top them with lettuce, tomatoes, and cheese."
    ]
  }
];

Answer 21

Create a series of function components that pass the data as props from the parent to children:
~~~
function Recipe({ name, ingredients, steps }) {
return (
<section id={name.toLowerCase().replace(/ /g, “-“)}>
<h1>{name}</h1>
<ul className="ingredients">
{ingredients.map((ingredient, i) => (
<li key={i}>{ingredient.name}</li>
))}
</ul>
<section className="instructions">
<h2>Cooking Instructions</h2>
{steps.map((step, i) => (
<p key={i}>{step}</p>
))}
</section>
</section>
);
}

function Menu({ title, recipes }) {
return (
<article>
<header>
<h1>{title}</h1>
</header>
<div className="recipes">
{recipes.map((recipe, i) => (
<Recipe key={i} {…recipe} />
))}
</div>
</article>
);
}

ReactDOM.render(
<Menu recipes={data} title=”Delicious Recipes” />,
document.getElementById(“root”)
);
~~~