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 5 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
176 changes: 80 additions & 96 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 @@ -31,112 +31,109 @@ If you were to take some valid HTML and copy it straight into your React compone

1. Return a single root element.

If you wish to return multiple elements in a component, you can do so by wrapping them in a parent tag. This can be a `<div>`, or, if you don't want the elements to have a container, you could use a [React fragment](https://react.dev/reference/react/Fragment), like so: `<>Children</>`

Correct:

```jsx
function App() {
return (
<>
<h1>Example h1</h1>
<h2>Example h2</h2>
</>
// Could replace <></> with <div></div>
);
}
If you wish to return multiple elements in a component, you can do so by wrapping them in a parent tag. This can be a `<div>`, or, if you don't want the elements to have a container, you could use a [React fragment](https://react.dev/reference/react/Fragment), like so: `<>Children</>`

Correct:

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

Incorrect:
Incorrect:

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

1. Close all tags.

In HTML, many tags are self-closing and self-wrapping. In JSX however, we must explicitly close and wrap these tags.
In HTML, many tags are self-closing and self-wrapping. In JSX however, we must explicitly close and wrap these tags.

`<input>` would become `<input />`, and `<li>` would become `<li></li>`
`<input>` would become `<input />`, and `<li>` would become `<li></li>`

Correct:
Correct:

```jsx
function App() {
return (
<>
<input />
<li></li>
</>
);
```jsx
function App() {
return (
<>
<input />
<li></li>
</>
);
}
```
```

Incorrect:
Incorrect:

```jsx
function App() {
return (
<>
<input>
<li>
</>
);
}
```
```jsx
function App() {
return (
<>
<input>
<li>
</>
);
}
```

1. camelCase **Most** things.

JSX turns into JavaScript, and attributes of elements become keys of JavaScript objects, so you can't use dashes or reserved words such as `class`. Because of this, many HTML attributes are written in camelCase. Instead of `stroke-width`, you'd use `strokeWidth`, and instead of `class` you'd use `className`.
JSX turns into JavaScript, and attributes of elements become keys of JavaScript objects, so you can't use dashes or reserved words such as `class`. Because of this, many HTML attributes are written in camelCase. Instead of `stroke-width`, you'd use `strokeWidth`, and instead of `class` you'd use `className`.

Correct:
Correct:

```jsx
function App() {
return (
<div className="container">
<svg>
<circle cx="25" cy="75" r="20" stroke="green" strokeWidth="2" />
</svg>
</div>
);
}
```
```jsx
function App() {
return (
<div className="container">
<svg>
<circle cx="25" cy="75" r="20" stroke="green" strokeWidth="2" />
</svg>
</div>
);
}
```

Incorrect:
Incorrect:

```jsx
function App() {
return (
```jsx
function App() {
return (
<div class="container">
<svg>
<circle cx="25" cy="75" r="20" stroke="green" stroke-width="2" />
</svg>
</div>
);
}
```
);
}
```

### Converting HTML to JSX

Now that we've covered the Rules of JSX, we'll go through the conversion of a chunk of HTML to JSX.

```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