React

Question 1

What is React?

Answer 1

a front-end JavaScript library for building interactive UIs

Question 2

What is a React element?

Answer 2

an object which is a visible building block of a React app

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render(elementToRender, container)

ex. ReactDOM.render(h1Element, document.getElementById(‘root’))

Question 4

What is JSX?

Answer 4

a syntax extension to JavaScript which produces HTML-like React elements

Question 5

Why must the React object be imported when authoring JSX in a module?

Answer 5

JSX compiles into calls to React.createElement()

Question 6

How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

Answer 6

install babel plugin-transform-react-jsx

Question 7

What is a React component?

Answer 7

a function or class which returns React elements

Question 8

How do you define a function component in React?

Answer 8

function keyword, capitalized name, (props), { return  }
ex. function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;

Question 9

How do you mount a component to the DOM?

Answer 9

ReactDOM.render(element, container)

Question 10

library vs framework

Answer 10

library: you are in charge of the flow of the application, tell the library what to do (jQuery, React- concerned with rendering UI)

framework: framework is in charge of flow, it calls the code you plugged in as needed
(Bootstrap)

Question 11

What are props in React?

Answer 11

an object, used to pass data into React components

Question 12

How do you pass props to a component?

Answer 12

add props to element as a key/value pair

Question 13

How do you write JavaScript expressions in JSX?

Answer 13

wrap in curly braces { expression }

Question 14

How do you create “class” component in React?

Answer 14

‘class’ keyword + name, extends React.Component, render() { return Reactelement }

Question 15

How do you access props in a class component?

Answer 15

this.props

Question 16

What is the purpose of state in React?

Answer 16

• keep track of status of data that will change over time

- similar to props, but private and fully controlled by the component

Question 17

How do you pass an event handler to a React element?

Answer 17

• as a prop
• event, assignment operator, { }
  ex. onClick={this.doSomething}

Question 18

react virtual dom

Answer 18

if state changes, it only changes what needs to be changed, instead of reloading entire dom (‘You tell React what state you want the UI to be in, and it makes sure the DOM matches that state’)