Understanding the Base Features & Syntax

Question 1

Optimized code means?

Answer 1

Small as possible. Increasing the performance of the app. (It increases the performance of the app)

Question 2

Next-Gen JavaScript is…

Answer 2

ES6 and above

Question 3

What are “dependencies”

Answer 3

third party packages

Question 4

JSX

Answer 4

JavaScript rendition of HTML. Syntax extension to JavaScript.

Question 5

What is the first and second parameter of the ReactDOM.render();

Answer 5

ReactDOM.render(What do I want to render, Where do I want to render it);

Question 6

JSX produces React ______.

Answer 6

elements

Question 7

What is the boilerplate for importing react?

Answer 7

import React from “react”

import ReactDOM from “react-dom”

Question 8

SPAs

Answer 8

Single Page Applications

Question 9

MPAs

Answer 9

Multi Page Applications

Question 10

npm or yarn is an example of?

Answer 10

Dependency Management Tools

Question 11

What is a compiler?

Answer 11

a conversion software that converts next-gen javascript to older version so it runs on any browsers that the user is on.

Question 12

Babel is an example of?

Answer 12

Compiler

Question 13

npm start

Answer 13

starts the development server

Question 14

npm run build

Answer 14

Bundles the app into static files for production

Question 15

npm test

Answer 15

Starts the test runner

Question 16

npm run eject

Answer 16

Removes this tool and copies build dependencies, configuration files and scripts into the app directory. (If you do this, you can’t go back!)

Question 17

What is a React Component?

Answer 17

A component is either a Function or a Class that produces HTML to show the user using JSX and handles feedback from the user using event handlers.

Question 18

How do you start a React app?

Answer 18

Run npm start in the project directory

Question 19

How do you create a React app?

Answer 19

In the terminal: create-react-app project-name

Question 20

T or F: Every react component has to return or render some html code which can be rendered.

Answer 20

True

Question 21

createElement() is a method that takes at least __ arguments.

Answer 21

3.
Argument 1: The element we want to render to the dom
Argument 2: The configuration for 1
Argument 3: Any amount of children (Whats nested under argument 1.

Question 22

Function names in components should be uppercased or lowercased?

Answer 22

lowercased

Question 23

T or F: When you’re importing a component, the name should be the same as the component file.

Answer 23

True

Question 24

What are Props?

Answer 24

Changes from outside the component(data passed into component)
eg.)

Question 25

React is a library for creating _______.

Answer 25

components

Question 26

A typical React app could be depicted as a component tree- having one ____ component(“App”) and then an infinite amount of nested child components.

Answer 26

root

Question 27

Each React component needs to return/render some ____ code.

Answer 27

JSX

Question 28

T or F: JSX is HTML

Answer 28

False. JSX is a syntactic sugar for JavaScript, allowing you to write HTMLish code instead of nested React.createElement(…) calls.

Question 29

When creating a component, what are the two different ways?

Answer 29

1. Functional components

2. Class-based components

Question 30

What are Functional Components?

Answer 30

aka presentational, dumb, or stateless components.

const cmp = () => {
return <div> some JSX</div> }
}

• often used- best practice

Question 31

What are class-based components?

Answer 31

aka containers, smart, or stateful components. 
class Cmp extends Component {
render() {
return <div>JSX</div> }
}

Question 32

Only changes in ____ and/or _____ trigger React to render your components and potentially update the DOM

Answer 32

props, state

Question 33

What are Props?

Answer 33

It allows you to pass data from a parent(wrapping) component to a child(embedded) component. Triggers UI updates

Question 34

What are States?

Answer 34

State is used to change the component, state from within. Changes to state also rigger an UI update.

Question 35

Only ____-based components can define and use state

Answer 35

class

Question 36

State is simply a _____ of the component class.

Answer 36

property

Question 37

Whenever state changes,
the component will ____ and reflect the new state. The
difference to props is, that this happens within one andthe same component - you don’t receive new data (props )
from outside!

Answer 37

re-render

Question 38

React is a JavaScript library for building?

Answer 38

A JavaScript library for building user interfaces

Question 39

Which library lets React connect to and update the DOM?

a. React DOM
b. Create React App
c. Babel
d. Webpack

Answer 39

a. React DOM

Question 40

Which method creates and returns a React element of the given type?

a. createElement()
b. create()
c. createNode()
d. ReactDOM.render()

Answer 40

a. createElement()

Question 41

True or False: React creates actual DOM nodes.

Answer 41

False. React creates objects that describe DOM nodes

Question 42

T or False: React manipulates and updates the DOM directly.

Answer 42

False. React only manages what gets rendered to the DOM via ReactDOM.render.
It’s the job of render() to interpret the element objects and create DOM nodes out of them.

Question 43

Which method renders React elements to the DOM?

a. React.render()
b. DOM.render()
c. ReactDOM.render()
d. React.createElement()

Answer 43

c. ReactDOM.render()

Question 44

{}

Answer 44

JavaScript within JSX

Question 45

What tool do we use to translate JSX into standard JavaScript?

a. Create React App
b. React DOM
c. Babel
d. React CDN

Answer 45

c. Babel

Question 46

Is using JSX with React optional?

Answer 46

Yes

Question 47

What is the purpose of curly braces {} in JSX?

Answer 47

They are used to evaluate JavaScript expressions.