Republic of Tunisia

Ministry of Higher Education and

Scientific Research
University of Tunis
Tunis Business School

Section 1: Answer true or false to the following statements:

1. SPA (Single Page Application) means that the navigation within Instagram is performed without
refreshing the whole page. TRUE
2. In the map() method, the indices of empty slots are replaced with undefined in the returned array.
FALSE
3. The filter() method will skip empty slots. TRUE
4. An arrow function must have always a name. FALSE
5. There is no automatic tool to convert from HTML to JSX. FALSE

Section 2: Select the correct answer (ONLY ONE answer is correct):

6. What command is used to start the React local development server?

A. npm build
B. npm run dev
C. npm serve
D. npm start

7. Why are arrow functions used?

A. To access pointer variable

B. To access variable of a class
C. Both A. and B.
D. Write shorter function syntax.

8. A React application is rendered on:

A. The client side.

B. The server side.
C. Both client and server side.
D. None of the above.

9. What is the correct command to create a new React project?

A. npx create-react-app myReactApp

B. npx create-react-app
C. npm create-react-app
D. npm create-react-app myReactApp

10. What is not true about React component?

A. A React component is a JavaScript function.

B. A React component can be a class component.
C. A React component is a JavaScript function that return its JSX code.

1
D. A React component is a JavaScript function that returns the HTML code of the Web
application.

11. We aim to display on the console the characters entered by the user in the input field. Choose
the correct solution:

A const Search = () => {

const handling = (userinput) => console.log(userinput);
return (
<div>
<h1>My Hacker Stories</h1>
<label htmlFor="search">Search: </label>
<input id="search" type="text" onChange={handling(userinput)}/>
<hr />
</div>
);
}
B const Search = () => {
const handling = (userinput) => console.log(userinput);
return (
<div>
<h1>My Hacker Stories</h1>
<label htmlFor="search">Search: </label>
<input id="search" type="text" onChange={handling()}/>
<hr />
</div>
);
}
C const Search = () => {
const handling = userinput => console.log(userinput);
return (
<div>
<h1>My Hacker Stories</h1>
<label htmlFor="search">Search: </label>
<input id="search" type="text" onChange={handling}/>
<hr />
</div>
);
}
D const Search = () => {
const handling = (userinput) => console.log(userinput);
return (
<div>
<h1>My Hacker Stories</h1>
<label htmlFor="search">Search: </label>
<input id="search" type="text" onClick={handling}/>
<hr />

2
</div>
);
}

12. We aim to write the App component as an arrow function. Choose the correct solution:

const App = () => {

<div>
A <Search />
<List />
</div>
};
const App = () => {
return (
<div>
<Search />
B
<List />
</div>
);
};
App = () =>

<div>
C
<Search />
<List />
</div>
const App = () =>

<div>
D
<Search />
<List />
</div>

13. ReactJS uses _____ to increase performance.

A. Virtual DOM
B. Real DOM
C. A and B
D. None of the above

14. Choose the correct syntax of arrow function for the following function:

function Msg() {
return "Good Morning";
}

A. Msg = () => {return "Good Morning";}

3
B. Msg = () => "Good Morning";
C. Both A and B.
D. None of the above.

15. A copy of the 'real' DOM that is kept in memory is called:

A. ReactDOM
B. DOM
C. Virtual DOM
D. Shadow DOM

16. Which is the correct arrow function to add two numbers?

A. const add = (a,b) => a+b;

B. const add = (a,b) => return a+b;
C. const add = (a,b) => { return a+b;}
D. Both A. and C.

17. When is the component function run?

A. When the component is rendered

B. When the component is updated
C. When the function is declared
D. Both A and B

18. What is the best definition of React.js?

A. Server-side Framework
B. User-interface framework
C. A Library for building interaction interfaces
D. None of the above

19. Let’s consider the following code, choose the right alternative:

const a=[1,2, , undefined]

console.log(a.filter((x) => x === undefined));
console.log(a.filter((x) => x !== 3));

A. [undefined]
[1,2, undefined]
B. Error
C. [1,2, undefined]
[1,2, undefined]
D. [undefined]
[1,2]

20. What is not a true about JSX?

A. Close all the tags.

4
B. Return a single root element.
C. Use curly braces for JavaScript.
D. Convert all HTML attributes to camelCase naming convention.

21. Let’s consider the following code, choose the right alternative(s) for the Disp component:

const info = [
{
fname: "Jane",
address: "NYC",
age: 25 ,
objectID: 0,
},
{
fname: "John",
address: "WDC",
age: 55 ,
objectID: 1,
},
{
fname: "Jack",
address: "LA",
age: 35 ,
objectID: 2,
},
];

const Disp=()=> {
return (
<ul>
{info.map(function (item) {
return (
<li key={item.objectID}>
<span>{item.fname}</span>
A <span>{item.address}</span>
<span>{item.age}</span>
</li>
);
})}
</ul>
);
};

5
function Disp(){
return (
<ul>
{info.map( (item)=> {
return (
<li key={item}>
<span>{item.fname}</span>
B <span>{item.address}</span>
<span>{item.age}</span>
</li>
);
})}
</ul>
);
};
function Disp(){
return (
<ul>
{info.map((item) {
return (
<li key={item.objectID}>
<span>item.fname</span>
C <span>item.address</span>
<span>item.age</span>
</li>
);
})}
</ul>
);
};
const Disp =>{
return (
<ul>
{info.map((item) {
return (
<li key={item.objectID}>
<span>{item.fname}</span>
D <span>{item.address}</span>
<span>{item.age}</span>
</li>
);
})}
</ul>
);
};

6
22. What will be the output of this code?

const root = ReactDOM.createRoot(document.getElementById('root'));

function Hello() {
const element = (
return(
<div>
Hello world 1
</div>
<div>
Hello world 2
</div>
);
root.render(element);
}

A. Hello world 1
B. Hello world 2
C. Hello world 1 Hello world 2
D. Error

23. What is true about defining variables in a React application?

A. Always define variables in the global scope

B. Avoid defining variable in the global scope.
C. Always define variables in the local scope of the component
D. Define variable in the global scope only If a variable does not need anything from within the
function component’s body.

24. We aim to convert the following function to an arrow function. Choose the correct answer.

function isBigEnough(value) {
return value >= 10;
}

const isBigEnough = (value) => {

A return value >= 10;
}
const isBigEnough = (value) => {
B value >= 10;
}
const isBigEnough = (value) =>
C
return value >= 10;
const isBigEnough(value) =>
D
return value >= 10;

7
25. Let’s consider the following HTML code. What is the correct conversion to JSX?

<div class="awesome" style="border: 1px solid red">

<label for="name">Enter your name: </label>
<input type="text" id="name" />
</div>
<p>Enter your HTML here</p>

<>
<div className="awesome" style="border: 1px solid red">
<label htmlFor="name">Enter your name: </label>
A <input type="text" id="name" />
</div>
<p>Enter your HTML here</p>
</>
<div className="awesome" style={{ border: "1px solid red" }}>
<label htmlFor="name">Enter your name: </label>
B <input type="text" id="name" />
<p>Enter your HTML here</p>
</div>
<>
<div className="awesome" style={{ border: "1px solid red" }}>
<label htmlFor="name">Enter your name: </label>
C <input type="text" id="name" />
</div>
<p>Enter your HTML here</p>
</>
<div>
<div className="awesome" style="border: 1px solid red">
<label htmlFor="name">Enter your name: </label>
D <input type="text" id="name" />
</div>
<p>Enter your HTML here</p>
</div>

26. What is true about React component?

A. React component has multiple component definitions and can have multiple component
instances.
B. React component has only one component definition and can have multiple component
instances.
C. React component has only one component definition and can have only one component
instance.
D. React component has multiple component definitions and can have multiple component
instances.

8
27. How React performs the updates when a component changes the state explicitly?

A. Runs the diffing algorithm (compare DOM trees) to reconcile the changes. (2) React updates
the Virtual DOM relative to the components. (3) Updates the real DOM.
B. React updates the Real DOM relative to the components. (2) Updates the real DOM. (3) Runs
the diffing algorithm (compare DOM trees) to reconcile the changes.
C. React updates the Virtual DOM relative to the components. (2) Runs the diffing algorithm
(compare DOM trees) to reconcile the changes. (3) Updates the real DOM.
D. React updates the real DOM relative to the components. (2) Runs the diffing algorithm
(compare DOM trees) to reconcile the changes. (3) Updates the virtual DOM.

28. What is not true about component tree?

A. A child component can be a parent component.

B. The component tree must have one parent component.
C. The component tree must have one root component.
D. All components can have zero, one, or many child components.

29. Which of the following best defines the “key” prop?

A. “Key” prop is a way for React to identify a newly added item in a list.
B. It is one of the attributes in HTML.
C. “Key” prop is used to look pretty, and there is no benefit whatsoever.
D. None of these.

30. What type of event is captured by the handler function in the component function?

A. OnChange event
B. Synthetic event
C. Handler event
D. Rendering event