Browse Source

Update instructions to Babel 7

main
Dan Abramov 2 years ago
parent
commit
6fa4673fb4
  1. 4
      beta/src/content/learn/add-react-to-a-website.md

4
beta/src/content/learn/add-react-to-a-website.md

@ -196,7 +196,7 @@ Adding JSX to a project doesn't require complicated tools like a [bundler](/lear
Go to your project folder in the terminal, and paste these two commands (**Be sure you have [Node.js](https://nodejs.org/) installed!**):
1. `npm init -y` (if it fails, [here's a fix](https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d))
2. `npm install babel-cli@6 babel-preset-react-app@3`
2. `npm install @babel/cli@7 babel-preset-react-app@10`
You only need npm to install the JSX preprocessor. You won't need it for anything else. Both React and the application code can stay as `<script>` tags with no changes.
@ -207,7 +207,7 @@ Congratulations! You just added a **production-ready JSX setup** to your project
You can preprocess JSX so that every time you save a file with JSX in it, the transform will be re-run, converting the JSX file into a new, plain JavaScript file that the browser can understand. Here's how to set this up:
1. Create a folder called **`src`.**
2. In your terminal, run this command: `npx babel --watch src --out-dir . --presets react-app/prod ` (Don't wait for it to finish! This command starts an automated watcher for edits to JSX inside `src`.)
2. In your terminal, run this command: `npx babel --watch src --out-dir . --presets babel-preset-react-app/prod ` (Don't wait for it to finish! This command starts an automated watcher for edits to JSX inside `src`.)
3. Move your JSX-ified **`like-button.js`** ([it should look like this!](https://gist.githubusercontent.com/gaearon/be5ae0fbf563d6c5fe5c1563907b13d2/raw/4c0d0b8c7f4fcb341720424c28c72059f8174c62/like-button.js)) to the new **`src`** folder.
The watcher will create a preprocessed **`like-button.js`** with the plain JavaScript code suitable for the browser.

Loading…
Cancel
Save