Browse Source

Add "Quickly Try JSX"

main
Dan Abramov 7 years ago
parent
commit
fd2185b157
  1. 12
      content/docs/add-react-to-a-website.md

12
content/docs/add-react-to-a-website.md

@ -150,6 +150,18 @@ These two code snippets are equivalent. While **JSX is [completely optional](/do
You can play with JSX using [this online converter](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=).
### Quickly Try JSX
The quickest way to try JSX in your project is to add this `<script>` tag to your page:
```html
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
```
Now you can use JSX in any `<script>` tag by adding `type="text/babel"` attribute to it. Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html) that you can download and play with.
This approach is fine for learning and creating simple demos. However, it makes your website slow and **isn't suitable for production**. When you're ready to move forward, remove this new `<script>` tag and the `type="text/babel"` attributes you've added. Instead, in the next section you will set up a JSX preprocessor to convert all your `<script>` tags automatically.
### Add JSX to a Project
Adding JSX to a project doesn't require complicated tools like a bundler or a development server. Essentially, adding JSX **is a lot like adding a CSS preprocessor.** The only requirement is to have [Node.js](https://nodejs.org/) installed on your computer.

Loading…
Cancel
Save