Mock Final Exam
Props
Arbitrary inputs of components are called ____.
yes
Are input named props optional for functional components?
True
Are the following statements True or False? The 'HTML' that is rendered isn't actually HTML, but JSX. React takes these JS object and will for a 'virtual DOM'
False
Async/await can be used with plain callbacks?
sketching your idea on the paper / in the software like Sketch
Building a new application you should your work on UI/UX with
yes
Can class components exist without a state?
Yes
Can you build native mobile applications using React Native?
False
Interface is a new ES6 feature?
True
Interpolation of strings is a feature in ES6. True or False?
Library
Is React a library or a framework?
Yes
Is the following code valid? let name = 'Johnny', job = 'secret agent', from='England'; let person = {name, job, from};
React.createElement
JSX gets transpired to normal function calls to ________
Optimization
JSX is faster because it performs ____ while compiling code to Javascript.
freeup resources
Lifecycle methods are mainly used to ______
user interface
React is mainly for building ____
keys
React keeps track of what items have changed, been added, or been removed from a list using ________
setState()
React merges the object you provide in the current state using _____.
Virtual DOM
React uses a virtual representation of the UI to track changes, what is this called?
35K
React with React DOM weights only ____ when gzipped and minified
True
Sate can be initialized when code is loaded or state can be set on event changes. True or False?
True
True or False? Class components are considered stateful components.
False, Functional components are considered stateless components
True or False? Functional components are considered stateful components.
False, Props allow uni-directional dataflow from parent to child, and props are pure(immutable)
True or False? Props allow bi-directional data flow
True
True or False? Stateful components are always class components.
False, there are no performance benefits to using stateless functional component over class components
True or False? There are performance benefits to using stateless functional components over class components.
True example: class Hello extends React.Component { constructor(props){ super(props); } render() { return( <div>Hello{props}</div> ) } }
True or False? When using a constructor, super() must be used and is not optional?
True
True or False? You should go for stateless functional components unless you need a lifecycle hook in your components
Which company created React?
componentDidMount
Which method in React Component is called after the component is rendered for the first time?
shouldComponentUpdate
Which method in React Component should you override to stop the component from updating?
filter, map, reduce
Which of the following are some existing ES5 array functions
b. let plus_one = arr.map(n => n + 1); Fat Arrow
Which of the following is ES6 syntax? a. var plus_one = array.map(function(n){}) b. let plus_one = arr.map(n => n + 1); c. let plus_one = arr.map(n->n+1);
let, MapSet, export
Which of the following is an example of some new ES6 syntax?
d.<button onClick = {this.foo}> the camelCase notation in registering event handlers in React. You need to register the function and not invoke it
Which of the following is correct syntax for a button click event handler, foo? a. < button onclick={this.foo()}> b.<button onclick ={this.foo}> c. <button onClick= {this.foo()}> d.<button onClick = {this.foo}>
A waiting area
With regards to streaming data, which describes the Buffer?
wrapping
_____ can be done while more than one element needs to be returned from a component
const
______ turns variables into constants, and they cannot be changed
super
in ES6, which keyword allows you to call into a super class method from a derived class method of the same name?
es6
react supports all the syntax of ______
render()
ref is used to refer an element/component returned by______
Pending, Resolved, Rejected
In which 3 states can a ES6 promise exists?
onClick
For React... for if you use if or && for looping you use map What do you use for clicks?
react-native For VR apps, you call react-vr for rendering
For web apps, you call react-dom to render your components in HTML. For React Native, what do you use to render React components into native-friendly code?
state
In React state can be accessed using ____
Keys
In React, we can go for ____ when there is possibility that our user could change the data.
componentDidMount
In React, what is invoked once, only on the client, after rendering occurs?
False
AN altered component may be uniquely identified with the help of ref, True or False?
this.state...
In react how do you refer to a current state elements?
False
Components cannot refer to other components in their output. True or False?
pure functions
Function that does not change it's results for the same set of inputs are called _____
False
Functional components by default have state?
class App extents Component { state = {count: 1}; render() { <div>{this.state.count}</div> } }
Give an example of using state:
const Button = (props) => { return ( <button>{prop.sign}</button> ) }
Give and example of using props:
Using preventDefault()
How can be prevent default behaviour in React?
<h1>{fetch()}</h1>
How do you access a function fetch from a h1 element in JSX?
Using sequential then methods
How do you chain multiple promises sequentially?
string.includes()
How do you check whether a string contains the characters of a specified string?
Set Default Props to set a default value. example: <div>Hello {this.props || 'World'}</div> or Greetings.defaultProps = { name: 'Stranger'; };
How do you prevent the situation where the props.value is not passed in the JSX component, and props.value results in undefined?
propTypes property example: import PropTypes from 'prop-types'; Greeting.propTypes = { name: PropTypes.string };
How do you run typechecking on the props for a component, without converting all code to typescript?
style={{fontSize:'12px',color:'red'}} - camelCase for the css attributes - quotation marks around the values - double curly braces
How do you write an inline style specifying the font-size: 12px, and color:red in JSX?
`add this ${var_name}` -> back ticks, dollar sign, and curly braces
How is string interpolation represented in ES6?
One
How many Root JSX element can we have in React?
True
If your elements are dynamic, react can keep track of the changes using keys. True or False?
of
In ES6, to log the values in an array, you can you use the following for loop: for(let i _______ array { console.log(i); }
compilation
In JSX most of the errors can be caught during ______
camelCase
In JSX, what is the format of React named events?
use 'extends' i.e. class car extends Vehicle
In Javascript, how do you extend a class?
warning
PropType exports a range of validators that can be used to make sure the data you receive is valid. When an invalid value is provided for a prop, a ___ will be shown in the JavaScript console.
Components
React comes with which of the following features?
components
React considers everything as ____
tag name, attributes and children
Similar to XML, JSX has_____
find()
The ___ method returns the value of the first element in an array that pass a test (provided as a function)
diffing
Using a process called ______ React will compare the new VDOM with the previous state version and figure out the changes
component lifecycle
What allows you to hook into components operations at different times?
just JavaScript functions
What are functional components?
They have a state that gets initialized int the constructor. example: class UserListContainer extends React.Component { constructor(){ super() this.state = {users:[]} } }
What are stateful components?
1. easy to write and understand 2. easy to test 3. avoid the this keyword altogether
What are the benefits to use stateless functional components?
class component functional component
What are the two types of components in React?
1. Traditional -> React.createClass() 2. ES6 syntax to extend React.Component
What are the two ways to create a class component?
Javascript
What does JSX compile to?
You use it provide default parameters to the function, which the users can override
What does the following function do? function doSomething(param ={} { var defaults = { color: 'blue', shape: 'rectangle' }; var settings = Object.assign({}, defaults, param); }
It displays the list of languages in the array
What happens when the following render() method executes? render(){ let langs = ["Ruby","ES6","Scala"] return (<div> {langs.map(it => <p>{it}</p>)} </div>) }
stack overflow error, Call to setState() invokes render(). Calling it inside render is suicidal, it gets in to an infinite loop.
What happens when you call setState() inside render() method?
A lightweight HTTP Client
What is Axios?
JavaScript XML
What is JSX?
Plain JavaScript without any additional libraries
What is Vanilla JS?
ECMAScript2015
What is another name for ES6?
properties example: * props are passed to components with a syntax similar to HTML attributes class Greeter extends React.Component { render() { const {name} = this.props; return( <div>Hello {name}! </div> ); } }
What is props short for?
To only listen to a rejected promise
What is the catch method for on a promise?
Props is read-only and State can change
What is the difference between props and state?
setState
What is the method used to modify state in React component?
a let variable has block scope
What is the primary advantage of using the let keyword over using the var keyword?
camelCase
What is the required format for JSX attributes?
[1, 23, 4]
What is the result of a? function mystery(...params) { return params; } let a = mystery(1,23,4);
[[1,3],[5,5],[1,8]]
What is the result of the following code? var point = [1,3], segment = [point[5,5]], triangle = [...segment[1,8]];
A Promise
What is the return type of an Async function?
A new array
What is the returned value when using the array.map() and array.filter() methods?
elements
What is the smallest building block of ReactJS?
react-dom
What library does React use to render components in HTML?
ReactDOM.render
What takes care of rendering the DOM in a React application?
30
What will the following code result in? function add(a=10, b=5) { return a+b;} add(undefined, 20)
props
What's used to pass data to a component from outside?
