React

Question 1

What div is always used with React in the body section of the index.html file?

Answer 1

You will always have a div with the id of root. This is basically the root of the React application.

React App

<div></div>

Question 2

What are jsx files?

Answer 2

Files where you have html code right in the body of a javascript file

Question 3

What is “Babel?”

Answer 3

A JavaScript compiler. It’s able to take next generation JavaScript like ES6, 7, or 8 and compile it down to a version of JS that every browser can understand. This includes compiling jsx down to plain old JavaScript.

Question 4

What would be the starting structure inside the index.js file?

Answer 4

1. Importing the required modules:
   import ReactDOM from “react-dom”;
2. Calling the render function

ReactDOM.render(WHAT TO SHOW, WHERE TO SHOW IT)

3. Replace WHAT TO SHOW and WHERE TO SHOW IT with for example:

<div>
<h1>Hello world</h1>
<p>This is a paragraph.</p>
</div>,
document.getElementByID("root")

So the final code would look like this:

import ReactDOM from “react-dom”;

ReactDOM.render(
<div>
<h1>Hello world</h1>
<p>This is a paragraph.</p>
</div>,

document.getElementByID(“root”)

);

Question 5

What is the difference between expressions and statements?

Answer 5

Expressions will be evaluated to a value.

Statements are asking the computer to evaluate the statement and depending on that statement, to work out something.

Question 6

How can you get the current year in Javascript hardcoded?

Answer 6

import React from “react”;
import ReactDOM from “react-dom”;

const name = "Mell";
const currentDate = new Date();
const year = currentDate.getFullYear();

ReactDOM.render(
  <div>
    <p>Created by {name}</p>
    <p>Copyright {2020}</p>
  </div>,

document.getElementById(“root”)

Question 7

What’s the React convention for letters casing when specifying a class inside the index.js file?

Answer 7

Although the content nested inside the div tag look like HTML, the convention is to use JavaScript syntax. So, instead of:

<h1>Hello</h1>

You would write:

<h1>Hello</h1>

Question 8

What is important to know in terms of styling inline elements in JSX? Let’s say you wanted to change the color of the h1 to red.

Answer 8

The style property requires a value that is a Javascript object. And in order for that object to be interpreted correctly inside an html element, has to have a set of curly braces around them. So the code would look like this:

ReactDOM.render(

<h1>Hello World</h1>

);

Question 9

The React documentation recommends to use the stylesheet for making changes to the styling. In which case would you use inline styling?

Answer 9

When you want styles to update on the fly. If the user does something or the time changes, etc. you may want to change a trigger in your style. And that can be done easily with inline styles.

You create a constant and then insert that into the html element:

const customStyle = {
  color: "red",
  fontSize: "20px",
  border: "1px solid black"
};

ReactDOM.render(

<h1>Hello World!</h1>

,
document.getElementById(“root”)
);

Question 10

What are React components and what is their advantage?

Answer 10

Components allow us to split up a large file or complex web structure into smaller components with ththe benefit of reusing them repeatedly.

Question 11

What’s a React convention when it comes to naming components?

Answer 11

All are named starting with a capital letter using Pascal case. This comes in handy

This allows React to differentiate between the custom components that we’re building versus the

HTML elements that we’re trying to get hold of that exists in the DOM.

Question 12

What is the map function?

Answer 12

The map function is a JavaScript function that is really useful for handling arrays. It loops through the given array and for every single item that exists in that array, it calls the function that is given inside:

import React from “react”;
import Card from “./Card”;
import contacts from “../contacts”;

function createCard(contact) {
  return ;
}

function App() {
  return (
    <div>
      <h1>My Contacts</h1>
      {contacts.map(createCard)}
    </div>
  );
}

export default App;