NEW
Font size
WorksheetsReactJS Online Test
Total questions: 25
Worksheet time: 13mins
What is the correct command to create a new React project?
npx create-react-app myReactApp
npm create-react-app
npx create-react-app
npm create-react-app myReactApp
What does myReactApp refer to in the following command?
"npx create-react-app myReactApp"
A reference to an existing app
The name you want to use for the new app
The directory to create the new app in
The type of app to create
What command is used to start the React local development server?
npm serve
npm run dev
npm start
npm build
What is the default local host port that a React development server uses?
8080
5000
3000
3500
To develop and run React code, Node.js is required.
True
False
What type of element will be rendered from the following code?
div
Component
ReactDom
h1
What is the children prop?
A property that lets you nest components in other components
A property that adds child values to state
A property that lets you set an object as a property
A property that lets you pass data to child components
Which keyword creates a constant in JavaScript?
const
constant
var
let
A copy of the 'real' DOM that is kept in memory is called what?
React DOM
Shadow DOM
DOM
Virtual DOM
React component names must begin with an uppercase letter.
True
False
Which operator can be used to conditionally render a React component?
::
??
||
&&
When rendering a list using the JavaScript map() method, what is required for each element rendered?
data
index
id
key
What tool does React use to compile JSX?
Babel
JSX Compiler
React Router
ReactDOM
How can you optimize performance for a function component that always renders the same way?
Use the useMemo Hook.
Use the shouldComponentUpdate lifecycle method.
Use the useReducer Hook.
Wrap it in the React.memo higher-order component.
What props will be available to the following component?
"<Car {...props} />"
only static ones
only updated ones
children
all of them
What is a common use case for ref?
To directly access a DOM node
To bind the function
To refer to a function
To refer to another JavaScript file
How can you combine the following arrays using the spread operator?
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combined = ...array1 + ...array2;
const combined = [array1, array2];
const combined = [...array1, ...array2];
const combined = array1 + array2;
React can only render elements in the root document element.
False
True
What is the correct syntax to import a Component from React?
import React.Component from 'react'
import Component from 'react'
import { Component } from 'react'
import [ Component ] from 'react'
Find the bug in this code:
Remove the return statement
The first letter of the function must be capitalized
Add parenthesis around the return value
Wrap the return in a fragment
React separates the user interface into components. How are components combinded to create a user interface?
With webpack
By nesting components
With code splitting
By putting them in a folder structure
Although React Hooks generally replace class components, there are no plans to remove classes from React.
False
True
Which of the following is NOT a rule for React Hooks?
Hooks cannot be conditional
Hooks can be called in Class or Function components
Hooks can only be called inside React Function components
Hooks can only be called at the top level of a component
What is the output of the following code?
const make = 'Ford';
const model = 'Mustang';
const car = { make, model };
console.log(car);
{car: 'Ford', car: 'Mustang'}}
{make: 'Ford', model: 'Mustang'}
{{make: 'Ford', model: 'Mustang'}}
{car: {make: 'Ford', model: 'Mustang'}}
Why should you avoid copying the values of props into a component's state?
Because you should never mutate state
Because you want to allow data to flow back up to the parent
Because that would create two instances of the same state that could become out of sync
Because prop values cannot be stored in state
