gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): Navbar component workshop steps (#59676)

Browse Source 
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Clarence
2025-04-16 17:42:32 +01:00
committed by GitHub
parent f4a2d8d03b
commit c6e6b1e662
2 changed files with 9 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md
+3 -9
View File
@@ -8,11 +8,11 @@ demoType: onLoad
# --description--
In this workshop, you will practice working with React functional components by building a reusable navbar.
In this workshop, you will practice working with React functional components by building a reusable navbar.
All the CSS have been provided for you so you can focus on creating the navbar.
Start by defining a `Navbar` functional component that returns a pair of round parentheses. In the next step, you will start to build out the component using JSX.
Start by defining a `Navbar` functional component. In the next step, you will start to build out the component using JSX.
Make sure to use a named export when exporting the component, as it will be imported into the HTML file.
@@ -24,7 +24,7 @@ export function multiply(a, b) {
}
```
Also, React functional components need to start with a capital letter because it is a way to differentiate from regular HTML elements.
Also, React functional components need to start with a capital letter because it is a way to differentiate from regular HTML elements.
# --hints--
@@ -34,12 +34,6 @@ You should use the `export` keyword to export the `Navbar` component.
assert.match(code, /export\s+(const|function)\s+Navbar\s*(=\s*)?\(\)\s*(=>\s*)?\{\s*/);
```
You should return an empty pair of round parentheses inside the `Navbar` function.
```js
assert.match(code, /export\s+(const|function)\s+Navbar\s*(=\s*)?\(\)\s*(=>\s*)?\{\s*return\s*\(\s*\)\s*;?\s*\}/)
```
# --seed--
## --seed-contents--
curriculum/challenges/english/25-front-end-development/workshop-reusable-mega-navbar/67457ff2dc531fbed928a0f0.md
+6 -7
View File
@@ -7,7 +7,7 @@ dashedName: step-2
# --description--
Now it is time to build out the `Navbar` component using JSX.
Now it is time to build out the `Navbar` component using JSX.
You learned in the previous lecture videos that JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript, making it easier to create and manage React components.
@@ -24,13 +24,14 @@ const App = () => {
}
```
Inside the `return`, create a `nav` element and give it a `className` attribute with the value `navbar`.
The reason why `className` is used here instead of `class` is because `class` is a reserved keyword in JavaScript. So, React uses `className` as a way to apply classes to elements.
Inside the `Navbar` component, return a `nav` element that has a `className` of `navbar`.
The reason why `className` is used here instead of `class` is because `class` is a reserved keyword in JavaScript. So, React uses `className` as a way to apply classes to elements.
# --hints--
You should create a `nav` element.
You should return a `nav` element.
```js
assert(document.querySelector('nav'));
@@ -171,10 +172,8 @@ button:hover {
```jsx
export const Navbar = () => {
return (
--fcc-editable-region--
--fcc-editable-region--
)
}
```