Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

What is JSX?: Remove ordered list from examples to prevent a markdown issue #27769

Merged
merged 7 commits into from
May 1, 2024
Merged

What is JSX?: Remove ordered list from examples to prevent a markdown issue #27769

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3f54731
Remove the list from the examples as the point of closing tags is cov…
Darknab Apr 9, 2024
63f181f
Add line breaks to keep consistent style across all examples and corr…
Darknab Apr 9, 2024
d80a76b
Remove the mention to the class in line 175 as it was removed from th…
Darknab May 1, 2024
e3a9cb9
Merge branch 'main' of github.com:Darknab/curriculum into jsx-lesson-fix
Darknab May 1, 2024
bca350a
Use markdown links instead of HTML anchors to fix lint error
Darknab May 1, 2024
eafde77
Fix the indentation in the ordered list to 3 spaces instead of 2 spaces
Darknab May 1, 2024
aaa88d5
Fix lint errors
Darknab May 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
70 changes: 27 additions & 43 deletions react/getting_started_with_react/what_is_jsx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,15 @@ If you were to take some valid HTML and copy it straight into your React compone

```jsx
function App() {
// Could replace <></> with <div></div>
return (
<>
<h1>Example h1</h1>
<h2>Example h2</h2>
</>
// Could replace <></> with <div></div>
);
}
```
```

Incorrect:

Expand Down Expand Up @@ -74,7 +74,7 @@ If you were to take some valid HTML and copy it straight into your React compone
<li></li>
</>
);
}
}
```

Incorrect:
Expand All @@ -99,11 +99,11 @@ If you were to take some valid HTML and copy it straight into your React compone
```jsx
function App() {
return (
<div className="container">
<svg>
<circle cx="25" cy="75" r="20" stroke="green" strokeWidth="2" />
</svg>
</div>
<div className="container">
<svg>
<circle cx="25" cy="75" r="20" stroke="green" strokeWidth="2" />
</svg>
</div>
);
}
```
Expand All @@ -113,11 +113,11 @@ If you were to take some valid HTML and copy it straight into your React compone
```jsx
function App() {
return (
<div class="container">
<svg>
<circle cx="25" cy="75" r="20" stroke="green" stroke-width="2" />
</svg>
</div>
<div class="container">
<svg>
<circle cx="25" cy="75" r="20" stroke="green" stroke-width="2" />
</svg>
</div>
);
}
```
Expand All @@ -128,15 +128,12 @@ Now that we've covered the Rules of JSX, we'll go through the conversion of a ch

```jsx
<h1>Test title</h1>
<ol class="test-list">
<li>List item 1
<li>List item 2
<li>List item 3
</ol>
<svg>
<circle cx="25" cy="75" r="20" stroke="green" stroke-width="2" />
<circle cx="25" cy="75" r="20" stroke="green" stroke-width="2" />
</svg>
<form><input type="text"></form>
<form>
<input type="text">
</form>
```

If you try to return this from a React component, you would get many errors, so we are going to fix that!
Expand All @@ -148,30 +145,22 @@ The first issue we get is that this would not return a single root element, so l
```jsx
<div>
<h1>Test title</h1>
<ol class="test-list">
<li>List item 1
<li>List item 2
<li>List item 3
</ol>
<svg>
<circle cx="25" cy="75" r="20" stroke="green" stroke-width="2" />
<circle cx="25" cy="75" r="20" stroke="green" stroke-width="2" />
</svg>
<form><input type="text"></form>
<form>
<input type="text">
</form>
</div>
```

You should see that another error appears now that we've fixed the initial one. This doesn't mean we created the error with our previous changes, just that React wasn't showing this one yet.

Now, onto the second issue, which is that we haven't closed all of our tags, in particular, the `<li>` and the `<input>`.
Now, onto the second issue, which is that we haven't closed the `<input>` tag.

```jsx
<div>
<h1>Test title</h1>
<ol class="test-list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<svg>
<circle cx="25" cy="75" r="20" stroke="green" stroke-width="2" />
</svg>
Expand All @@ -183,16 +172,11 @@ Now, onto the second issue, which is that we haven't closed all of our tags, in

If you are following along, at this point you will stop seeing an error being rendered on-screen, this time it will be in the console.

The last issue is that we haven't camelCased our attributes, and so are using invalid DOM properties for JSX, specifically the `class` and the `stroke-width`.
The last issue is that we haven't camelCased our attributes, and so are using invalid DOM properties for JSX, specifically the `stroke-width`.

```jsx
<div>
<h1>Test title</h1>
<ol className="test-list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<svg>
<circle cx="25" cy="75" r="20" stroke="green" strokeWidth="2" />
</svg>
Expand Down Expand Up @@ -220,10 +204,10 @@ In the following lessons, you will spend some time reading the React documentati

The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.

- <a class="knowledge-check-link" href="#what-is-jsx">What is JSX?</a>
- <a class="knowledge-check-link" href="#why-do-we-use-jsx">Why do we use JSX?</a>
- <a class="knowledge-check-link" href="#rules-of-jsx">What are the three rules of JSX?</a>
- <a class="knowledge-check-link" href="https://beta.reactjs.org/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world">How do you reference a dynamic value inside of your JSX?</a>
- [What is JSX?](#what-is-jsx)
- [Why do we use JSX?](#why-do-we-use-jsx)
- [What are the three rules of JSX?](#rules-of-jsx)
- [How do you reference a dynamic value inside of your JSX?](https://beta.reactjs.org/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world)

### Additional resources

Expand Down