Back to Subject

Unit 1: Refreshing JavaScript and ReactJS installation - Practice Quiz

INT252 — Web App Development With Reactjs 50 Questions
0 Correct 0 Wrong 50 Left
0/50

1 In ES6, which keyword is used to declare a variable that cannot be reassigned?

A. const
B. static
C. var
D. let

2 What is the scope of a variable declared using the 'let' keyword?

A. Block scope
B. Function scope
C. Global scope
D. Module scope

3 Which of the following is the correct syntax for an Arrow Function in ES6?

A. const name = () => {}
B. const name -> {}
C. function name() {}
D. name() => {}

4 How does the 'this' keyword behave differently in Arrow Functions compared to regular functions?

A. It inherits 'this' from the surrounding code (lexical scoping)
B. It always refers to the global object
C. It is undefined
D. It has its own binding to 'this'

5 Which Array method creates a new array by applying a function to every element in the calling array?

A. forEach
B. map
C. filter
D. reduce

6 What does the Array.prototype.filter() method return?

A. A new array with all elements that pass the test
B. A boolean value
C. The first element that matches the condition
D. The modified original array

7 Which method checks if all elements in an array pass a specific test?

A. filter()
B. some()
C. every()
D. check()

8 What is the primary purpose of the Array.prototype.reduce() method?

A. To reduce the array to a single value
B. To loop through the array
C. To filter the array
D. To reverse the array

9 Which ES6 feature allows you to unpack values from arrays or properties from objects into distinct variables?

A. Hoisting
B. Destructuring
C. Spread Operator
D. Rest Operator

10 What is the output of the following code: const [a, b] = [1, 2]; console.log(b);?

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

11 Which operator is indicated by three dots (...) and expands an iterable into individual elements?

A. Rest Operator
B. Spread Operator
C. Ternary Operator
D. Dot Operator

12 In the context of function arguments, what does the Rest operator (...) do?

A. Returns the remainder of a division
B. Expands an array into arguments
C. Copies the object
D. Collects multiple arguments into a single array

13 How do you define a class in ES6?

A. type MyClass {}
B. class MyClass {}
C. define MyClass {}
D. function class MyClass() {}

14 Which keyword is used to inherit a class from another class?

A. super
B. extends
C. implements
D. inherits

15 What is the purpose of the 'export default' syntax in ES6 Modules?

A. To export a single main value from a module
B. To delete a module
C. To import a module
D. To export multiple values

16 How do you import a named export 'data' from a module 'file.js'?

A. import { data } from './file.js'
B. require(data) from './file.js'
C. fetch data from './file.js'
D. import data from './file.js'

17 Which method creates a new Array instance from an array-like or iterable object?

A. Array.of()
B. Array.create()
C. Array.from()
D. Array.new()

18 What does the Array.prototype.find() method return?

A. The index of the element
B. True or False
C. A new array
D. The first element satisfying the condition

19 The Array.prototype.concat() method is used to:

A. Merge two or more arrays
B. Remove the last element of an array
C. Sort the array
D. Filter the array

20 What is a Single Page Application (SPA)?

A. A website that uses only one HTML tag
B. An app that reloads the page on every click
C. An app that dynamically rewrites the current web page with new data from the web server
D. An application that runs offline only

21 What is a major difference between SPA and MPA (Multi-Page Application)?

A. MPA reloads the page for every request, SPA does not
B. SPA uses HTML, MPA does not
C. There is no difference
D. SPA is slower than MPA

22 Which company maintains ReactJS?

A. Microsoft
B. Google
C. Facebook (Meta)
D. Twitter

23 What is the standard command to create a new React project using Create React App?

A. npx create-react-app my-app
B. npm install create-react-app
C. npm new react-app my-app
D. node create-react my-app

24 Which build tool is known for being faster than Webpack and is often used as an alternative to Create React App?

A. Gulp
B. Vite
C. Grunt
D. Babel

25 Which folder in a React project structure typically contains images, index.html, and the manifest file?

A. src
B. public
C. build
D. node_modules

26 In a standard React folder structure, where does the source code (components, styles) primarily reside?

A. root
B. src
C. dist
D. public

27 What is 'node_modules' in a React environment?

A. The folder containing all installed npm dependencies
B. The production build folder
C. Your custom components
D. The folder for unit tests

28 What does JSX stand for?

A. JavaScript XML
B. Java Syntax Extension
C. JSON Xchange
D. JavaScript Xhtml

29 Can browsers understand JSX directly?

A. Yes, if the file extension is .jsx
B. No, it must be transpiled to regular JavaScript
C. Yes, all modern browsers support it
D. Only Chrome supports it

30 In React, what is the equivalent of the HTML 'class' attribute in JSX?

A. className
B. class
C. cssClass
D. styleClass

31 What method is strictly used to render a React element into the DOM in older React versions (before React 18)?

A. ReactDOM.mount()
B. document.render()
C. React.render()
D. ReactDOM.render()

32 Which function is implicitly called when you write JSX tags?

A. document.createElement
B. React.compile
C. React.makeElement
D. React.createElement

33 What are the first three arguments of React.createElement()?

A. type, props, children
B. type, children, props
C. children, type, props
D. props, type, children

34 How do you embed a JavaScript expression inside JSX?

A. Inside curly braces { }
B. Inside double quotes " "
C. Inside square brackets [ ]
D. Inside parentheses ( )

35 Which of the following is a valid way to write an inline style in JSX?

A. style={color: "red"}
B. style={{ color: "red" }}
C. style="color: red;"
D. style={ "color": "red" }

36 Component names in React must start with:

A. An underscore
B. A dollar sign
C. An uppercase letter
D. A lowercase letter

37 What is the main advantage of using JSX over React.createElement?

A. It doesn't require JavaScript
B. It is standard HTML
C. It runs faster
D. It provides a visual structure that is easier to read and write

38 If you want to render a list of items in React, which array method is most commonly used?

A. reduce
B. forEach
C. map
D. filter

39 What acts as the entry point to a React application created with Vite?

A. server.js
B. App.js
C. main.jsx
D. index.js

40 Which file typically contains the root DOM node <div id="root"></div>?

A. package.json
B. index.html
C. index.js
D. App.js

41 In React, tags with no children (self-closing tags) must end with:

A. >
B. </>
C. />
D. ?>

42 What is the correct way to wrap multiple elements in JSX without adding an extra node to the DOM?

A. <Section>
B. <div>
C. <Fragment> or <>
D. <React.Container>

43 What is the return type of a functional component?

A. HTML
B. String
C. Boolean
D. JSX

44 Which environment is required to run the 'create-react-app' command?

A. JDK
B. Node.js
C. Apache
D. Python

45 What is the purpose of package.json in a React project?

A. It contains the React source code
B. It stores the database configuration
C. It lists project dependencies and scripts
D. It contains the HTML templates

46 What does the Array.prototype.reverse() method do?

A. Filters out the last element
B. Reverses the order of elements in place
C. Sorts the array alphabetically
D. Creates a reversed copy

47 How do you comment inside JSX?

A. <!-- comment -->
B. # comment
C. // comment
D. {/ comment /}

48 What happens if you try to render a Boolean value (true/false) in JSX?

A. It renders 'true' or 'false' as text
B. It throws an error
C. It renders nothing
D. It renders 1 or 0

49 Which attribute is used in JSX to handle the 'for' attribute of labels?

A. labelFor
B. htmlFor
C. for
D. forLabel

50 The 'forEach' array method returns:

A. undefined
B. The length of the array
C. A new array
D. The modified array
Next MCQ
Unit 2