Skip to content

Commit

Permalink
What is JSX?: Remove ordered list from examples to prevent a markdown…
Browse files Browse the repository at this point in the history 
… issue (#27769)

* Remove the list from the examples as the point of closing tags is covered elsewhere.
Adjust the text accordingly

* Add line breaks to keep consistent style across all examples and correct the indentation of the <circle> elements

* Remove the mention to the class in line 175 as it was removed from the example.
Move the comment from line 45 to line 40.
Correct indentation.

* Use markdown links instead of HTML anchors to fix lint error

* Fix the indentation in the ordered list to 3 spaces instead of 2 spaces

* Fix lint errors
  • Loading branch information
@Darknab
Darknab committed May 1, 2024
1 parent 8bdde12 commit 73526f2
Showing 1 changed file with 27 additions and 43 deletions.
70 changes: 27 additions & 43 deletions react/getting_started_with_react/what_is_jsx.md
View file
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

0 comments on commit 73526f2

Please sign in to comment.