Browse Source

minor adjustments to the documentation (#3354)

main
Jhon Mike 4 years ago
committed by GitHub
parent
commit
18ac8f7197
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 5
      content/blog/2020-09-22-introducing-the-new-jsx-transform.md
  2. 7
      content/docs/reference-events.md

5
content/blog/2020-09-22-introducing-the-new-jsx-transform.md

@ -143,7 +143,7 @@ npm update @babel/core @babel/preset-react
yarn upgrade @babel/core @babel/preset-react
```
Currently, the old transform (`"runtime": "classic"`) is the default option. To enable the new transform, you can pass `{"runtime": "automatic"}` as an option to `@babel/plugin-transform-react-jsx` or `@babel/preset-react`:
Currently, the old transform `{"runtime": "classic"}` is the default option. To enable the new transform, you can pass `{"runtime": "automatic"}` as an option to `@babel/plugin-transform-react-jsx` or `@babel/preset-react`:
```js
// If you are using @babel/preset-react
@ -192,7 +192,7 @@ If you are using [eslint-plugin-react](https://github.com/yannickcr/eslint-plugi
### TypeScript {#typescript}
TypeScript supports the JSX transform in [v4.1 beta](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#jsx-factories).
TypeScript supports the new JSX transform in [v4.1 beta](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#jsx-factories).
### Flow {#flow}
@ -213,7 +213,6 @@ npx react-codemod update-react-imports
>
>Keep in mind that the codemod output will not always match your project's coding style, so you might want to run [Prettier](https://prettier.io/) after the codemod finishes for consistent formatting.
Running this codemod will:
* Remove all unused React imports as a result of upgrading to the new JSX transform.

7
content/docs/reference-events.md

@ -146,7 +146,7 @@ Properties:
DOMEventTarget relatedTarget
```
#### onFocus
#### onFocus {#onfocus}
The `onFocus` event is called when the element (or some element inside of it) receives focus. For example, it's called when the user clicks on a text input.
@ -163,7 +163,7 @@ function Example() {
}
```
#### onBlur
#### onBlur {#onblur}
The `onBlur` event handler is called when focus has left the element (or left some element inside of it). For example, it's called when the user clicks outside of a focused text input.
@ -180,7 +180,7 @@ function Example() {
}
```
#### Detecting Focus Entering and Leaving
#### Detecting Focus Entering and Leaving {#detecting-focus-entering-and-leaving}
You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from _outside_ of the parent element. Here is a demo you can copy and paste that shows how to detect focusing a child, focusing the element itself, and focus entering or leaving the whole subtree.
@ -219,7 +219,6 @@ function Example() {
}
```
* * *
### Form Events {#form-events}

Loading…
Cancel
Save