React Docs

Question 1

What is the command to create a new project using NPM?

Answer 1

npm init -y

Question 2

What does Babel do?

Answer 2

It accepts ES6 and React code as input, and creates regular JavaScript as output.

Question 3

What is the process of converting ES6 source code to old-school JS called?

Answer 3

Transpiling.

Question 4

What does Webpack do?

Answer 4

it is a tool that converts all our source code into one finished app ready to ship to users. It is controlled by the webpack.config.js file.

Question 5

What npm package allows you to run a webpack dev server locally?

Answer 5

webpack-dev-server

Question 6

What does the “export” keyword mean?

Answer 6

It means that the component is being exposed to the rest of the app to use.

Question 7

What does the “default” keyword mean?

Answer 7

It means its the only thing this class will expose.

Question 8

What is hot loading?

Answer 8

It’s a way to update the code in a running application without restarting or resetting the application state.

Question 9

What does ReactDOM do?

Answer 9

It imports the React tools required to render to the DOM.

Question 10

What two parameters does ReactDOM.render take?

Answer 10

Some JSX to render and where to render it to.

Question 11

How does JSX know what means?

Answer 11

From the name it is imported under.

Question 12

What is JSX?

Answer 12

It is a syntax extension to JavaScript. It produces React elements.

Question 13

How can you embed any JavaScript expression in JSX?

Answer 13

Wrap it in curly braces.

Question 14

Why is it recommended that you wrap multi-line JSX in parentheses?

Answer 14

To avoid the pitfalls of automatic semicolon insertion.

Question 15

What do JSX expressions become after compilation?

Answer 15

Regular JavaScript objects.

Question 16

Why shouldn’t you put quotes around curly braces when embedding a JS expression in a JSX attribute?

Answer 16

JSX will treat the attribute as a string literal rather than an expression.

Question 17

Does ReactDOM use camelCase property naming conventions in JSX, or HTML attribute names?

Answer 17

camelCase. Example- HTML class is className in JSX. This is because JSX is closer to JavaScript than HTML.

Question 18

How does JSX prevent XSS (cross-site-scripting) attacks?

Answer 18

By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered.

Question 19

What does Babel compile JSX down to?

Answer 19

React.createElement() calls.

Question 20

What syntax scheme should you search for in a code editor to ensure that both ES6 and JSX code is properly highlighted?

Answer 20

Babel syntax scheme.

Question 21

What are JSX objects called?

Answer 21

React elements.

Question 22

What are the smallest building blocks of React apps?

Answer 22

elements.

Question 23

What takes care of updating the DOM to match the react elements?

Answer 23

React DOM

Question 24

How are React elements different from browser DOM elements?

Answer 24

They are plain objects, and are cheap to create.

Question 25

Why is a “root” DOM node called that?

Answer 25

If everything inside it will be managed by React DOM. Applications built with just React usually have a single root DOM node, but if React is being integrated into an existing app, it may have many isolated root DOM nodes.

Question 26

How do you render a React element into a root DOM node?

Answer 26

Pass both to ReactDOM.render()

Question 27

Are React elements immutable?

Answer 27

Yes. Once you create an element, you can’t change its children or attributes.

Question 28

How does React only update what’s necessary?

Answer 28

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.

Question 29

What is the purpose of having components?

Answer 29

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Question 30

How are React components conceptually like JavaScript functions?

Answer 30

They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Question 31

When would a component be called “functional”?

Answer 31

When it is literally a JavaScript function, accepting a “props” object argument and returning a React element.

Question 32

How can you define a component other than a functional component?

Answer 32

By using an ES6 class.

Question 33

What can elements represent other than DOM components?

Answer 33

user-defined components.