Lesson 2: Rendering UI with React

Question 1

What will myBio hold when the following code is run?

import React from ‘react’;

const myBio = React.createElement(‘div’, null, ‘My name is Tyler, and I love porcupines.’);

Answer 1

A Javascript object

Question 2

What’s the difference between .createElement() and .render() and how do they work together?

Answer 2

When we call .createElement() we haven’t created a real DOM element yet. It’s not until we call .render() that the browser actually creates a real DOM element.

Question 3

Which of the following HTML attributes are allowed to be passed to the React element?

1. poster
2. id
3. marginWidth
4. for

Answer 3

poster, id and marginWidth

An interesting thing to note is that you can’t use the default for attribute. Just like you have to use className instead of class, you have to use htmlFor instead of for. This is because ‘for’ is a reserved word in JavaScript.

Question 4

Describe the parameters of React.createElement

Answer 4

1. type – either a string or a React Component

This can be a string of any existing HTML element (e.g. ‘p’, ‘span’, or ‘header’) or you could pass a React component (we’ll be creating components with JSX, in just a moment).

2. props – either null or an object

This is an object of HTML attributes and custom data about the element.

3. content – null, a string, a React Element, or a React Component

Anything that you pass here will be the content of the rendered element. This can include plain text, JavaScript code, other React elements, etc.

Question 5

If your .createElement content argument contains multiple child elements, from an array or iterator for example, what is required for each child?

Answer 5

A unique key prop

Question 6

How many React elements does .createElement() return?

Answer 6

It only returns one root element. You may nest more elements inside this root element, but you cannot have more than one element at the root level.

Question 7

What is the single responsibility principle and why is it important?

Answer 7

It’s pretty simple: your component classes should just “do one thing”. This helps maintain the modularity and reusability of your components. If it manages too many different tasks, it may be a good idea to decompose your component into smaller subcomponents.

Question 8

What do the following libraries from react-scripts do?

1. Babel
2. Webpack
3. Webpack dev server

Answer 8

1. Babel - transpiler allowing us to use latest ES6 syntax and JSX
2. Webpack - generates the build
3. Webpack dev server - gives us auto-reload behavior

Question 9

What do the following yarn commands do?

1. yarn start
2. yarn build
3. yarn test
4. yarn eject

Answer 9

1. yarn start - starts dev server
2. yarn build - bundles app into static files for production
3. yarn test - starts the test runner
4. yarn eject - removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!