Initial public release

2026-02-23 20:23:08 +00:00 · 2013-05-29 12:46:11 -07:00
commit eb278167cd
97 changed files with 12894 additions and 0 deletions
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -0,0 +1,106 @@
+---
+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!