React Basics Quiz

To pass the quiz, you must correctly answer at least 18 of the 20 questions below. # --quizzes-- ## --quiz-- ### --question-- #### --text-- Which of the following is not a JavaScript library or framework? #### --distractors-- Angular --- React --- JQuery #### --answer-- Laravel ### --question-- #### --text-- Which of the following is NOT a method for conditional rendering in React? #### --distractors-- Ternary operators. --- Logical `&&` operator. --- `if` statements. #### --answer-- `setTimeout` ### --question-- #### --text-- What is the primary purpose of adding a `key` prop when rendering a list in React? #### --distractors-- To apply a unique CSS style to each list item. --- To serve as the text content for the element. --- To add an event listener to each specific item in the list. #### --answer-- To help React identify items for efficient rendering. ### --question-- #### --text-- Where do the project's packages and libraries get installed? #### --distractors-- The user directory of your computer. --- The `package.json` file. --- The `src` folder. #### --answer-- The `node_modules` folder. ### --question-- #### --text-- Which of the following is TRUE about JSX? #### --distractors-- JSX must always be written in separate files from JavaScript. --- JSX cannot use JavaScript expressions. --- JSX is not recommended for React applications. #### --answer-- JSX allows writing HTML within JavaScript code. ### --question-- #### --text-- Which of the following is a common problem with SPAs? #### --distractors-- Server resources are used more heavily due to constant page rendering. --- Browser caching becomes unreliable due to frequent DOM updates. --- Multiple page loads create inconsistent state management. #### --answer-- Screen readers struggle with dynamically updated content. ### --question-- #### --text-- How does a single-page application typically update the view? #### --distractors-- By making a full server reload. --- By reloading the entire HTML document. --- By using server-side rendering only. #### --answer-- By updating only the necessary parts of the page. ### --question-- #### --text-- Which of the following commands starts a React project in development mode? #### --distractors-- `npm run build` --- `npm install` --- `npm run develop` #### --answer-- `npm run dev` ### --question-- #### --text-- Which of the following is not a valid JSX element? #### --distractors-- `<div className='class'></div>` --- `<span>Hello World</span>` --- `<button>Click Me</button>` #### --answer-- `<img class='img'>` ### --question-- #### --text-- Which JavaScript array method is commonly used to transform an array of data into an array of JSX elements? #### --distractors-- `forEach()` --- `filter()` --- `reduce()` #### --answer-- `map()` ### --question-- #### --text-- Which of the following is the best practice for passing the `key` prop in React? #### --distractors-- Use array indexes in all cases. --- Randomly generate keys on each render. --- Omit the `key` prop altogether. #### --answer-- Use unique and stable IDs from the data. ### --question-- #### --text-- What command installs dependencies listed in `package.json`? #### --distractors-- `npm run` --- `npm update` --- `npm build` #### --answer-- `npm install` ### --question-- #### --text-- How would you pass a `name` prop to a child component? #### --distractors-- `<ChildComponent props="name" />` --- `<ChildComponent {props} />` --- `<ChildComponent {'John'} />` #### --answer-- `<ChildComponent name="Vignesh" />` ### --question-- #### --text-- What is the correct way to pass multiple props using the spread operator in React? #### --distractors-- `<Child person={name..., age..., city...} />`. --- `<Child spreader={...person} />`. --- `<Child spread={person} />`. #### --answer-- `<Child {...person} />`. ### --question-- #### --text-- What are the building blocks of React? #### --distractors-- Functions and Modules. --- DOM Elements and Events. --- Classes and Objects. #### --answer-- Reusable Components. ### --question-- #### --text-- What is the correct way to add an inline style in React? #### --distractors-- `style={{ color: blue }}` --- `style="color: blue"` --- `style: { color: 'blue' }` #### --answer-- `style={{ color: 'blue' }}` ### --question-- #### --text-- What is the correct way to conditionally render a React component? #### --distractors-- Using `if` statements inside JSX. --- Declaring a new component inside a `render()` method. --- Using `while` loops inside JSX. #### --answer-- Using ternary operators or logical `&&` operators within JSX. ### --question-- #### --text-- Which keyword is used to bring a component into another file? #### --distractors-- `require` --- `include` --- `add` #### --answer-- `import` ### --question-- #### --text-- What is the full meaning of SPAs? #### --distractors-- Server Page Architectures. --- Selective Page Applications. --- Static Progressive Apps. #### --answer-- Single-page Applications. ### --question-- #### --text-- Which extension of JavaScript syntax is used to describe the UI in React? #### --distractors-- TSC --- HTML+ --- ReactML #### --answer-- JSX