Correct Answer : Component
Correct Answer : Inside js/components/
Correct Answer : Both Compiler and Transpilar
Correct Answer : Multiple Elements
Correct Answer : A module bundler
Correct Answer : A Library for building interaction interfaces
Correct Answer : All of these
Correct Answer : this.values
Correct Answer : Methods
Correct Answer : renderComponent
Correct Answer : 8080
Correct Answer : props
Explanation : Props are used to pass data to a component from outside
Correct Answer : Controller
Correct Answer : Virtual DOM
Correct Answer : Unique among the siblings only
Correct Answer : Action->Dispatcher->Store->View
Correct Answer : Jordan Walke
Correct Answer : Facebook
Correct Answer : Flux
Correct Answer : import { Component } from 'react'
Correct Answer : Wrap it in the React.memo higher-order component.
const person =(firstName, lastName) => { first: firstName, last: lastName } console.log(person("jhon", "Wolson"))
Correct Answer : Wrap the object in parentheses.
import React, {useState} from 'react';
Correct Answer : React Hooks
const name = 'Venkat'; const age = 30; const person = { name, age }; console.log(person);
{{name: "Venkat", age: 30}}
{name: "Venkat", age: 30}
{person: "Venkat", person: 30}}
{person: {name: "Venkat", age: 30}}
Correct Answer : {name: "Venkat", age: 30}
<h1>{fetch()}</h1>
<h1>${fetch()}</h1>
<h1>{fetch}</h1>
<h1>${fetch}</h1>
Correct Answer : <h1>{fetch()}</h1>
render(){ let langs = ["Ruby","ES6","Scala"] return (<div> {langs.map(it => <p>{it}</p>)} </div>) }
Correct Answer : Displays the list of languages in the array
style={{font-size:12,color:'red'}}
style={{fontSize:'12px',color:'red'}}
style={fontSize:'12px',color:'red'}
style={{font-size:12px,color:'red'}}
Correct Answer : style={{fontSize:'12px',color:'red'}}
Correct Answer : shouldComponentUpdate
Correct Answer : Stack overflow error
Explanation : Call to setState() invokes render(). Calling it inside render is suicidal. It gets into an infinite loop
Correct Answer : Javascript library
Explanation : ReactJS is a javascript library for building user interfaces. its not a framework
Correct Answer : User Interface layer in an application
Explanation : ReactJS is a javascript library for building user interfaces. it covers only user interface layer of an application
Correct Answer : 1
Correct Answer : Not be changed in the component
Correct Answer : Jest
Correct Answer : Internal storage of the component
Correct Answer : It will be rendered as enabled
const topics = ['cooking', 'art', 'history'];
const first = ["cooking", "art", "history"]
const [] = ["cooking", "art", "history"]
const [, first]["cooking", "art", "history"]
const [first] = ["cooking", "art", "history"]
Correct Answer : const [first] = ["cooking", "art", "history"]
Correct Answer : React Context
const [, , animal] = ['Horse', 'Mouse', 'Cat']; console.log(animal);​
Correct Answer : Cat
Correct Answer : Babel
Correct Answer : Both of above
Correct Answer : Source of truth is DOM
Correct Answer : when you want to replace Redux
<Message {...props} />
Correct Answer : all of them
<Route path="/:id" />
Correct Answer : This is a route parameter
React.createElement('h1', null, "What's happening?");​
<h1 props={null}>What's happening?</h1>
<h1>What's happening?</h1>
<h1 id="component">What's happening?</h1>
<h1 id="element">What's happening?</h1>
Correct Answer : <h1>What's happening?</h1>
function MyComponent() { return ( <Suspense> <div> <Message /> </div> </Suspense> ); }
Correct Answer : fallback
Correct Answer : b
Correct Answer : state & props
let message = 'Hi there'; const element = <p>{message}</p>;
Correct Answer : a JS expression
Correct Answer : React.lazy
Correct Answer : when you need the browser to paint before the effect runs
const Heading = () => { <h1>Hello!</h1>; };
Correct Answer : Change the curly braces to parentheses or add a return statement before the h1 tag.
Correct Answer : declarative
Correct Answer : a property that lets you pass components as data to other components
Correct Answer : because you want to allow a component to update in response to changes in the props
Correct Answer : when you want a default implementation of shouldComponentUpdate()
function Dish(props) { return ( <h1> {props.name} {props.cookingTime} </h1> ); }
function Dish([name, cookingTime]) { return <h1>{name} {cookingTime}</h1>; }
function Dish({name, cookingTime}) { return <h1>{name} {cookingTime}</h1>; }
function Dish(props) { return <h1>{name} {cookingTime}</h1>; }
function Dish(...props) { return <h1>{name} {cookingTime}</h1>; }
Correct Answer : function Dish({name, cookingTime}) { return <h1>{name} {cookingTime}</h1>; }
A. <button onClick="{this.handleClick}>Click Me</button>" B. <button onClick="{event => this.handleClick(event)}}>Click Me</button>"
Correct Answer : Button B will not fire the handler this.handleClick successfully.
Correct Answer : error boundaries
Correct Answer : componentDidMount
Correct Answer : pure functions
Correct Answer : to directly access the DOM node
handleChange(e) { this.setState({[e.target.id]: e.target.value }) }
Correct Answer : a dynamic key
class Clock extends React.Component { render() { return <h1>Look at the time: {time}</h1>; } }
Correct Answer : Clock
Correct Answer : ReactDOM
Correct Answer : a callback function that is called once for each element in the array
Correct Answer : setState is asynchronous and might result in out of sync values.
Correct Answer : Use the defaultValue property
function MyComponent(props) { const [done, setDone] = useState(false); return <h1>Done: {done}</h1>; }
useEffect(() => { setDone(true); });​
useEffect(() => { setDone(true); }, []);
useEffect(() => { setDone(true); }, [setDone]);
useEffect(() => { setDone(true); }, [done, setDone]);
Correct Answer : useEffect(() => { setDone(true); }, [setDone]);
class Huggable extends React.Component{ hug(id){ console.log("hugging " + id); } render() { let name = "kitteh"; let button = // Missing Code return button; } }
<button onClick={(name) => this.hug(name)>Hug Button</button>
<button onClick={this.hug(e, name)}>Hug Button</button>
<button onClick={(e) => hug(e,name)}>Hug Button</button>
<button onClick={(e) => this.hug(name, e)}>Hug Button</button>
Correct Answer : <button onClick={(name) => this.hug(name)>Hug Button</button>
useEffect(function updateTitle() { document.title = name + ' ' + lastname; });
useEffect(() => { title = name + ' ' + lastname; });
useEffect(function updateTitle() { name + ' ' + lastname; });
useEffect(function updateTitle() { title = name + ' ' + lastname; });
Correct Answer : useEffect(function updateTitle() { document.title = name + ' ' + lastname; });
class clock extends React.Component { render() { return <h1>Look at the time: {this.props.time}</h1>; } }
Correct Answer : Capitalize clock