lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update more docs to 17 (#3345)

main
Dan Abramov 4 years ago
committed by GitHub
parent
64d067f2c0
commit
02d17e4217
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      content/docs/add-react-to-a-website.md
  2. 10
      content/docs/cdn-links.md
  3. 4
      content/docs/optimizing-performance.md
  4. 4
      static/html/single-file-example.html

8
content/docs/add-react-to-a-website.md
View File

@ -54,8 +54,8 @@ Next, add three `<script>` tags to the HTML page right before the closing `</bod
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
@ -115,8 +115,8 @@ Before deploying your website to production, be mindful that unminified JavaScri
If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`:
```js
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
```
If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3).

10
content/docs/cdn-links.md
View File

@ -9,18 +9,18 @@ next: release-channels.html
Both React and ReactDOM are available over a CDN.
```html
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
```
The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
```html
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
```
To load a specific version of `react` and `react-dom`, replace `16` with the version number.
To load a specific version of `react` and `react-dom`, replace `17` with the version number.
### Why the `crossorigin` Attribute? {#why-the-crossorigin-attribute}

4
content/docs/optimizing-performance.md
View File

@ -43,8 +43,8 @@ Remember that this is only necessary before deploying to production. For normal
We offer production-ready versions of React and React DOM as single files:
```html
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
```
Remember that only React files ending with `.production.min.js` are suitable for production.

4
static/html/single-file-example.html
View File

@ -3,8 +3,8 @@
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Write Preview
Loading…
Cancel
Save