You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.6 KiB
107 lines
2.6 KiB
12 years ago
|
---
|
||
|
|
id: docs-getting-started
|
||
|
|
title: Getting Started
|
||
|
|
layout: docs
|
||
|
|
next: tutorial.html
|
||
|
|
---
|
||
|
|
Download the starter kit to get started.
|
||
|
|
|
||
|
|
<div class="buttons-unit downloads">
|
||
|
|
<a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
|
||
|
|
Download Starter Kit {{site.react_version}}
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
## Hello, world!
|
||
|
|
|
||
|
|
In the root directory of the starter kit, create a `helloworld.html` with the following contents.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<script src="build/react.min.js"></script>
|
||
|
|
<script src="build/JSXTransformer.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="example"></div>
|
||
|
|
<script type="text/jsx">
|
||
|
|
/** @jsx React.DOM */
|
||
|
|
React.renderComponent(
|
||
|
|
<h1>Hello, world!</h1>,
|
||
|
|
document.getElementById('example')
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
The XML syntax inside of JavaScript is called JSX; check out the [JSX syntax](syntax.html) to learn more about it. In order to translate it to vanilla JavaScript we use `<script type="text/jsx">` and include `JSXTransformer.js` to actually perform the transformation in the browser.
|
||
|
|
|
||
|
|
### Separate File
|
||
|
|
|
||
|
|
Your React JSX file can live in a separate file. Create the following `src/helloworld.js`.
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
/** @jsx React.DOM */
|
||
|
|
React.renderComponent(
|
||
|
|
<h1>Hello, world!</h1>,
|
||
|
|
document.getElementById('example')
|
||
|
|
);
|
||
|
|
```
|
||
|
|
Then reference it from `helloworld.html`:
|
||
|
|
|
||
|
|
```html{10}
|
||
|
|
<script type="text/jsx" src="src/helloworld.js"></script>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Offline Transform
|
||
|
|
|
||
|
|
First install the command-line tools (requires [npm](http://npmjs.org/)):
|
||
|
|
|
||
|
|
```
|
||
|
|
npm install -g react-tools
|
||
|
|
```
|
||
|
|
|
||
|
|
Then, translate your `src/helloworld.js` file to plain JavaScript:
|
||
|
|
|
||
|
|
```
|
||
|
|
jsx --watch src/ build/
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
The file `build/helloworld.js` is autogenerated whenever you make a change.
|
||
|
|
|
||
|
|
```javascript{3}
|
||
|
|
/** @jsx React.DOM */
|
||
|
|
React.renderComponent(
|
||
|
|
React.DOM.h1(null, 'Hello, world!'),
|
||
|
|
document.getElementyById('example')
|
||
|
|
);
|
||
|
|
```
|
||
|
|
|
||
|
|
Update your HTML file as below:
|
||
|
|
|
||
|
|
```html{6,10}
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Hello React!</title>
|
||
|
|
<script src="build/react.min.js"></script>
|
||
|
|
<!-- No need for JSXTransformer! -->
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="example"></div>
|
||
|
|
<script src="build/helloworld.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Want CommonJS?
|
||
|
|
|
||
|
|
If you want to use React within a module system, [fork our repo](http://github.com/facebook/react), `npm install` and run `grunt`. A nice set of CommonJS modules will be generated. Our `jsx` build tool can be integrated into most packaging systems (not just CommonJS) quite easily.
|
||
|
|
|
||
|
|
## Next Steps
|
||
|
|
|
||
|
|
Check out [the tutorial](tutorial.html) and the other examples in the `/examples` directory to learn more. Good luck, and welcome!
|