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 CDN links for React 18 (#4528)

main
Angelos Chalaris 3 years ago
committed by GitHub
parent
f5c84d47ab
commit
56a0dca6fb
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 20 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      beta/public/html/single-file-example.html
  2. 16
      beta/src/pages/learn/add-react-to-a-website.md
  3. 8
      content/docs/add-react-to-a-website.md
  4. 6
      content/docs/optimizing-performance.md
  5. 4
      static/html/single-file-example.html

6
beta/public/html/single-file-example.html
View File

@ -3,9 +3,9 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Hello World</title> <title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Don't use this in production—do this: https://reactjs.org/docs/add-react-to-a-website#add-jsx-to-a-project --> <!-- Don't use this in production—do this: https://reactjs.org/docs/add-react-to-a-website#add-jsx-to-a-project -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head> </head>

16
beta/src/pages/learn/add-react-to-a-website.md
View File

@ -30,8 +30,8 @@ You can place a "container" element like this `<div>` anywhere inside the `<body
In the HTML page, right before the closing `</body>` tag, add three `<script>` tags for the following files: In the HTML page, right before the closing `</body>` tag, add three `<script>` tags for the following files:
- [**react.development.js**](https://unpkg.com/react@17/umd/react.development.js) loads the core of React - [**react.development.js**](https://unpkg.com/react@18/umd/react.development.js) loads the core of React
- [**react-dom.development.js**](https://unpkg.com/react-dom@17/umd/react-dom.development.js) lets React render HTML elements to the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model). - [**react-dom.development.js**](https://unpkg.com/react-dom@18/umd/react-dom.development.js) lets React render HTML elements to the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model).
- **like_button.js** is where you'll write your component in step 3! - **like_button.js** is where you'll write your component in step 3!
<Gotcha> <Gotcha>
@ -42,8 +42,8 @@ When deploying, replace "development.js" with "production.min.js".
```html ```html
<!-- end of the page --> <!-- end of the page -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="like_button.js"></script> <script src="like_button.js"></script>
</body> </body>
``` ```
@ -116,8 +116,8 @@ Unminified JavaScript can significantly slow down page load times for your users
- **If you already minify** your 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` like so: - **If you already minify** your 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` like so:
```html ```html
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
``` ```
## Try React with JSX {/*try-react-with-jsx*/} ## Try React with JSX {/*try-react-with-jsx*/}
@ -145,8 +145,8 @@ The quickest way to try JSX in your project is to add the Babel compiler to your
```html {6} ```html {6}
<!-- ... rest of <head> ... --> <!-- ... rest of <head> ... -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

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. --> <!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". --> <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. --> <!-- Load our React component. -->
<script src="like_button.js"></script> <script src="like_button.js"></script>
@ -116,8 +116,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`: 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 ```js
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/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). 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).

6
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: We offer production-ready versions of React and React DOM as single files:
```html ```html
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
``` ```
Remember that only React files ending with `.production.min.js` are suitable for production. Remember that only React files ending with `.production.min.js` are suitable for production.
@ -175,7 +175,7 @@ If you haven't yet installed the React DevTools, you can find them here:
> Note > Note
> >
> Before React 17, we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) to profile components with the chrome performance tab. > Before React 17, we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) to profile components with the chrome performance tab.
> For a more detailed walkthrough, check out [this article by Ben Schwarz](https://calibreapp.com/blog/react-performance-profiling-optimization). > For a more detailed walkthrough, check out [this article by Ben Schwarz](https://calibreapp.com/blog/react-performance-profiling-optimization).
## Virtualize Long Lists {#virtualize-long-lists} ## Virtualize Long Lists {#virtualize-long-lists}

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

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

Write Preview
Loading…
Cancel
Save