` element with the text `"Hello, John"` to the page. But take a closer look at the syntax here. When we use the component, it ends with a forward slash and then the greater than symbol.
+
+When working with JSX, all tags and uses of components need to be explicitly closed. So if the component or tag does not have any children, then you need to explicitly close it like shown here
+
+```js
+![]()
+Hello {name}
+
Nice to meet you.
+} +``` + +We are trying to add another sentence of `"Nice to meet you"` but it is not rendering on the page correctly. + +There seems to be an error message instead. The error message says `"Adjacent JSX elements must be wrapped in an enclosing tag."` + +The reason why you are getting that error message is because multiple sibling elements need to be wrapped in a parent element. While you could wrap the h1 and p elements in a single div, there is another way to silence the error. + +React `Hello {name}
+Nice to meet you.
+Hello {name}
+Nice to meet you.
+ + ); +} +``` + # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md index 158d5b4c12c..1a8d82e1859 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md @@ -1,14 +1,63 @@ --- id: 6734e88cc46e6dc679420040 title: What is Vite and How Can It Be Used to Setup a New React Project? -challengeType: 11 -videoId: nVAaxZ34khk +challengeType: 19 +# videoId: nVAaxZ34khk dashedName: what-is-vite-and-how-can-it-be-used-to-setup-a-new-react-project --- # --description-- -Watch the lecture video and answer the questions below. +The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: + +Unlike working with smaller vanilla HTML, CSS, and JavaScript projects, starting a new React project includes a few more steps to ensure that everything runs correctly. Instead of trying to setup of all of the necessary configurations by yourself, there are tools that will do that for you. + +One of the most popular tools for setting up projects is Vite. Vite, which means "fast" in French, is a build tool that aims to provide a faster development experience for modern web projects. Vite can be used with React, as well as with other libraries and frameworks like Vue or Svelte. You can even use it with vanilla JavaScript projects. + +To create a new project with Vite, you will need to use the command line. If you are using Windows machine, then you can use the Command Prompt or Windows PowerShell. If you are using a Mac, then you can use the Terminal app. + +Once you have the command line open, you can use the following command: + +```bash +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. + +You can then open up the new project and see the React boilerplate code that Vite has provided for you. + +The great thing about Vite is that it will only provide the files that are absolutely necessary to get started with your React project. + +To actually run the project as is, you will need to install the dependencies using the following commands in the command line: + +```bash + cd my-react-app + npm install +``` + +The `cd my-react-app` command ensures that you change to the correct directory where your project is located. + +The `npm install` command is used to install the dependencies needed to properly run your React project. Dependencies are libraries or packages that your React project requires in order to function correctly, such as React itself, ReactDOM, or other third-party packages that provide additional functionality. + +Running `npm install` will read the `package.json` file in your project directory and install all the dependencies listed there, allowing you to build and run your React app without missing any necessary components. + +The `package.json` file is a key configuration file in projects that contains metadata about your project, including its name, version, and dependencies. It also defines scripts, licensing information, and other settings that help manage the project and its dependencies. + +Once the dependencies are installed, you should notice a new folder in your project called `node_modules`. + +The `node_modules` folder is where all the packages and libraries required by your project are stored. This folder contains the actual code for the dependencies listed in your package.json file, including both your project's direct dependencies and any dependencies of those dependencies. + +To run your project, run the `npm run dev` command and open up a new browser tab at `http://localhost:5173/`. + +You should see the starter template that Vite has provided for you. + +If you need to stop the local server, press `CTRL + C` in the command line. + +To actually see the code for this starter template, you can go into your project inside the src folder and you should see the `App.jsx` file. + +From there you can start to modify the file, save your changes and see the new changes display in the browser. + +And with that, you're ready to begin building your React application! # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md index fc6c67b656f..7a3f68afd1d 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md @@ -1,14 +1,106 @@ --- id: 674ba6876f7ada867135bb95 title: How Can You Import and Export Components in React? -challengeType: 11 -videoId: nVAaxZ34khk +challengeType: 19 +# videoId: nVAaxZ34khk dashedName: how-can-you-import-and-export-components-in-react --- # --description-- -Watch the lecture video and answer the questions below. +The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: + +In this lecture, we will take a look at how to import and export components in React. + +In this example, we have a `Cat` component that belongs in a file called `Cat.jsx`. For the file extension, we are using the jsx file extension because this file is mainly working with JSX. + +```js +function Cat() { + return ( +
+ 
+
+ );
+}
+```
+
+This `Cat` component returns a JSX markup with a title and image for a cat called Mr.Whiskers.
+
+If we want to use our `Cat` component in another file, we need to first export it like this:
+
+```js
+function Cat() {
+ return (
+ Mr. Whiskers
+
+
+
+
+ );
+}
+
+export default Cat;
+```
+
+We are using the default keyword because this will be the default export from the module. You can also choose to export the component on the same line as the component definition like this:
+
+```js
+export default function Cat() {
+ return (
+ Mr. Whiskers
+
+
+
+
+ );
+}
+```
+
+You can choose to import child components in other parent component files. Or import them in the root component file. For this example, we will import the Cat component inside the root component file.
+
+Every React project will have a top-level component, typically called `App.jsx`. This file is usually located in the src directory of your project. You’ll learn more about common project layouts in a future lecture video.
+
+```js
+export default function App() {
+ return (
+ // return component here
+ );
+}
+```
+
+To use the `Cat` component inside the root `App` component, you will need to import it like this:
+
+```js
+import Cat from "./Cat";
+
+export default function App() {
+ return (
+ // return component here
+ );
+}
+```
+
+Now, you can return the `Cat` component inside the `App` component like this:
+
+```js
+import Cat from "./Cat";
+
+export default function App() {
+ return (
+ Mr. Whiskers
+
+ Hi {developerName}!
; +} +``` + +We can choose to nest this component inside another parent component or the root component like this: + +```js +function App() { + returnHi {developerName}!
; +} +``` + +While this code will run fine and display the result of Hi Jessica! on the screen, it is not that flexible of a component. + +What if we wanted to display a different name like Naomi, Tom, or Oliver? + +This is where React props comes in. + +Props, which is short for properties, is the way for Parent components to pass data down to the child component. + +Props can be of any type: strings, numbers, booleans, objects, or arrays. + +Let’s update our example from earlier to now accept a `name` prop: + +```js +function App() { + returnHi {props.name}!
; +} +``` + +For the child component called `Greeting` we are now using `props.name` instead of hardcoding the name `"Jessica"`. We are also logging props to the console which is showing as an object. + +Then inside of the parent App component, we are passing the value to the name prop so it can be passed down to the child. + +The result will be the same on the screen like earlier, but now we have created a more flexible component. + +Now we have the ability to reuse the child component several times and pass in different names each time. + +```js +function App() { + return ( + <> +Hi {name}!
; +} +``` + +This code achieves the same result but makes it clearer which props the component is expecting to receive. + +Sometimes, you can have a lot of properties that you have to pass as props. Instead of passing them one by one, you can use the spread operator (`...`), after converting them to an object. + +Here is an example of a new child component called `DeveloperCard`: + +```js +function DeveloperCard({ name, age, country }) { + return ( +
+
+ );
+}
+```
+
+This `DeveloperCard` component accepts three props: `name`, `age`, and `country`.
+
+In the parent `App` component, we can use the spread syntax to pass all the properties from an object as individual props to the child component.
+
+```js
+function App() {
+ const developerObj = {
+ name: "Alice",
+ age: 30,
+ country: "USA",
+ };
+
+ return (
+ Developer: {name}
+Age: {age}
+Country: {country}
+
+
+ );
+}
+```
+
+This is particularly useful when working with arrays of objects and passing multiple sets of properties to child components. For example, you might have a list of developers where each object in the array has the same structure but represents a different person.
+
+You will learn more about how to render lists in React in future lectures.
+
+Using props in React makes your components more flexible and reusable, allowing you to build more complex UIs. However, it's important to note that props are immutable, meaning they cannot be changed once passed to a component. If you need to handle user input and modify data, you should use state instead. You'll learn more about managing state in future lectures.
# --questions--
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md
index 59701e4b40e..0ec8baed8e8 100644
--- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md
+++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md
@@ -1,14 +1,71 @@
---
id: 673500abfe36cd015b67b1b7
title: How Does Conditional Rendering Work in React Components?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+# videoId: nVAaxZ34khk
dashedName: how-does-conditional-rendering-work-in-react-components
---
# --description--
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Conditional rendering in React allows you to create dynamic user interfaces. It is used to show different content based on certain conditions or states within your application.
+
+The most common approaches of using Conditional rendering includes using if statements, the ternary operator, and `logical AND (&&)` operator.
+
+The simplest form of conditional rendering uses an if statement.
+
+Here's an example:
+
+```js
+function Greeting({ isLoggedIn }) {
+ if (isLoggedIn) {
+ return Welcome back!
; + } + returnPlease sign in
; +} +``` + +In this example, the `Greeting` component checks the `isLoggedIn` prop. If it's true, it returns a welcome message, otherwise, it prompts the user to sign in. + +Here is an example using the Greeting component inside of the parent App component. + +```js +function App() { + return ( +
+
+ );
+}
+```
+
+For simpler conditions, the ternary operator (?) is often used directly within JSX. It allows for inline conditional rendering, which can make your code more concise:
+
+```js
+function Greeting({ isLoggedIn }) {
+ return {isLoggedIn ? "Welcome back!" : "Please sign in."}
; +} +``` + +This code achieves the same result as the previous example but in a more compact form. The ternary operator checks isLoggedIn and renders the appropriate message. + +Another common pattern for conditional rendering is using the `logical AND (&&)` operator. This is particularly useful when you want to render something or nothing based on a condition: + +```js +function Notification({ message }) { + return ( +
+ {message &&
+ );
+}
+```
+
+In this example, the paragraph element with the message is only rendered if the `message` prop is truthy. If `message` is falsy (meaning it is an empty string, `null`, or `undefined`), nothing is rendered to the screen.
+
+By mastering these techniques of conditional rendering, you can build more interactive and user-friendly applications that adapt to changing data and user interactions.
# --questions--
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md
index 957731e7864..fdaf553686e 100644
--- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md
+++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md
@@ -1,14 +1,80 @@
---
id: 673500b41af8500191febedc
title: How Do You Render Lists in React?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+# videoId: nVAaxZ34khk
dashedName: how-do-you-render-lists-in-react
---
# --description--
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Rendering lists is a fundamental task in React web apps, and is used for displaying data to users. In React, the `map()` method is used to transform an array of data into an array of JSX elements that can be rendered in the UI.
+
+Here is an example of a component called `FruitList` that displays a list of fruits:
+
+```js
+function FruitList() {
+ const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
+ return (
+ {message}
} +-
+ {fruits.map(fruit =>
- {fruit} )} +
- ` parent tags.
+
+However, when rendering lists in React, it is important not to forget the key prop to each element in the list. The key must always be unique and it helps React identify which items have changed, been added, or been removed, which is essential for efficient rendering and updating the list.
+
+Let's modify our example to include keys:
+
+```js
+function FruitList() {
+ const fruits = ["Apple", "Banana", "Cherry", "Date"];
+ return (
+
- {fruit} + ))} +
-
+ {fruits.map((fruit, index) => (
+
+ {users.map((user) => (
+
+ );
+}
+```
+
+In this example, we're creating a more complex JSX structure for each user, displaying both their name and email. We're using the user's id as the key, which is a good practice.
+
+In conclusion, rendering lists in React involves converting arrays of data into JSX elements, typically using the `map()` function.
+
+Always remember to provide a unique key for each list item to help React manage the updating and rendering roles.
+
+With these techniques, you can create flexible, efficient, and dynamic lists in your React applications.
# --questions--
diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md
index 42fc4bdbd40..5996cfba566 100644
--- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md
+++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md
@@ -1,14 +1,81 @@
---
id: 673500bfe1f41601c1ddb1a2
title: How Do Inline Styles Work in React?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+# videoId: nVAaxZ34khk
dashedName: how-do-inline-styles-work-in-react
---
# --description--
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+In React, inline styles are used to apply CSS styles directly to React elements within your JSX code instead of defining them in separate CSS files.
+
+React's approach to inline styles involves using JavaScript objects to define styles, rather than traditional CSS strings. This means that instead of writing styles as you would in a CSS file, you create a JavaScript object where the keys are camelCased versions of CSS property names, and the values are the strings of CSS values.
+
+Here is an example of how you can use inline styles for a `Button` component:
+
+```js
+function Button({ buttonText }) {
+ const defaultStyles = {
+ backgroundColor: "#007BFF",
+ color: "white",
+ border: "none",
+ borderRadius: "4px",
+ padding: "10px 20px",
+ fontSize: "16px",
+ fontWeight: "bold",
+ cursor: "pointer",
+ transition: "background-color 0.3s ease",
+ };
+
+ return ;
+}
+```
+
+In this example, we define a style object called defaultStyles. We then apply these styles to a button element using the style attribute. React takes care of applying these styles to the element when it renders.
+
+You can also choose to pass in an object directly to the style attribute. Here is what a revised example would look like:
+
+```js
+function Button({ buttonText }) {
+ return (
+
+ );
+}
+```
+
+Sometimes you might want to pass in an object directly if there are only a few properties like shown here. Otherwise, passing in a name to an object would be better like in the first example.
+
+It's important to note that while CSS property names are typically written in kebab-case (like font-size), in React's inline styles, we use camelCase (like fontSize). This is because the style object is a JavaScript object, and kebab-case names are not valid as object keys in JavaScript without using quotes.
+
+A great advantage of inline styles in React is that they support dynamic styling based on a component state or props. For example:
+
+```js
+function DynamicButton({ isActive }) {
+ const buttonStyles = {
+ backgroundColor: isActive ? "green" : "red",
+ color: "white",
+ padding: "10px 15px",
+ border: "none",
+ cursor: "pointer",
+ };
+
+ return ;
+}
+```
+
+In this example, the button's background color changes based on the isActive prop. This kind of dynamic styling can be powerful for creating interactive and responsive user interfaces.
+
+In summary, inline styles in React provide a powerful way to apply and manipulate styles directly within your components. They use JavaScript objects instead of CSS strings, require camelCased property names, and can easily incorporate dynamic values. They're an essential tool in a React developer's toolkit, especially for creating highly customized and interactive user interfaces.
# --questions--
+
+ ))}
+ {user.name}
+{user.email}
+