diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 2c7a599d9d9..8c74b934281 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -3455,10 +3455,10 @@ "Open up this page, to review all of the concepts taught including routing, forms, state management, prop drilling, data fetching and more." ] }, - "quiz-advanced-react": { - "title": "Advanced React Quiz", + "quiz-react-forms-data-fetching-and-routing": { + "title": "React Forms, Data Fetching and Routing Quiz", "intro": [ - "Test what you've learned about Advanced React with this quiz." + "Test what you've learned about routing, forms, and data fetching with this quiz." ] }, "zdsj": { "title": "284", "intro": [] }, diff --git a/client/src/pages/learn/full-stack-developer/quiz-advanced-react/index.md b/client/src/pages/learn/full-stack-developer/quiz-advanced-react/index.md deleted file mode 100644 index 368bc900c4f..00000000000 --- a/client/src/pages/learn/full-stack-developer/quiz-advanced-react/index.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Introduction to the Advanced React Quiz -block: quiz-advanced-react -superBlock: full-stack-developer ---- - -## Introduction to the Advanced React Quiz - -Test what you've learned in this quiz on Advanced React. diff --git a/client/src/pages/learn/full-stack-developer/quiz-react-forms-data-fetching-and-routing/index.md b/client/src/pages/learn/full-stack-developer/quiz-react-forms-data-fetching-and-routing/index.md new file mode 100644 index 00000000000..725a7763377 --- /dev/null +++ b/client/src/pages/learn/full-stack-developer/quiz-react-forms-data-fetching-and-routing/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the React Forms, Data Fetching and Routing Quiz +block: quiz-react-forms-data-fetching-and-routing +superBlock: full-stack-developer +--- + +## Introduction to the React Forms, Data Fetching and Routing Quiz + +Test what you've learned about routing, forms, and data fetching with this quiz. diff --git a/curriculum/challenges/_meta/quiz-advanced-react/meta.json b/curriculum/challenges/_meta/quiz-advanced-react/meta.json deleted file mode 100644 index be16ea7344b..00000000000 --- a/curriculum/challenges/_meta/quiz-advanced-react/meta.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "Advanced React Quiz", - "blockType": "quiz", - "blockLayout": "link", - "isUpcomingChange": true, - "dashedName": "quiz-advanced-react", - "superBlock": "full-stack-developer", - "challengeOrder": [ - { "id": "66f1ad049d7a6ac0886cc2ba", "title": "Advanced React Quiz" } - ], - "helpCategory": "JavaScript" -} diff --git a/curriculum/challenges/_meta/quiz-react-forms-data-fetching-and-routing/meta.json b/curriculum/challenges/_meta/quiz-react-forms-data-fetching-and-routing/meta.json new file mode 100644 index 00000000000..d94917b07e9 --- /dev/null +++ b/curriculum/challenges/_meta/quiz-react-forms-data-fetching-and-routing/meta.json @@ -0,0 +1,12 @@ +{ + "name": "React Forms, Data Fetching and Routing Quiz", + "blockType": "quiz", + "blockLayout": "link", + "isUpcomingChange": true, + "dashedName": "quiz-react-forms-data-fetching-and-routing", + "superBlock": "full-stack-developer", + "challengeOrder": [ + { "id": "66f1ad049d7a6ac0886cc2ba", "title": "React Forms, Data Fetching and Routing Quiz" } + ], + "helpCategory": "JavaScript" +} diff --git a/curriculum/challenges/english/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md b/curriculum/challenges/english/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md deleted file mode 100644 index bdfcf72a393..00000000000 --- a/curriculum/challenges/english/25-front-end-development/quiz-advanced-react/66f1ad049d7a6ac0886cc2ba.md +++ /dev/null @@ -1,455 +0,0 @@ ---- -id: 66f1ad049d7a6ac0886cc2ba -title: Advanced React Quiz -challengeType: 8 -dashedName: quiz-advanced-react ---- - -# --description-- - -To pass the quiz, you must correctly answer at least 18 of the 20 questions below. - -# --quizzes-- - -## --quiz-- - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - -### --question-- - -#### --text-- - -Placeholder question. - -#### --distractors-- - -Placeholder distractor 1. - ---- - -Placeholder distractor 2. - ---- - -Placeholder distractor 3. - -#### --answer-- - -Placeholder answer. - diff --git a/curriculum/challenges/english/25-front-end-development/quiz-react-forms-data-fetching-and-routing/66f1ad049d7a6ac0886cc2ba.md b/curriculum/challenges/english/25-front-end-development/quiz-react-forms-data-fetching-and-routing/66f1ad049d7a6ac0886cc2ba.md new file mode 100644 index 00000000000..e38f7032434 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/quiz-react-forms-data-fetching-and-routing/66f1ad049d7a6ac0886cc2ba.md @@ -0,0 +1,555 @@ +--- +id: 66f1ad049d7a6ac0886cc2ba +title: React Forms, Data Fetching and Routing Quiz +challengeType: 8 +dashedName: quiz-react-forms-data-fetching-and-routing +--- + +# --description-- + +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 an example of a controlled input? + +#### --distractors-- + +```jsx + +``` + +--- + +```jsx + +``` + +--- + +```jsx + +``` + +#### --answer-- + +```jsx + +``` + +### --question-- + +#### --text-- + +Which of the following is an example of an uncontrolled input? + +#### --distractors-- + +```jsx + +``` + +--- + +```jsx + +``` + +--- + +```jsx + +``` + +#### --answer-- + +```jsx + +``` + +### --question-- + +#### --text-- + +Which of the following is NOT a commonly used way to fetch data in React? + +#### --distractors-- + +SWR + +--- + +Axios + +--- + +`Fetch` API + +#### --answer-- + +Redux + +### --question-- + +#### --text-- + +Which of the following hooks is commonly associated with fetching data in React? + +#### --distractors-- + +`useParams` + +--- + +`useContext` + +--- + +`useReducer` + +#### --answer-- + +`useEffect` + +### --question-- + +#### --text-- + +What is memoization? + +#### --distractors-- + +A common algorithm used to find the shortest path between two vertices in a graph. + +--- + +A special technique used to optimize the performance for all controlled and uncontrolled inputs. + +--- + +A divide and conquer algorithm used to recursively sort sub arrays and merge them together. + +#### --answer-- + +An optimization technique in which the result of expensive function calls are cached (remembered) based on specific arguments. + +### --question-- + +#### --text-- + +Which of the following hooks is used to memoize computed values? + +#### --distractors-- + +`useParams` + +--- + +`useEffect` + +--- + +`useState` + +#### --answer-- + +`useMemo` + +### --question-- + +#### --text-- + +Which of the following uses the correct hook to memoize function references? + +#### --distractors-- + +```js +useContext(() => { + // code goes here +}, [dependency]); +``` + +--- + +```js +useParams(() => { + // code goes here +}, [dependency]); +``` + +--- + +```js +useState(() => { + // code goes here +}, [dependency]); +``` + +#### --answer-- + +```js +useCallback(() => { + // code goes here +}, [dependency]); +``` + +### --question-- + +#### --text-- + +What is a dependency? + +#### --distractors-- + +A dependency is a commonly used testing library used in React applications. + +--- + +A dependency is a type of React component that only runs on the server. + +--- + +A dependency is a special compiler used in React applications to compile the React code into JavaScript. + +#### --answer-- + +A dependency is where one component or module in an application relies on another to function properly. + +### --question-- + +#### --text-- + +What is a package manager? + +#### --distractors-- + +A tool used to update third-party packages installed in applications. + +--- + +A tool used to manage packages solely created within a project. + +--- + +A tool used to move dependencies out of the `node_modules` folder and into a special config folder. + +#### --answer-- + +A tool used for installation, updates and removal of dependencies. + +### --question-- + +#### --text-- + +Which of the following is NOT a commonly used package manager in the JavaScript ecosystem? + +#### --distractors-- + +pnpm + +--- + +Yarn + +--- + +npm + +#### --answer-- + +Jest + +### --question-- + +#### --text-- + +Which of the following is a key configuration file that contains metadata about your project? + +#### --distractors-- + +`config.json` + +--- + +`lint.json` + +--- + +`node_modules.json` + +#### --answer-- + +`package.json` + +### --question-- + +#### --text-- + +Which of the following is a commonly used React framework? + +#### --distractors-- + +Django + +--- + +Webpack + +--- + +Gulp + +#### --answer-- + +Remix + +### --question-- + +#### --text-- + +Which of the following is the correct way to add routes to your React application using React Router? + +#### --distractors-- + +```jsx + + + + } /> + + + +``` + +--- + +```jsx + + + + } /> + + + +``` + +--- + +```jsx + + + + } /> + + + +``` + +#### --answer-- + +```jsx + + + + } /> + + + +``` + +### --question-- + +#### --text-- + +Which of the following is the correct way to create a dynamic route in React Router? + +#### --distractors-- + +```jsx +} /> +``` + +--- + +```jsx +} /> +``` + +--- + +```jsx +} /> +``` + +#### --answer-- + +```jsx +} /> +``` + +### --question-- + +#### --text-- + +Which of the following hooks is used to access the dynamic parameters from a URL path? + +#### --distractors-- + +`useParameterized` + +--- + +`usePar` + +--- + +`useParameters` + +#### --answer-- + +`useParams` + +### --question-- + +#### --text-- + +Which of the following is the correct way to create a custom request handler in Next.js? + +#### --distractors-- + +```js +export async function SERVE() { + const res = await fetch("https://example-api.com"); + const data = await res.json(); + + return Response.json({ data }); +} +``` + +--- + +```js +export async function FETCH() { + const res = await fetch("https://example-api.com"); + const data = await res.json(); + + return Response.json({ data }); +} +``` + +--- + +```js +export async function SET() { + const res = await fetch("https://example-api.com"); + const data = await res.json(); + + return Response.json({ data }); +} +``` + +#### --answer-- + +```js +export async function GET() { + const res = await fetch("https://example-api.com"); + const data = await res.json(); + + return Response.json({ data }); +} +``` + +### --question-- + +#### --text-- + +What is prop drilling? + +#### --distractors-- + +The process of creating a reducer that specifies how state should change in response to particular props used. + +--- + +The process of passing props from child component up to the parent component. + +--- + +The process of creating a context provider for a React application and using that to send props from parent to child components. + +#### --answer-- + +The process of passing props from a parent component to deeply nested child components, even when some of the child components don't need the props. + +### --question-- + +#### --text-- + +Which of the following is NOT a commonly used state management solution for React applications? + +#### --distractors-- + +Context API + +--- + +Zustand + +--- + +Redux + +#### --answer-- + +Spring + +### --question-- + +#### --text-- + +What are the React Developer Tools used for? + +#### --distractors-- + +These tools are used to only check for accessibility issues in React applications. + +--- + +These tools are used to add additional tests for React components. + +--- + +These tools are used to memoize all React components inside the application. + +#### --answer-- + +These tools are used to inspect React components and identify performance issues. + +### --question-- + +#### --text-- + +What are React Server Components? + +#### --distractors-- + +These are components that manage context exclusively on the server. + +--- + +These are memoized components that render exclusively on the server. + +--- + +These are components that manage state exclusively on the server. + +#### --answer-- + +These are components that render exclusively on the server. + diff --git a/curriculum/superblock-structure/full-stack.json b/curriculum/superblock-structure/full-stack.json index 0f20135aa29..1904d6abb7f 100644 --- a/curriculum/superblock-structure/full-stack.json +++ b/curriculum/superblock-structure/full-stack.json @@ -586,7 +586,7 @@ "blocks": [ { "dashedName": "quiz-react-state-and-hooks" }, { "dashedName": "review-react-forms-data-fetching-and-routing" }, - { "dashedName": "quiz-advanced-react" } + { "dashedName": "quiz-react-forms-data-fetching-and-routing" } ] }, {