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 2 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
34 changes: 9 additions & 25 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 @@ -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 @@ -188,11 +177,6 @@ The last issue is that we haven't camelCased our attributes, and so are using in
```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