From 82713d5ae87181940b35fa4dfa78d9ef72d1c481 Mon Sep 17 00:00:00 2001 From: Kolade Chris <65571316+Ksound22@users.noreply.github.com> Date: Thu, 6 Feb 2025 22:20:24 +0100 Subject: [PATCH] refactor(curriculum): React basics quiz and review improvements (#58588) Co-authored-by: Oliver Eyton-Williams Co-authored-by: Farhan Hasin Chowdhury Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> --- .../66f1a2009e65c9a40a26d51e.md | 104 +++++++++--------- .../67487e141bb6a7140a352e12.md | 42 ++++++- 2 files changed, 89 insertions(+), 57 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md b/curriculum/challenges/english/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md index 25b1ae5dddd..c3742ed0964 100644 --- a/curriculum/challenges/english/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md +++ b/curriculum/challenges/english/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md @@ -17,23 +17,23 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo #### --text-- -How do you handle a click event in a React component? +Which of the following is not a JavaScript library or framework? #### --distractors-- -`` +Angular --- -`` +React --- -`` +JQuery #### --answer-- -`` +Laravel ### --question-- @@ -51,7 +51,7 @@ Logical `&&` operator. --- -`switch` statements. +`if` statements. #### --answer-- @@ -61,45 +61,45 @@ Logical `&&` operator. #### --text-- -What does `` do? +Which command is used to bootstrap a React project with Vite? #### --distractors-- -Wraps components with adding extra DOM nodes. +`npm create vite@latest my-react-app react` --- -Creates a new HTML element. +`npx create vite@latest my-react-app -- --template react` --- -Deletes an existing element. +`npm install vite@latest my-react-app -- --template react` #### --answer-- -Wraps components without adding extra DOM nodes. +`npm create vite@latest my-react-app -- --template react` ### --question-- #### --text-- -What is the purpose of React Context? +Where do the project's packages and libraries get installed? #### --distractors-- -Managing component styles. +The user directory of your computer. --- -Passing data through the component. +The `package.json` file. --- -Controlling component re-renders. +The `src` folder. #### --answer-- -Passing data through the component tree without props. +The `node_modules` folder. ### --question-- @@ -127,23 +127,23 @@ JSX allows writing HTML within JavaScript code. #### --text-- -What is a con of using Vanilla JS instead of a framework? +Which of the following is a common problem with SPAs? #### --distractors-- -Automatic state management. +Server resources are used more heavily due to constant page rendering. --- -Built-in routing capabilities. +Browser caching becomes unreliable due to frequent DOM updates. --- -Declarative UI rendering. +Multiple page loads create inconsistent state management. #### --answer-- -Increased verbosity and manual DOM manipulation. +Screen readers struggle with dynamically updated content. ### --question-- @@ -171,23 +171,23 @@ By updating only the necessary parts of the page. #### --text-- -What is the correct way to create a functional React component? +Which of the following commands starts a React project in development mode? #### --distractors-- -Using classes only. +`npm run build` --- -Using the `React.Component` only. +`npm install` --- -Using JavaScript constructors. +`npm run develop` #### --answer-- -Using the `function` keyword or arrow functions. +`npm run dev` ### --question-- @@ -303,45 +303,45 @@ How would you pass a `name` prop to a child component? #### --text-- -What is the correct way to conditionally render a component? +What is the correct way to pass multiple props using the spread operator in React? #### --distractors-- -`` +``. --- -`isLoggedIn` +``. --- -`` +``. #### --answer-- -`{isLoggedIn ? : }` +``. ### --question-- #### --text-- -In a child component, how do you access the `name` prop passed from a parent component? +What are the building blocks of React? #### --distractors-- -`this.props.name` +Functions and Modules. --- -`this.name` +DOM Elements and Events. --- -`{props}.name` +Classes and Objects. #### --answer-- -`props.name` +Reusable Components. ### --question-- @@ -391,66 +391,64 @@ Using ternary operators or logical `&&` operators within JSX. #### --text-- -What causes a React component to re-render? +Which keyword is used to bring a component into another file? #### --distractors-- -Directly modifying the state variable. +`require` --- -Calling the `render()` method. +`include` --- -Recompiling the project. +`add` #### --answer-- -Changing the state using `setState`. +`import` ### --question-- #### --text-- -How would you specify a required `name` prop using `PropTypes`? +What is the full meaning of SPAs? #### --distractors-- -`name: PropTypes.bool` +Server Page Architectures. --- -`name: PropTypes.array.isRequired` +Selective Page Applications. --- -`name: PropTypes.string` +Static Progressive Apps. #### --answer-- -`name: PropTypes.string.isRequired` +Single-page Applications. ### --question-- #### --text-- -What file is used to define project dependencies in a React/Node.js project? +Which extension of JavaScript syntax is used to describe the UI in React? #### --distractors-- -`package.lock.json` +TSC --- -`index.html` +HTML+ --- -`webpack.config.js` +ReactML #### --answer-- -`package.json` - - +JSX diff --git a/curriculum/challenges/english/25-front-end-development/review-react-basics/67487e141bb6a7140a352e12.md b/curriculum/challenges/english/25-front-end-development/review-react-basics/67487e141bb6a7140a352e12.md index 82d421d9b6f..fa01eb98e6b 100644 --- a/curriculum/challenges/english/25-front-end-development/review-react-basics/67487e141bb6a7140a352e12.md +++ b/curriculum/challenges/english/25-front-end-development/review-react-basics/67487e141bb6a7140a352e12.md @@ -13,7 +13,7 @@ dashedName: review-react-basics - Libraries are generally more focused on providing solutions to specific tasks, such as manipulating the DOM, handling events, or managing AJAX requests. - A couple of examples of JavaScript libraries are jQuery and React. - Frameworks, on the other hand, provide a more defined structure for building applications. They often come with a set of rules and conventions that developers need to follow. -- Examples of frameworks include Angular and Next.js. +- Examples of frameworks include Angular and Next.js, a meta framework for React. - **Single page applications** (SPAs) are web applications that load a single HTML page and dynamically update that page as the user interacts with the application without reloading the entire page. - SPAs use JavaScript to manage the application's state and render content. This is often done using frameworks which provide great tools for building complex user interfaces. - Some issues surrounding SPAs include: @@ -32,7 +32,8 @@ dashedName: review-react-basics - Components are the building blocks of React applications that allow developers to break down complex user interfaces into smaller, manageable pieces. - The UI is described using JSX, an extension of JavaScript's syntax, that allows developers to write HTML-like code within JavaScript. -- Components are basically JS functions or classes that return a piece of UI. +- Components are basically JS functions or classes that return a piece of UI. + Here is an example of a simple React component that renders a greeting message: ```jsx @@ -98,13 +99,13 @@ export default function City() { npm create vite@latest my-react-app -- --template react ``` -This command creates a new React project named `my-react-app` using Vite's React template. +This command creates a new React project named `my-react-app` using Vite's React template. In the project directory, you will see a `package.json` file with the project dependencies and commands listed in it. - To run the project, navigate to the project directory and run the following commands: ```bash cd my-react-app # path to the project directory -npm install +npm install # installs the dependencies listed in the package.json file ``` - Once the dependencies are installed, you should notice a new folder in your project called `node_modules`. @@ -184,6 +185,17 @@ function Greeting({ user }) { In the code above, the `h1` element is only rendered if the user object is truthy. +You can also use a direct `if` statement this way: + +```js +function Greeting({ isLoggedIn }) { + if (isLoggedIn) { + return

Welcome back!

; + } + return

Please sign in

; +} +``` + ## Rendering lists in React - Rendering lists in React is a common task when building user interfaces. @@ -209,8 +221,25 @@ function NameList({ names }) { - Inline styles in React allow you to apply CSS styles directly to JSX elements using JavaScript objects. - To apply inline styles in React, you can use the style attribute on JSX elements. The style attribute takes an object where the keys are CSS properties in camelCase and the values are the corresponding values. Here's an example: +```js +function Greeting() { + return ( +

+ Hello, world! +

+ ); +} + +export default Greeting; +``` + +You can also extract the styles into a separate object and reference it in the `style` attribute this way: + ```jsx function Greeting() { + const styles = { color: 'blue', fontSize: '24px', @@ -219,12 +248,15 @@ function Greeting() { return

Hello, world!

; } + +export default Greeting; ``` - Inline styles support dynamic styling by allowing you to conditionally apply styles based on props or state. Here is an example of how you can conditionally apply styles based on a prop: ```jsx function Greeting({ isImportant }) { + const styles = { color: isImportant ? 'red' : 'black', fontSize: isImportant ? '24px' : '16px' @@ -232,6 +264,8 @@ function Greeting({ isImportant }) { return

Hello, world!

; } + +export default Greeting; ``` - In the code above, the `color` and `fontSize` styles are conditionally set based on the `isImportant` prop.