![.marker { display: none }
}
HTML code:
<p>John was a great writer<a class="footnote" href="#words"> [More]</a>
<p id=words><span class="marker >[More}</span> Great poet too.
The tool tip will appear saying Great poet too.
A pop up will appear saying Great poet too.
The page will shift focus to the line Great poet too
Nothing will happen
31. Which of the following is the initial value for the column-fill property?
auto
balance
none
32. Which of the following is the valid option that can be used to remove underlines from the links
in CSS3?
text-underline: none;
text-formatting: none;
text-decoration: none;
33. Which of the following is the valid option that can be used to remove underlines from the links
in CSS3?](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-19-638.jpg)
![None of the above.
37. The CSS box model consists of which of the following options?
1. Margin 2. Padding 3. Content
All 1, 2, and 3
Only 1 and 2
Only 1 and 3
Only 2 and 3
38. Which of the following rules is equivalent to the em (color: rgb(255,0.0) style?
em (color: rgb(300,0,0))
em { color:
rgb(255,-10,0))
em color: rgb{110%, 0%,
0%)}
em { color: rgb(100%,
0%, 0%)]
All of the above
39. Which of the following tag is used to embed css in html page?
<css>
<!DOCTYPE html>
<script>
<style>](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-21-638.jpg)
![● a property that lets you set an array as a property
● a property that lets you pass components as data to other components
● a property that lets you pass data to child elements
● a property that adds child components to state
6. How do you destructure the properties that are sent to the Dish component?
function Dish(props) {
return (
<h1>
{props.name} {props.cookingTime}
</h1>
);
}
● function Dish(props) { return <h1>{name} {cookingTime}</h1>; }
● function Dish(...props) { return <h1>{name} {cookingTime}</h1>; }function Dish([name,
cookingTime]) { return <h1>{name} {cookingTime}</h1>; }
● function Dish({name, cookingTime}) { return <h1>{name} {cookingTime}</h1>; }
7. When might you use React.PureComponent?
● when you do not want your component to have props
● when you have sibling components that need to be compared
● when you want a default implementation of shouldComponentUpdate()
● when you do not want your component to have state
8. Why is it important to avoid copying the values of props into a component's state where
possible?
● because you should never mutate state
● because getDerivedStateFromProps() is an unsafe method to use
● because you want to allow a component to update in response to changes in the
props
● because you want to allow data to flow back up to the parent
9. What is the children prop?
● a property that adds child components to state
● a property that lets you set an array as a property
● a property that lets you pass components as data to other components](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-24-638.jpg)
![● React.fallback
● React.split
● React.memo
● React.lazy
22.. How do you invoke setDone only when component mounts, using hooks?
function MyComponent(props) {
const [done, setDone] = useState(false);
return <h1>Done: {done}</h1>;
}
● useEffect(() => { setDone(true); });
● useEffect(() => { setDone(true); }, [setDone]);
● useEffect(() => { setDone(true); }, []);
● useEffect(() => { setDone(true); }, [done, setDone]);
23. Which of the following click event handlers will allow you to pass the name of the person to
be hugged?
class Huggable extends React.Component {
hug(id) {
console.log("hugging " + id);
}
render() {
let name = "kitteh";
let button = // Missing Code
return button;
}
}
● <button onClick={(e) => this.hug(name,e)}>Hug Button</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>](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-27-638.jpg)
![24. Currently, handleClick is being called instead of passed as a reference. How do you fix this?
<button onClick={this.handleClick()}>Click this</button>
● <button onClick={this.handleClick.bind(handleClick)}>Click this</button>
● <button onClick={handleClick()}>Click this</button>
● <button onClick={this.handleClick}>Click this</button>
● <button onclick={this.handleClick}>Click this</button>
25. In which directory react components are saved?
● inside js/components/
● inside node_modules/components/
● inside app/components/
● None the above
26. If you want to import just the Component from the React library, what syntax do you use?
● import React.Component from 'react'
● import [ Component ] from 'react'
● import { Component } from 'react'
● import Component from 'react'
27. If a function component should always render the same way given the same props, what is
a simple performance optimization available for it?
● Implement the useReducer Hook.
● Wrap it in the React.memo higher-order component.
● Implement the useMemo Hook.
● Implement the shouldComponentUpdate lifecycle method.
28. How do you fix the syntax error that results from running this code?
const person =(firstName, lastName) =>
{
first: firstName,
last: lastName
}
console.log(person("Jill", "Wilson"))](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-28-638.jpg)
![● Add a return statement before the first curly brace.
● Replace the object with an array.
● Wrap the object in parentheses.
● Call the function from another file.
29. If you see the following import in a file, what is being used for state management in the
component?
import React, {useState} from 'react';
● stateful components
● math
● React Hooks
● class components
30. Using object literal enhancement, you can put values back into an object. When you log
person to the console, what is the output?
const name = 'Rachel';
const age = 31;
const person = { name, age };
console.log(person);
● {{name: "Rachel", age: 31}}
● {name: "Rachel", age: 31}
● {person: "Rachel", person: 31}}
● {person: {name: "Rachel", age: 31}}
31. What is the testing library most often associated with React?
● Mocha
● Chai
● Sinon
● Jest
32. To get the first item from the array ("cooking") using array destructuring, how do you adjust
this line?
const topics = ['cooking', 'art', 'history'];
● const first = ["cooking", "art", "history"]
● const [] = ["cooking", "art", "history"]
● const [, first]["cooking", "art", "history"]
● const [first] = ["cooking", "art", "history"]](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-29-638.jpg)
![33. How do you handle passing through the component tree without having to pass props down
manually at every level?
● React Send
● React Pinpoint
● React Router
● React Context
34. What should the console read when the following code is run?
const [, , animal] = ['Horse', 'Mouse', 'Cat'];
console.log(animal);
● Horse
● Cat
● Mouse
● undefined
35. How do you handle passing through the component tree without having to pass props down
manually at every level?
● React Router
● React Context
● React Send
● React Pinpoint
36. Which attribute do you use to replace innerHTML in the browser DOM?
● injectHTML
● weirdSetInnerHTML
● dangerouslySetInnerHTML
● strangeHTML
37. Which of these terms commonly describe React applications?
● declarative
● integrated
● closed
● imperative
38. When using webpack, why would you need to use a loader?
● to put together physical file folders
● to load external data
● to load the website into everyone's phone](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-30-638.jpg)
![● to preprocess files
39. A representation of a user interface that is kept in memory and is synced with the "real"
DOM is called what?
● DOM
● virtual elements
● virtual DOM
● shadow DOM
40. You have written the following code but nothing is rendering. How do you fix this problem?
const Heading = () => {
<h1>Hello!</h1>;
};
● Add a render function.
● Move the h1 to another component.
● Surround the h1 in a div.
● Change the curly braces to parentheses or add a return statement before the h1
tag.
41. All React components must act like _ with respect to their props.
● monads
● pure functions
● recursive functions
● higher-order functions
42. Why might you use a ref?
● to directly access the DOM node
● to refer to another JS file
● to call a function
● to bind the function
43. What is [e.target.id] called in the following code snippet?
handleChange(e) {
this.setState({ [e.target.id]: e.target.value })
}
● a computed property name](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-31-638.jpg)
![48.What will happen when this useEffect Hook is executed, assuming name is not already equal
to John?
useEffect(() => {
setName('John');
}, [name]);
● It will cause an error immediately.
● It will execute the code inside the function, but only after waiting to ensure that no other
component is accessing the name variable.
● It will cause an infinite loop.
● It will update the value of name once and not run again until name is changed
from the outside.
49. How would you add to this code, from React Router, to display a component called About?
<Route path="/:id" />
● <Route path="/tid" about={Component} />
● <Route path="/:id" route={About} />
● <Route path="/:id">
● {' '}
● <About />
● </Route>
● <Route>
● <About path="/:id" />
● </Route>
50. Which class-based component is equivalent to this function component?
const Greeting ({ name }) > <h1>Hello {name}!</h1>;](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-33-638.jpg)
![● The link component allows the user to use the browser's Back button.
● There is no difference--the Link component is just another name for the <a> tag.
● The <a> tag will cause an error when used in React.
● The <a> tag triggers a full page reload, while the Link component does not.
53. What is the first argument, x, that is sent to the createElement function?
React.createElement(x, y, z);
● the element that should be created
● the order in which this element should be placed on the page
● the properties of the element
● data that should be displayed in the element
54. Which class-based lifecycle method would be called at the same time as this effect Hook?
useEffect(() => {
// do things
}, []);
● componentWillUnmount
● componentDidMount
● render
● componentDidUpdate
55. Given the code below, what does the second argument that is sent to the render function
describe?
ReactDOM.render(<h1>Hi</h1>, document.getElementById('root'));
● where the React element should be added to the DOM
● where to call the function
● where the root component is
● where to create a new JavaScript file
56. What is the first argument, x, that is sent to the createElement function?
React.createElement(x,y,z);
● the order in which this element should be placed on the page
● the element that should be created
● the properties of the element
● data that should be displayed in the element.](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-35-638.jpg)
![57. What is the name of this component?
class Comp extends React.Component {
render() {
return <h1>Look at the time: {time}</h1>;
}
}
● Comp
● h1
● React.Component
● Component
58. When using a portal, what is the first argument?
ReactDOM.createPortal(x, y);
● the current state
● the element to render
● the App component
● the page
59. What is setCount?
const [count, setCount] = useState(0);
● the initial state value
● a variable
● a state object
● a function to update the state
60. Which of the following method refers to the parent class in React.js?
● self()
● super()
● this()
● None of the above
61. What is the JavaScript syntax extension that is commonly used to create React elements?
● HTML
● JavaScriptX
● JSX](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-36-638.jpg)
![74. This code is part of an app that collects Pokemon. How would you print the list of the ones
collected so far?
constructor(props) {
super(props);
this.state = {
pokeDex: []
};
}
● console.log(this.state.pokeDex);
● console.log(props.pokeDex);
● console.log(this.props.pokeDex);
● console.log(pokeDex);
75. What would be the result of running this code?
function add(x = 1, y = 2) {
return x + y;
}
add();
● null
● 0
● 3
● undefined
76. Which of the following method is not a part of ReactDOM?
● ReactDOM.delete()
● ReactDOM.destroy()
● ReactDOM.unset()
● None of the above
77. Why might you use a React.ref?
● to refer to another JS file
● to bind the function
● to call a function](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-40-638.jpg)
![● react-starter
● create-react-app
● react-gen
● react-start
83. What is the browser extension called that React developers use to debug applications?
● React Codewatch
● React Debug
● React Developer Tools
● React Tooling Add-on
84. Which tool is not part of Create React App?
● React
● jQuery
● webpack
● ReactDOM
85. What function allows you to render React content in an HTML page?
● React.mount()
● ReactDOM.start()
● ReactDOM.render()
● React.render()
86. What is the use of map function below?
const database = [user1:{},user2:{},user3:{}];
database.map((user)=><h1>user.data</h1>);
● gives a map of all the entries in database
● returns one heading tag for all the entries in database
● checks which entry in the database is suitable for heading tag
● returns a heading tag for every entry in the database containing it's data
87. Describe what is happening in this code?
const { name: firstName } = person;
● It is creating a new object that contains the same name property as the person object.
● It is assigning the value of the person object's name property to a constant called
firstName.
● It is assigning the value of the person object's firstName property to a constant called
name.](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-42-638.jpg)
![● 1
● 2
● undefined
91. Which of the following is the correct data flow sequence of flux concept?
● Action->Dispatcher->View->Store
● Action->Store->Dispatcher->View
● Action->Dispatcher->Store->View
● None of the above
92. What is this pattern called?
const [count, setCount] = useState(0);
● object destructuring
● array destructuring
● spread operating
● code pushing
93. What is the first file loaded by the browser in a basic React project?
● src/App.js
● public/index.html
● src/index.js
● public/manifest.json
94. The code below is rendering nothing, and there is an error that says "ReactDOM is not
defined." How do you fix this issue?
import React from 'react';
import { render } from 'react-dom';
const element = <h1>Hi</h1>;
ReactDOM.render(element, document.getElementById('root'));
● renderDOM(element, document.getElementById("root"));
● DOM(element, document.getElementById("root"));
● render(element, document.getElementById("root"));
● ReactDOM(element, document.getElementById("root"));
95. In this component, how do you display whether the user was logged in or not?
render() {](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-44-638.jpg)
![● section
● component
104. How do you access a function getData() from a h1 element in JSX?
● {getData()}
● {getData}
● ${getData()}
● ${getData}
105. What happens when the following render() method executes?
render(){
let langs = ["PHP","ES6","JAVA"]
return (<div>
{langs.map(it => <p>{it}</p>)}
</div>)
}
● Error. Cannot use direct JavaScript code in JSX
● Displays the list of languages in the array
● Error. Should be replaced with a for..loop for correct output
● Displays nothing
106. What does this React element look like given the following function? (Alternative: Given the
following code, what does this React element look like?)
React.createElement('h1', null, "What's happening?");
● <h1 id="component">What's happening?</h1>
● <h1 id="element">What's happening?</h1>
● <h1 props={null}>What's happening?</h1>
● <h1>What's happening?</h1>
107. Which answer best describes a function component?
● A function component is the same as a class component.
● A function component is the only way to create a component.
● A function component is required to create a React component.
● A function component accepts a single props object and returns a React element.
108. Which library does the fetch() function come from?](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-47-638.jpg)
![● FetchJS
● ReactDOM
● React
● No library. fetch() is supported by most browsers.
109. What will happen when this useEffect Hook is executed, assuming name is not already
equal to John?
useEffect(() => {
setName('John');
}, [name]);
● It will cause an error immediately.
● It will cause an infinite loop.
● It will execute the code inside the function, but only after waiting to ensure that no other
component is accessing the name variable.
● It will update the value of name once and not run again until name is changed
from the outside.
110. Which choice will not cause a React component to rerender?
● if the component calls this.setState(...)
● one of the component's siblings rerenders
● the value of one of the component's props changes
● if the component calls this.forceUpdate()
111. You have created a new method in a class component called handleClick, but it is not
working. Which code is missing?
class Button extends React.Component{
constructor(props) {
super(props);
// Missing line
}
handleClick() {...}
}
● this.handleClick = this.handleClick.bind(this);
● this.handleClick.bind(this);](https://image.slidesharecdn.com/reactjstestquestionsanswers-220619170828-51986fa2/95/ReactJS-Test-Questions-Answers-pdf-48-638.jpg)
Uploaded bySkill Test for Freelancer
ReactJS Test Questions Answers.pdf
The document provides an overview of cloud computing, explaining its definition, functionalities, types, and job opportunities in the field. It outlines the various types of cloud services such as IaaS, PaaS, and SaaS, as well as public, private, hybrid, and community clouds, highlighting their benefits over traditional infrastructure. Additionally, it discusses the importance of cloud computing in the modern business landscape, especially in relation to increased demand due to the COVID-19 pandemic.
ReactJS Test Questions Answers.pdf
- 1. What is CloudComputing and, How does the cloud work? Cloud Computing This article is intended to discuss cloud computing, cloud computing basics, how does cloud computing work, cloud services, and what is cloud computing? Study of cloud computing and job opportunities after completing cloud computing course. What is Cloud Computing and, How does the cloud work? The term “cloud” is used as a substitute for the “internet”. Cloud computing points to any hardware or software like networks, software, analytics, servers, storage, databases, and intelligence provided over the internet (cloud) by any service provider. Data, software, and source codes are often stored on hard drives, which is quite risky since difficult situations may arise such as hard disk crashes, data corruption, and eventual loss of the entire resources to work with. A cloud computing service provides various server, software, storage, and application services over the
- 2. Internet so thatthey should be safe. They can be configured to handle any size of access or traffic and can scale up and down according to the volume and, frequency of requirement. Thus cloud computing is the delivery of different services through the Internet including different servers, software, storage, and applications. In other words, using cloud computing, customers can access software, infrastructure, platforms, devices, and other resources over the internet. Customers can easily utilize these services available in the cloud without any prior knowledge of how to manage the resources involved. Large companies such as Google, Amazon, IBM, Sun, Cisco, Dell, HP, Intel, Novell, and Oracle are investing in cloud computing to provide individuals and businesses with a variety of cloud-based solutions. For example, Google Cloud is a collection of public cloud services provided by Google. All Application development is done on Google hardware. These include Google Compute Engine, App Engine, Google Cloud Storage, and Google Container Engine. Cloud storage utilizes data centers with massive computer servers that store data and access it online through the internet. The users can remotely upload and store their content and retrieve it whenever they need it. Advantages of cloud computing. Businesses around the world are moving away from traditional on-premises services as cloud computing becomes more popular. In recent years, cloud-based services have radically changed the way businesses do business, enabling them to use information technology infrastructures, platforms, software, and applications via the Internet. Users can devote more time and effort to their main business processes instead of spending their time learning about the resources they need to manage. Cloud computing allows users to avoid significant capital investments because they can rent physical infrastructure from third-party providers. Cloud computing infrastructure services leverage shared resources, allowing servers to work efficiently without being unnecessarily idle, which reduces costs while improving application development speeds. The use of encryption reduces the chance of hackers or unauthorized parties accessing data other than concerned individuals.
- 3. Outsourcing all datainformation and infrastructure will free up companies to focus on the aspects of their business that directly contribute to income, profit, and growth. A major benefit of cloud computing is that mobile devices can access corporate data, which is a great way to make sure no one is left behind. Employees with busy schedules or those who live far away from headquarters can use this feature to stay up-to-date with their customers and colleagues as has been seen in the recent past of the Covid 19 pandemic period. Cloud infrastructure supports environmental considerations, supports virtual services instead of physical products and hardware, safety, reduces paper waste, improves energy efficiency, and reduces computer-related emissions. Types of cloud computing Not all clouds are created the same, and not every type of cloud computing is appropriate for every situation. Cloud is divided into four types Public cloud Private cloud Hybrid cloud Community cloud Public cloud: The public cloud is accessible all over the world through the internet. It is an open system source where platforms are provided free or pay-per-use criteria. A few examples of public clouds include Amazon Elastic Cloud Compute (EC2), Google App Engine, Blue Cloud by IBM, and Azure services Platform by Microsoft. This public cloud is structured in such a way that every business has independent devices. Here anyone can upload large files as much as our defined conditions. In this, we have to only pay for what service we are using. Private cloud:
- 4. In a privatecloud, many of the benefits of cloud computing, including resilience, scalability, ease of service delivery such as access control security, and resource customization can be achieved. Many companies choose private clouds over public clouds because private clouds are easy to manage on a daily basis. Gives different organizations more control and provides greater security for cloud servers Hybrid Cloud In a hybrid cloud, your organization's cloud deployment is divided into public cloud infrastructure and private cloud infrastructure. Sensitive data remains in your private cloud and maintains high-security standards. Operations that do not use sensitive data are performed in the public cloud, where you can extend your infrastructure and reduce costs as needed. Community Cloud The community cloud is a new twist on a private cloud model that provides a complete cloud solution for a particular business community. Enterprises share the infrastructure provided by CSP for software and development tools tailored to the needs of the community. In addition, each company has its own private cloud space built to meet the security, privacy, and compliance requirements common to the community. Types of cloud computing Cloud computing is a huge system that consists of three major services namely IAAS, PAAS, SAAS. IAAS (Infrastructure As A Service) IAAS provides infrastructure like servers, networking, virtual machines, and storage through the internet using a pay-per-use model. Customers can scale the configuration dynamically to meet changing requirements, and they are only billed for services they actually consume. Resource deployment to a customer's environment can be done at any time by the provider It can be expanded easily and saves a great deal of money.
- 5. Examples of IAAStypes of cloud computing are Amazon Web Services (AWS), Sun, and vCloud Express. PAAS (Platform as a Service) PAAS is a service that allows third-party providers to provide hardware and software for users to build applications and pay on a per-use basis. Cloud service providers manage scalability, so the end-user need not worry about it. Besides Java, PHP, Ruby, Perl, and other programming languages, PAAS also provides different frameworks so they can easily understand the applications such as node.js, spring etc. It allows developers to focus on the application's design while the platform handles the database and language. Developers need not worry about the specific language or database used in the application. A few examples are the Google search engine, Facebook, etc. SAAS (Software as a service): SAAS refers to a software distribution model where different services are controlled by a cloud provider and made available to users over the internet. Users of SAAS cloud computing do not need to install so many software packages on their devices to access these applications. They can access the latest updated software via the internet. This is a type of cloud computing service that provides a wide variety of hosted capabilities and services for developing and deploying web-based applications. Examples of SAAS are MS Office web, Facebook, and Google Apps. Study of Cloud Computing as a subject There are many organizations conducting courses online on Cloud Computing. A few of them are Udemy, Pluralsight, Educative, Coursera, Cloud Computing with Amazon Web Services, and Microsoft Azure. For further learning ...
- 6. MCQ AWS solutionarchitect MCQ Machine Learning Qualify Linkedin, Google Cloud Platform Machine Learning Linkedin Assessment Amazon Web Services AWS Lambda Job prospects for Cloud professionals Cloud professionals have been in high demand these days, and the Covid-19 pandemic situation has forced everyone to become more dependent on cloud computing space. According to a recent survey, the cloud sector as a whole has revenues of $ 1.6 trillion, and more than half of the market is made up of banks, financial services, and insurance. IT and telecommunications services, Retail and consumer goods also perform as well. CSS3 Fiverr Test Questions and Options Updated Series 2 CSS3 - An Introduction
- 7. With CSS3, somevisual elements are implemented differently and rendered differently by browsers. The main benefit of CSS3 is that it is divided into separate modules, unlike CSS2, so that it can be developed more efficiently. As a result, the specification is released in chunks, which are more stable than others. CSS3 consists of the following major modules: ● Animations ● User interface (UI) ● Multiple column layout ● 2D/3D transformations ● Text effects ● Selectors 1. Which of the given options is/are equivalent to the following rule? DIV (line-height 12; font-size: 10pt) DIV (line-height: 1.2em; font-size: 10pt) DIV (line-height 12em; font-size: 10pt) DIV (line-height: 120%; font-size: 10pt) DIV (line-height: 20%; font-size: 10pt) DIV (line-height: 80%; font-size: 10pt) 2. Which of the following is the valid option that can be used to remove underlines from the links in CSS3? text-underline: none; text-formatting: none; text-decoration: none;
- 8. 3. In relationto font-variant-caps property in CSS3, which of the following values deactivates the use of alternate glyphs? petite-caps normal unicase inherit 4. What is the problem in the following style sheet? @import “style css”; @ media print { @import "print-main.css"; BODY ( font size : 10pt) } H1 (color : red) Two style sheets can’t be included with @import The toy tag can’t be included inside @media @import rule is invalid since it occurs inside a @media block It is valid 5. Consider the following code: body { text-replace: “a” “b” “b” “c”} What will be the output of the following string if you implement the text-replace style? andy lives behind cafe
- 9. bndy lives behindcbfe cndy lives cehind ccfe andy lives behind cafe andy lives cehind bafe 6. In relation to CSS user interface properties, what is the default value of the outline offset property? 0 1 -1 10 7. Which of the following options is not the valid CSS background property? background-color background-repeat background-position background-picture 8. Can the given code in CSS3 be used to create a thumbnail image? <!DOCTYPE html> <html> <head> <style>
- 10. img { border: 1pxsolid #ddd; border-radius: 4px; padding: 5px; width:150px; } </style> </head> <body> <img src="abc.jpg" alt="abc" style="width:150px"> </body </html> Yes NO 9. In CSS3, which of the following media types is used for the paged braille printers? embossed all print screen 10. Which of the given user interface properties is/ are supported by CSS3?! 1. resize 2. outline-offset
- 11. Only 1 Only 2 Both1 and 2 Neither 1 nor 2 11. In relation to CSS 3D transforms, what is the default value of the transform-origin property in CSS3? 50% 50% 0 40% 40% 20 20% 50% 30 12. Which of the following will the result when you run the below html code? <style type="text/css"> Dl { counter-reset term -1: } dt: before { counter-increment: term 3: content: counter(term) ". "; } </style> <dl> <dt> terms</dt> <dd>definition</dd> <dt>term</dt>
- 12. <dd> definition</dd> 2. term definition 5.term definition 8. term definition 3. term definition 6. term definition 9. term definition 1. term definition 3. term definition 6 term definition 13. Which of the following is not a valid value for the font-smooth property? auto
- 13. never always normal length 14. In relationto the animation direction property in CSS3, which of the following is the effect of the alternate-reverse value The animation is played forwards first, then backwards. The animation is played backwards first, then forwards.. The animation is played as normal (forwards) The animation is played in reverse direction (backwards) 15. In CSS3, which of the given properties can be used to change the text direction of an element? 1. direction 2. unicode-bidi Only 1 Only 2 Both 1 and 2 Neither 1 nor 2 16. Which of the following value of the white-space property will set the value of white-space-collapse to "preserve" and value of the text-wrap to "none"? normal pre
- 14. nowrap pre-wrap pre line 17. Whichof the following properties allow percentages in their value fields? font-size font-variant font-weight line-height 18. Which of the following tag is used to embed css in html page? <css> <!DOCTYPE html> <script> <style> 19. The color in three digit RGB notation is #fbo. What will be its equivalent six digit color code? #fb0fb0 #ffbb00 #fbfboo None of the above 20. In CSS3, which of the following options is the correct selector that can be used to select every <ul> element that are preceded by a <p> element?
- 15. p%ul p~ut p ! ul p$ ul 21. Which of the following is not a valid value for the font-stretch property? condensed normal semi-arrower expanded semi-expanded 22. Which of the following option does NOT exist in media groups available in CSS3? continuous or paged visual or tactile grid or bitmap braille or screen 23. What is the initial value of the hyphens property? none manual auto
- 16. default 24. What isthe initial value of the animation-iteration count property? 0 1 5 None 25. in relation to CSS3, what does the following selector selects? a hrefs=".pdf” it selects every element whose href attribute value ends with “.pdf” it selects every clement whose href attribute value starts with “.pdf” It selects the first element whose href attribute value ends with “.pdf” It selects the first element whose href attributevole starts with par 26. ruby-text (in XHTML: rt) Which of the following display values assign ruby semantics to an arbitrary element as given above? It specifies that an element defines a ruby base. It specifies that an element contains one or more ruby bases it specifies that an element defines a ruby text. It specifies that an element contains one or more ruby texts.
- 17. It specifies thatan element defines a ruby structure 27. Which of the given user interface properties is/are supported by CSS3?! 1. resize 2. outline-offset Only 1 Only 2 Both 1 and 2 Neither 1 nor 2 28. If you want to create a dropdown menu to go from right to left, instead of left to right, then which of the following options will help you to achieve that? style="left;: style="left:0; style="right:0; 29. Can the given code in CSS3 be used to create a thumbnail image? <!DOCTYPE html> <html> <head> <style> Img { border: 1px solid #ddd; border-radius: 4px; padding: 5px;
- 18. Width:150px; } </style> <head> <body> amg src="abc.jpg" alt="abc"style="width:150px"> </body> </html> Yes No 30. In relation to hsla(hue, saturation, lightness, alpha) color in CSS3, what is defined by the parameter alpha? It defines the thickness. It defines the shade. It defines the opacity Consider the following code and say what will happen if you click on More? @media print { .footnote } float: footnote; content: target-move(attr(href url) ) }
- 19. .marker { display:none } } HTML code: <p>John was a great writer<a class="footnote" href="#words"> [More]</a> <p id=words><span class="marker >[More}</span> Great poet too. The tool tip will appear saying Great poet too. A pop up will appear saying Great poet too. The page will shift focus to the line Great poet too Nothing will happen 31. Which of the following is the initial value for the column-fill property? auto balance none 32. Which of the following is the valid option that can be used to remove underlines from the links in CSS3? text-underline: none; text-formatting: none; text-decoration: none; 33. Which of the following is the valid option that can be used to remove underlines from the links in CSS3?
- 20. text-underline: none; text-formatting: none; text-decoration:none; 34. What is the default value of the text-align property for Left to Right Languages? start end left right center justify 35. In CSS3, which of the following declarations can rotate an element counter-clockwise? object-rotation: -30deg rotate-object-30deg transform: rotate(-30deg) transform: rotateobject(-30deg) 36. In relation to CSS, which of the following values of keyframes property are mandatory? animationneme keyframes-selector CSS-styles
- 21. None of theabove. 37. The CSS box model consists of which of the following options? 1. Margin 2. Padding 3. Content All 1, 2, and 3 Only 1 and 2 Only 1 and 3 Only 2 and 3 38. Which of the following rules is equivalent to the em (color: rgb(255,0.0) style? em (color: rgb(300,0,0)) em { color: rgb(255,-10,0)) em color: rgb{110%, 0%, 0%)} em { color: rgb(100%, 0%, 0%)] All of the above 39. Which of the following tag is used to embed css in html page? <css> <!DOCTYPE html> <script> <style>
- 22. 40. Which ofthe following CSS style property is used to specify an italic text? a) style b) font c) font-style d) @font-face Linkedin ReactJS Test Questions Answers Updated 2022 1. What property do you need to add to the Suspense component in order to display a spinner or loading state? function MyComponent() {
- 23. return ( <Suspense> <div> <Message /> </div> </Suspense> ); } ●fallback ● lazy ● loading ● spinner 2. What do you call the message wrapped in curly braces below? const message = 'Hi there'; const element = <p>{message}</p>; ● a JS function ● a JS expression ● a JS element ● a JSX wrapper 3. What can you use to handle code splitting? ● React.memo ● React.split ● React.fallback ● React.lazy 4. When do you use useLayoutEffect? ● to optimize for all devices ● when you need the browser to paint before the effect runs ● to complete the update ● to change the layout of the screen 5. What is the children prop?
- 24. ● a propertythat lets you set an array as a property ● a property that lets you pass components as data to other components ● a property that lets you pass data to child elements ● a property that adds child components to state 6. How do you destructure the properties that are sent to the Dish component? function Dish(props) { return ( <h1> {props.name} {props.cookingTime} </h1> ); } ● function Dish(props) { return <h1>{name} {cookingTime}</h1>; } ● function Dish(...props) { return <h1>{name} {cookingTime}</h1>; }function Dish([name, cookingTime]) { return <h1>{name} {cookingTime}</h1>; } ● function Dish({name, cookingTime}) { return <h1>{name} {cookingTime}</h1>; } 7. When might you use React.PureComponent? ● when you do not want your component to have props ● when you have sibling components that need to be compared ● when you want a default implementation of shouldComponentUpdate() ● when you do not want your component to have state 8. Why is it important to avoid copying the values of props into a component's state where possible? ● because you should never mutate state ● because getDerivedStateFromProps() is an unsafe method to use ● because you want to allow a component to update in response to changes in the props ● because you want to allow data to flow back up to the parent 9. What is the children prop? ● a property that adds child components to state ● a property that lets you set an array as a property ● a property that lets you pass components as data to other components
- 25. ● a propertythat lets you pass data to child elements 10. . In relation to React js component lifecycle, which statement is true ● Only function component can have life cycle ● Only class components can have life cycle ● Both type of components can have life cycle ● None of above 11. To create a constant in JavaScript, which keyword do you use? ● let ● const ● constant ● var 12. What do you call a React component that catches JavaScript errors anywhere in the child component tree? ● error bosses ● error boundaries ● error catchers ● error helpers 13. In which lifecycle method do you make requests for data in a class component? ● constructor ● componentWillReceiveProps ● componentDidMount ● componentWillMount 14. React components are composed to create a user interface. How are components composed? ● by putting them in the same file ● with webpack ● with code splitting ● by nesting components 15. What is sent to an Array.map() function? ● the number of times you want to call the function ● a callback function that is called once for each element in the array ● the name of another array to iterate over ● a string describing what the function should do
- 26. 16. Why isit a good idea to pass a function to setState instead of an object? ● It provides better encapsulation. ● It makes sure that the object is not mutated. ● It automatically updates a component. ● setState is asynchronous and might result in out of sync values. 17. What package contains the render() function that renders a React element tree to the DOM? ● React ● ReactDOM ● Render ● DOM 18. How do you set a default value for an uncontrolled form field? ● Use the value property. ● Use the default property. ● Use the defaultValue property. ● It assigns one automatically. 19. What do you need to change about this code to get it to run? class clock extends React.Component { render() { return <h1>Look at the time: {this.props.time}</h1>; } } ● Add quotes around the return value ● Remove this ● Capitalize clock ● Remove the render method 20. Which Hook could be used to update the document's title? ● useEffect(function updateTitle() { document.title = name + ' ' + lastname; }); ● useEffect(() => { title = name + ' ' + lastname; }); ● useEffect(function updateTitle() { name + ' ' + lastname; }); ● useEffect(function updateTitle() { title = name + ' ' + lastname; }); 21. What can you use to wrap Component imports in order to load them lazily?
- 27. ● React.fallback ● React.split ●React.memo ● React.lazy 22.. How do you invoke setDone only when component mounts, using hooks? function MyComponent(props) { const [done, setDone] = useState(false); return <h1>Done: {done}</h1>; } ● useEffect(() => { setDone(true); }); ● useEffect(() => { setDone(true); }, [setDone]); ● useEffect(() => { setDone(true); }, []); ● useEffect(() => { setDone(true); }, [done, setDone]); 23. Which of the following click event handlers will allow you to pass the name of the person to be hugged? class Huggable extends React.Component { hug(id) { console.log("hugging " + id); } render() { let name = "kitteh"; let button = // Missing Code return button; } } ● <button onClick={(e) => this.hug(name,e)}>Hug Button</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>
- 28. 24. Currently, handleClickis being called instead of passed as a reference. How do you fix this? <button onClick={this.handleClick()}>Click this</button> ● <button onClick={this.handleClick.bind(handleClick)}>Click this</button> ● <button onClick={handleClick()}>Click this</button> ● <button onClick={this.handleClick}>Click this</button> ● <button onclick={this.handleClick}>Click this</button> 25. In which directory react components are saved? ● inside js/components/ ● inside node_modules/components/ ● inside app/components/ ● None the above 26. If you want to import just the Component from the React library, what syntax do you use? ● import React.Component from 'react' ● import [ Component ] from 'react' ● import { Component } from 'react' ● import Component from 'react' 27. If a function component should always render the same way given the same props, what is a simple performance optimization available for it? ● Implement the useReducer Hook. ● Wrap it in the React.memo higher-order component. ● Implement the useMemo Hook. ● Implement the shouldComponentUpdate lifecycle method. 28. How do you fix the syntax error that results from running this code? const person =(firstName, lastName) => { first: firstName, last: lastName } console.log(person("Jill", "Wilson"))
- 29. ● Add areturn statement before the first curly brace. ● Replace the object with an array. ● Wrap the object in parentheses. ● Call the function from another file. 29. If you see the following import in a file, what is being used for state management in the component? import React, {useState} from 'react'; ● stateful components ● math ● React Hooks ● class components 30. Using object literal enhancement, you can put values back into an object. When you log person to the console, what is the output? const name = 'Rachel'; const age = 31; const person = { name, age }; console.log(person); ● {{name: "Rachel", age: 31}} ● {name: "Rachel", age: 31} ● {person: "Rachel", person: 31}} ● {person: {name: "Rachel", age: 31}} 31. What is the testing library most often associated with React? ● Mocha ● Chai ● Sinon ● Jest 32. To get the first item from the array ("cooking") using array destructuring, how do you adjust this line? const topics = ['cooking', 'art', 'history']; ● const first = ["cooking", "art", "history"] ● const [] = ["cooking", "art", "history"] ● const [, first]["cooking", "art", "history"] ● const [first] = ["cooking", "art", "history"]
- 30. 33. How doyou handle passing through the component tree without having to pass props down manually at every level? ● React Send ● React Pinpoint ● React Router ● React Context 34. What should the console read when the following code is run? const [, , animal] = ['Horse', 'Mouse', 'Cat']; console.log(animal); ● Horse ● Cat ● Mouse ● undefined 35. How do you handle passing through the component tree without having to pass props down manually at every level? ● React Router ● React Context ● React Send ● React Pinpoint 36. Which attribute do you use to replace innerHTML in the browser DOM? ● injectHTML ● weirdSetInnerHTML ● dangerouslySetInnerHTML ● strangeHTML 37. Which of these terms commonly describe React applications? ● declarative ● integrated ● closed ● imperative 38. When using webpack, why would you need to use a loader? ● to put together physical file folders ● to load external data ● to load the website into everyone's phone
- 31. ● to preprocessfiles 39. A representation of a user interface that is kept in memory and is synced with the "real" DOM is called what? ● DOM ● virtual elements ● virtual DOM ● shadow DOM 40. You have written the following code but nothing is rendering. How do you fix this problem? const Heading = () => { <h1>Hello!</h1>; }; ● Add a render function. ● Move the h1 to another component. ● Surround the h1 in a div. ● Change the curly braces to parentheses or add a return statement before the h1 tag. 41. All React components must act like _ with respect to their props. ● monads ● pure functions ● recursive functions ● higher-order functions 42. Why might you use a ref? ● to directly access the DOM node ● to refer to another JS file ● to call a function ● to bind the function 43. What is [e.target.id] called in the following code snippet? handleChange(e) { this.setState({ [e.target.id]: e.target.value }) } ● a computed property name
- 32. ● a dynamickey ● a set value ● a JSX code string 44. What is the name of this component? class Clock extends React.Component { render() { return <h1>Look at the time: {time}</h1>; } } ● Clock ● It does not have a name prop. ● React.Component ● Component 45. How can you access the state of a component from inside of a member function? ● this.state ● this.values ● this.getState() ● this.prototype.stateValue 46.Which library does the fetch() function come from? ● React ● FetchJS ● ReactDOM ● No library. fetch() is supported by most browsers. 47.What is the difference between the click behaviors of these two buttons(assuming that this.handleClick is bound correctly) A. <button onClick=this.handleClick>Click Me</button> B. <button onClick={event => this.handleClick(event)}>Click Me</button> ● Button A will not have access to the event object on click of the button ● There is no difference ● Button A will not fire the handler this.handleClick successfully ● Button B will not fire the handler this.handleClick successfully
- 33. 48.What will happenwhen this useEffect Hook is executed, assuming name is not already equal to John? useEffect(() => { setName('John'); }, [name]); ● It will cause an error immediately. ● It will execute the code inside the function, but only after waiting to ensure that no other component is accessing the name variable. ● It will cause an infinite loop. ● It will update the value of name once and not run again until name is changed from the outside. 49. How would you add to this code, from React Router, to display a component called About? <Route path="/:id" /> ● <Route path="/tid" about={Component} /> ● <Route path="/:id" route={About} /> ● <Route path="/:id"> ● {' '} ● <About /> ● </Route> ● <Route> ● <About path="/:id" /> ● </Route> 50. Which class-based component is equivalent to this function component? const Greeting ({ name }) > <h1>Hello {name}!</h1>;
- 34. ● class Greetingextends React.Component { ● constructor() { ● return <h1>Hello {this.props.name}!</h1>; ● } ● } ● class Greeting extends React.Component { ● <h1>Hello {this.props.name}!</h1>; ● } ● class Greeting extends React.Component { ● render({ name }) { ● return <h1>Hello {name}!</h1>; ● } ● } ● class Greeting extends React.Component { ● render() { ● return <h1>Hello {this.props.name}!</h1>; ● } ● } 51. Give the code below, what does the second argument that is sent to the render function describe? ReactDOM.render( <h1>Hi<h1>, document.getElementById('root') ) ● where the root component is ● where to create a new JavaScript file ● where the React element should be added to the DOM ● where to call the function 52. Why should you use React Router's Link component instead of a basic <a> tag in React?
- 35. ● The linkcomponent allows the user to use the browser's Back button. ● There is no difference--the Link component is just another name for the <a> tag. ● The <a> tag will cause an error when used in React. ● The <a> tag triggers a full page reload, while the Link component does not. 53. What is the first argument, x, that is sent to the createElement function? React.createElement(x, y, z); ● the element that should be created ● the order in which this element should be placed on the page ● the properties of the element ● data that should be displayed in the element 54. Which class-based lifecycle method would be called at the same time as this effect Hook? useEffect(() => { // do things }, []); ● componentWillUnmount ● componentDidMount ● render ● componentDidUpdate 55. Given the code below, what does the second argument that is sent to the render function describe? ReactDOM.render(<h1>Hi</h1>, document.getElementById('root')); ● where the React element should be added to the DOM ● where to call the function ● where the root component is ● where to create a new JavaScript file 56. What is the first argument, x, that is sent to the createElement function? React.createElement(x,y,z); ● the order in which this element should be placed on the page ● the element that should be created ● the properties of the element ● data that should be displayed in the element.
- 36. 57. What isthe name of this component? class Comp extends React.Component { render() { return <h1>Look at the time: {time}</h1>; } } ● Comp ● h1 ● React.Component ● Component 58. When using a portal, what is the first argument? ReactDOM.createPortal(x, y); ● the current state ● the element to render ● the App component ● the page 59. What is setCount? const [count, setCount] = useState(0); ● the initial state value ● a variable ● a state object ● a function to update the state 60. Which of the following method refers to the parent class in React.js? ● self() ● super() ● this() ● None of the above 61. What is the JavaScript syntax extension that is commonly used to create React elements? ● HTML ● JavaScriptX ● JSX
- 37. ● React JavaScript 62.How might you check property types without using Flow or TypeScript? ● Check Manually. ● Use prop-helper. ● user checker-types. ● use prop-types. 63. How do you add an id of heading to the following h1 element? let dish = <h1>Mac and Cheese</h1>; ● let dish = <h1 id={heading}>Mac and Cheese</h1>; ● let dish = <h1 id:"heading">Mac and Cheese</h1>; ● let dish = <h1 id="heading">Mac and Cheese</h1>; ● let dish = <h1 class="heading">Mac and Cheese</h1>; 64. What value of button will allow you to pass the name of the person to be hugged? class Huggable extends React.Component { hug(id) { console.log("hugging " + id); } render() { let name = "kitten"; let button = // Missing code return button; } } ● <button onClick={(name) => this.hug(name)}>Hug Button</button>; ● <button onClick={(e) => this.hug(name, e)}>Hug Button</button>; ● <button onClick={this.hug(e, name)}>Hug Button</button>; ● <button onClick={(e) => hug(name, e)}>Hug Button</button>; 65. What syntax do you use to create a component in React? ● a generator
- 38. ● a functionor a class ● a service worker ● a tag 66. You want to disable a button so that it does not emit any events onClick. Which prop do you use to acomplish this? ● onBlur ● disabled ● onPress ● defaultValue 67. In this function, which is the best way to describe the Dish component? function Dish() { return ( <> <Ingredient /> <Ingredient /> </> ); } ● nested component ● sibling component ● child component ● parent component 68. When does the componentDidMount function fire? ● right after the component is added to the DOM ● before the component is added to the DOM ● right after the component is updated ● right after an API call 69. What might you use webpack for? ● to fetch remote dependencies used by your app ● to split your app into smaller chunks that can be more easily loaded by the browser
- 39. ● to formatyour code so that it is more readable ● to ensure your app is not vulnerable to code injection 70. What can you use to handle code splitting? ● React.split ● React.lazy ● React.memo ● React.fallback 71. When using the React Developer Tools Chrome extension, what does it mean if the React icon is red? ● You are using the development build of React. ● You are using the production build of React. ● You are using webpack. ● You are using Create React App. 72. How would you modify the constructor to fix this erroe: "ReferenceError: Must call super constructor in derived class before accessing 'this'..."? class TransIsBeautiful extends React.Component { constructor(props){ // Missing line console.log(this) ; } ... } ● render(props); ● super(this); ● super(props); ● this.super(); 73. Which language can you not use with React? ● Swift. ● JSX. ● Javascipt. ● TypeScript.
- 40. 74. This codeis part of an app that collects Pokemon. How would you print the list of the ones collected so far? constructor(props) { super(props); this.state = { pokeDex: [] }; } ● console.log(this.state.pokeDex); ● console.log(props.pokeDex); ● console.log(this.props.pokeDex); ● console.log(pokeDex); 75. What would be the result of running this code? function add(x = 1, y = 2) { return x + y; } add(); ● null ● 0 ● 3 ● undefined 76. Which of the following method is not a part of ReactDOM? ● ReactDOM.delete() ● ReactDOM.destroy() ● ReactDOM.unset() ● None of the above 77. Why might you use a React.ref? ● to refer to another JS file ● to bind the function ● to call a function
- 41. ● to directlyaccess the DOM node 78. Which of the following API is a MUST for every ReactJS component? ● getInitialState ● renderComponent ● render ● None 79. Add the code that will fire the photon torpedoes when the button is clicked. class StarTrekkin extends React.Component { firePhotonTorpedoes(e) { console.log('pew pew'); } render() { return; // Missing code } } ● <button onClick={firePhotonTorpedoes()}>Pew Pew</button> ● <button onClick={this.firePhotonTorpedoes}>Pew Pew</button> ● <button onClick={firePhotonTorpedoes}>Pew Pew</button> ● <button onClick={this.firePhotonTorpedoes()}>Pew Pew</button> 80. What is the process of deciding whether an update is necessary? ● shadow DOM ● fiber ● reconciliation ● setting state 81. React is an open-source project but is maintained by which company? ● Intuit ● Twitter ● Snapchat ● Facebook 82. What command can you use to generate a React project?
- 42. ● react-starter ● create-react-app ●react-gen ● react-start 83. What is the browser extension called that React developers use to debug applications? ● React Codewatch ● React Debug ● React Developer Tools ● React Tooling Add-on 84. Which tool is not part of Create React App? ● React ● jQuery ● webpack ● ReactDOM 85. What function allows you to render React content in an HTML page? ● React.mount() ● ReactDOM.start() ● ReactDOM.render() ● React.render() 86. What is the use of map function below? const database = [user1:{},user2:{},user3:{}]; database.map((user)=><h1>user.data</h1>); ● gives a map of all the entries in database ● returns one heading tag for all the entries in database ● checks which entry in the database is suitable for heading tag ● returns a heading tag for every entry in the database containing it's data 87. Describe what is happening in this code? const { name: firstName } = person; ● It is creating a new object that contains the same name property as the person object. ● It is assigning the value of the person object's name property to a constant called firstName. ● It is assigning the value of the person object's firstName property to a constant called name.
- 43. ● It isretrieving the value of person.name.firstName. 88. What is wrong with this code? const MyComponent = ({ names }) => ( <h1>Hello</h1> <p>Hello again</p> ); ● React components cannot be defined using functions. ● React does not allow components to return more than one element. ● The component needs to use the return keyword. ● String literals must be surrounded by quotes. 89. When using a portal, what is the second argument? ReactDOM.createPortal(x, y); the App component the page the current state the DOM element that exists outside of the parent component 90. Given this code, what will be printed in the <h1> tag? const MyComponent = ({ children }) => ( <h1>{children.length}</h1> ); ... <MyComponent> <p>Hello</p> <p>Goodbye</p> </MyComponent> ● It will produce an error saying "cannot read property "length" of undefined."
- 44. ● 1 ● 2 ●undefined 91. Which of the following is the correct data flow sequence of flux concept? ● Action->Dispatcher->View->Store ● Action->Store->Dispatcher->View ● Action->Dispatcher->Store->View ● None of the above 92. What is this pattern called? const [count, setCount] = useState(0); ● object destructuring ● array destructuring ● spread operating ● code pushing 93. What is the first file loaded by the browser in a basic React project? ● src/App.js ● public/index.html ● src/index.js ● public/manifest.json 94. The code below is rendering nothing, and there is an error that says "ReactDOM is not defined." How do you fix this issue? import React from 'react'; import { render } from 'react-dom'; const element = <h1>Hi</h1>; ReactDOM.render(element, document.getElementById('root')); ● renderDOM(element, document.getElementById("root")); ● DOM(element, document.getElementById("root")); ● render(element, document.getElementById("root")); ● ReactDOM(element, document.getElementById("root")); 95. In this component, how do you display whether the user was logged in or not? render() {
- 45. const isLoggedIn =this.state.isLoggedIn; return ( <div> The user is: </div> ); } ● The user is loggedIn ? logged in : not logged in. ● Write a function to check the login status. ● The user is {isLoggedIn = "no"}. ● The user is {isLoggedIn ? "logged in." : "not logged in"}. Q83. You are rendering a list with React when this warning appears in the console: "Warning: Each child in a list should have a unique 'key' prop." How do you fix this issue? ● Pass the name of each item as its key. ● Add a key prop with the same value to each item the list. ● Clear the console warnings. ● When iterating over the list items, add a unique property to each list item. 96. Which of the following command is used to install create-react-app? ● install -g create-react-app ● npm install -g create-react-app ● npm install create-react-app ● npm install -f create-react-app 97. How would you generate the boilerplate code for a new app that you are building to collect underpants? ● npm create-react-app collect-underpants ● npx start-app collect-underpants ● react new collect-underpants ● npx create-react-app collect-underpants 98. Which is not true about Virtual DOM in React JS? ● Can not directly update HTML. ● It updates faster. ● DOM manipulation is very easy.
- 46. ● Too Muchmemory wastage 99. What is the name of the tool used to take JSX and turn it into createElement calls? ● JSX Editor ● Babel ● ReactDOM ● Browser Buddy 100. Why might you use useReducer over useState in a React component? ● when you want to replace Redux ● when you need to manage more complex state in an app ● when you want to improve performance ● when you want to break your production app 101. Which props from the props object is available to the component with the following syntax? <Message {...props} /> ● any that have not changed ● child props ● any that have changed ● all of them 102. Consider the following code from React Router. What do you call :id in the path prop? <Route path="/:id" /> ● This is a route modal ● This is a route parameter ● This is a route splitter ● This is a route link 103. If you created a component called Dish and rendered it to the DOM, what type of element would be rendered? function Dish() { return <h1>Mac and Cheese</h1>; } ReactDOM.render(<Dish />, document.getElementById('root')); ● h1 ● div
- 47. ● section ● component 104.How do you access a function getData() from a h1 element in JSX? ● {getData()} ● {getData} ● ${getData()} ● ${getData} 105. What happens when the following render() method executes? render(){ let langs = ["PHP","ES6","JAVA"] return (<div> {langs.map(it => <p>{it}</p>)} </div>) } ● Error. Cannot use direct JavaScript code in JSX ● Displays the list of languages in the array ● Error. Should be replaced with a for..loop for correct output ● Displays nothing 106. What does this React element look like given the following function? (Alternative: Given the following code, what does this React element look like?) React.createElement('h1', null, "What's happening?"); ● <h1 id="component">What's happening?</h1> ● <h1 id="element">What's happening?</h1> ● <h1 props={null}>What's happening?</h1> ● <h1>What's happening?</h1> 107. Which answer best describes a function component? ● A function component is the same as a class component. ● A function component is the only way to create a component. ● A function component is required to create a React component. ● A function component accepts a single props object and returns a React element. 108. Which library does the fetch() function come from?
- 48. ● FetchJS ● ReactDOM ●React ● No library. fetch() is supported by most browsers. 109. What will happen when this useEffect Hook is executed, assuming name is not already equal to John? useEffect(() => { setName('John'); }, [name]); ● It will cause an error immediately. ● It will cause an infinite loop. ● It will execute the code inside the function, but only after waiting to ensure that no other component is accessing the name variable. ● It will update the value of name once and not run again until name is changed from the outside. 110. Which choice will not cause a React component to rerender? ● if the component calls this.setState(...) ● one of the component's siblings rerenders ● the value of one of the component's props changes ● if the component calls this.forceUpdate() 111. You have created a new method in a class component called handleClick, but it is not working. Which code is missing? class Button extends React.Component{ constructor(props) { super(props); // Missing line } handleClick() {...} } ● this.handleClick = this.handleClick.bind(this); ● this.handleClick.bind(this);
- 49. ● props.bind(handleClick); ● this.handleClick.bind(); 113.If you wanted to display the count state value in the component, what do you need to add to the curly braces in the h1? class Ticker extends React.component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return <h1>{}</h1>; } } ● count ● state ● state.count ● this.state.count 114. Per the following code, when is the Hello component displayed? const greeting = isLoggedIn ? <Hello /> : null; never when isLoggedIn is true when a user logs in when the Hello function is called 115. In the following code block, what type is orderNumber? ReactDOM.render(<Message orderNumber="16" />, document.getElementById('root')); ● boolean ● object ● string
- 50. ● number 116. Youhave added a style property to the h1 but there is an unexpected token error when it runs. How do you fix this? const element = <h1 style={ backgroundColor: "blue" }>Hi</h1>; ● const element = <h1 style={{backgroundColor: "blue"}}>Hi</h1>; ● const element = <h1 style={blue}>Hi</h1>; ● const element = <h1 style="backgroundColor: "blue""}>Hi</h1>; ● const element = <h1 style="blue">Hi</h1>; 117. Which function is used to update state variables in a React class component? ● replaceState ● setState ● refreshState ● updateState 118. Consider the following component. What is the default color for the star? const Star = ({ selected = false }) => <Icon color={selected ? 'red' : 'grey'} />; ● red ● grey ● black ● white 119. What is the difference between the click behaviors of these two buttons (assuming that this.handleClick is bound correctly)? A. <button onClick={this.handleClick}>Click Me</button> B. <button onClick={event => this.handleClick(event)}>Click Me</button> ● Button A will not have access to the event object on click of the button. ● Button B will not fire the handler this.handleClick successfully. ● Button A will not fire the handler this.handleClick successfully. ● There is no difference. You may like to learn MySQL Test Questions Answers Linkedin Assessment
- 51. Search Engine OptimizationSEO Question Answers Fiverr Test Adobe Premiere Pro MCQ practice question answers For Tests Adobe Dreamweaver Fiverr Test Questions Answers Fiverr Spanish Grammar Test Questions Latest 2022 Questions for Relevel Frontend Development Exams Round 1 Creative Certification Google Quesion Answers updated 2022 MongoDB Skill Test Linkedin Question Answers Maven Skill Test Linkedin Question Answers Linkedin Python Test Question Answers English Language Test Words and Phrases How to Remove Blank Lines from MSWord Documents EASILY Google Certified Educator Level 1 Exam Answers 2022 Digital Agencies SEMrush Certification Questions and Answers Cyber Security Test Questions Answers Linkedin Amazon Retail for Advertisers Certification Questions Answers Semrush Amazon Seller Certification Answers Updated Adobe Photoshop Test Linkedin Answers Updated Content Writing Test Fiverr Question Answer Microsoft Excel 2016 Fiverr Test Updated Question Answer Agile Methodologies Linkedin Test Question Answer AWS Solution Architect Associate Exam Questions Answers LinkedIn MATLAB Assessment Questions and Answers Fiverr Social Media Marketing Questions and Answers Machine Learning Linkedin Assessment Question Answers
- 52. Adobe Illustrator FiverrSkills Test Questions and Answers Linkedin Amazon Web Services AWS Lambda Test Question Answers IT Operations skill test 2022 Linkedin Question Answers IT Operations skill test 2022 Linkedin Question Answers Search Engine Optimization Linkedin Test Answers Common Service Center CSC TEC Assessment WordPress skill test Question Answers