diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index a03d0e8a..f314928b 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -54,8 +54,8 @@ Next, add three ` - + + @@ -84,7 +84,7 @@ const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); ``` -These two lines of code find the `
` we added to our HTML in the first step, and then display our "Like" button React component inside of it. +These two lines of code find the `
` we added to our HTML in the first step, and then display our "Like" button React component inside of it. ### That's It! {#thats-it} @@ -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 - - + + ``` 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). @@ -184,7 +184,7 @@ Congratulations! You just added a **production-ready JSX setup** to your project Create a folder called `src` and run this terminal command: ``` -npx babel --watch src --out-dir . --presets react-app/prod +npx babel --watch src --out-dir . --presets react-app/prod ``` >Note diff --git a/content/docs/cdn-links.md b/content/docs/cdn-links.md index fe3a9009..e357811d 100644 --- a/content/docs/cdn-links.md +++ b/content/docs/cdn-links.md @@ -9,18 +9,18 @@ next: release-channels.html Both React and ReactDOM are available over a CDN. ```html - - + + ``` 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 - - + + ``` -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} diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index 72041f33..a3270959 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -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 - - + + ``` Remember that only React files ending with `.production.min.js` are suitable for production. @@ -75,10 +75,10 @@ For the most efficient Browserify production build, install a few plugins: ``` # If you use npm -npm install --save-dev envify terser uglifyify +npm install --save-dev envify terser uglifyify # If you use Yarn -yarn add --dev envify terser uglifyify +yarn add --dev envify terser uglifyify ``` To create a production build, make sure that you add these transforms **(the order matters)**: @@ -379,7 +379,7 @@ function updateColorMap(colormap) { } ``` -This feature was added to JavaScript in ES2018. +This feature was added to JavaScript in ES2018. If you're using Create React App, both `Object.assign` and the object spread syntax are available by default. diff --git a/static/html/single-file-example.html b/static/html/single-file-example.html index bdae8f02..569b9de4 100644 --- a/static/html/single-file-example.html +++ b/static/html/single-file-example.html @@ -3,9 +3,9 @@ Hello World - - - + + +