Fullname :ibrahim.hajiri……………………………………………………………….

Phonenumber……0643726631………………………………………………….

React Quiz
Question 1: Question 8: Question 15:
What is the correct command to create a new React project? Which keyword creates a constant in JavaScript? How can you combine the following arrays using the spread operator?

(A) npm create-react-app (A) let const array1 = [1, 2, 3];

(B) npm create-react-app myReactApp (B) constant const array2 = [4, 5, 6];
(C) npx create-react-app (C) const (A) const combined = array1 + array2;
(D) npx create-react-app myReactApp (D) var (B) const combined = [array1, array2];
(C) const combined = ...array1 + ...array2;
(D) const combined = [...array1, ...array2];

Question 2: Question 9: Question 16:

What does myReactApp refer to in the following command? A copy of the 'real' DOM that is kept in memory is called what? React can only render elements in the root document element.

npx create-react-app myReactApp (A) Virtual DOM (A) True

(A) The type of app to create (B) Shadow DOM (B) False
(B) The name you want to use for the new app (C) DOM
(C) A reference to an existing app (D) React DOM
(D) The directory to create the new app in

Question 17:
Question 3: Question 10: What is the correct syntax to import a Component from React?
What command is used to start the React local development server? React component names must begin with an uppercase letter.

(A) import React.Component from 'react'

(A) npm serve (A) True (B) import { Component } from 'react'
(B) npm start (B) False (C) import [ Component ] from 'react'
(C) npm build (D) import Component from 'react'
(D) npm run dev

Question 4: Question 11: Question 18:

What is the default local host port that a React development server Which operator can be used to conditionally render a React React separates the user interface into components. How are
uses? component? components combinded to create a user interface?

(A) 8080 (A) && (A) By nesting components

(B) 3000 (B) || (B) With code splitting
(C) 3500 (C) ?? (C) With webpack
(D) 5000 (D) :: (D) By putting them in a folder structure

Question 5: Question 12: Question 19:

To develop and run React code, Node.js is required. When rendering a list using the JavaScript map() method, what is Although React Hooks generally replace class components, there are
required for each element rendered? no plans to remove classes from React.

(A) True
(B) False (A) key (A) True
(B) index (B) False
(C) id
(D) data

Question 6: Question 13: Question 20:

What type of element will be rendered from the following code? What tool does React use to compile JSX? Which of the following is NOT a rule for React Hooks?

function Car() { (A) Babel (A) Hooks can be called in Class or Function components
return <h1>Ford Mustang</h1>; (B) ReactDOM (B) Hooks can only be called inside React Function components
} (C) React Router (C) Hooks can only be called at the top level of a component
ReactDOM.render(<Car />,document.getElementById('root'));
(D) JSX Compiler (D) Hooks cannot be conditional
(A) Component
(B) ReactDom
(C) div
(D) h1

Question 7: Question 14:

What is the children prop? How can you optimze performance for a function component that
always renders the same way?

(A) A property that lets you pass data to child components

(B) A property that adds child values to state (A) Use the shouldComponentUpdate lifecycle method.
(C) A property that lets you set an object as a property (B) Wrap it in the React.memo higher-order component.
(D) A property that lets you nest components in other (C) Use the useMemo Hook.
components (D) Use the useReducer Hook.
 Fullname :……………
IBRAHIM.HAJIRI…………………………………………….

Phonenumber :………0643726631……………………………………………….

1) Choose one of the following exercices :

i. Right Shift by Division Add your code here

The right shift operation is similar to floor division by powers of two.

Sample calculation using the right shift operator ( >> ):

80 >> 3 = floor(80/2^3) = floor(80/8) = 10

-24 >> 2 = floor(-24/2^2) = floor(-24/4) = -6
-5 >> 1 = floor(-5/2^1) = floor(-5/2) = -3

Write a function that mimics (without the use of >>) the right shift
operator and returns the result from the two given integers.

Examples

shiftToRight(80, 3) ➞ 10
shiftToRight(-24, 2) ➞ -6
shiftToRight(-5, 1) ➞ -3

ii. Concatenate Variable Number of Input Arrays

Create a function that concatenates n input arrays, where n is variable.

Examples
function CONCAT(...Val){
concat([1, 2, 3], [4, 5], [6, 7]) ➞ [1, 2, 3, 4, 5, 6, 7] let array = [];
concat([1], [2], [3], [4], [5], [6], [7]) ➞ [1, 2, 3, 4, 5, 6, 7] for(let i=0; i<Val.length;i++){
concat([1, 2], [3, 4]) ➞ [1, 2, 3, 4] for(let a=0; a<Val.length; a++){
concat([4, 4, 4, 4, 4]) ➞ [4, 4, 4, 4, 4]
array.push(Val[i][a])
}
iii. Array of Multiples
}
Create a function that takes two numbers as arguments return array;
( num , length ) and returns an array of multiples of num until the }
array length reaches length .
function CONCAT(...Val){
Examples let array = [];
arrayOfMultiples(7, 5) ➞ [7, 14, 21, 28, 35]
for(let i=0; i<Val.length;i++){
arrayOfMultiples(12, 10) ➞ [12, 24, 36, 48, 60, 72, 84, 96, 108, 120] for(let a=0; a<Val.length; a++){
arrayOfMultiples(17, 6) ➞ [17, 34, 51, 68, 85, 102] array.push(Val[i][a])
}
}
return array;
}
 Full name : ……………………………………………………………….

Phone number : ……………………………………………………….

Exercise 1:
The following code uses the prompt() function to get two numbers from the user. It then adds those
two numbers together and writes the result to the page:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<script language=”JavaScript” type=”text/javascript”>

var firstNumber = prompt(“Enter the first number”,””);

var secondNumber = prompt(“Enter the second number”,””);
var theTotal = firstNumber + secondNumber;
document.write(firstNumber + “ added to “ + secondNumber + “ equals “ +
theTotal);

</script>
</body>
</html>

However, if you try the code out, you'll discover that it doesn't work. Why not? Change the code so that it
does work.

Exercise 2 :
A junior programmer comes to you with some code that appears not to work. Can you spot where he
went wrong? Give him a hand and correct the mistakes.

var userAge = prompt(“Please enter your age”);

if (userAge = 0);
{
alert(“So you're a baby!”);
}
else if ( userAge < 0 | userAge > 200)
alert(“I think you may be lying about your age”);
else
{
alert(“That's a good age”);
}
Good luck