mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-24 20:53:08 +00:00
24da7a39cf
I propose to add a sentence to indicate the page is ready, and the next step (Separate File) is optional. IMMO, the quick-start guide should be really short so that readers can see the result asap. Furthermore, the "Separate File" might not work for readers using Chrome anyway.
168 lines
4.7 KiB
Markdown
168 lines
4.7 KiB
Markdown
---
|
|
id: getting-started
|
|
title: Getting Started
|
|
next: tutorial.html
|
|
redirect_from: "docs/index.html"
|
|
---
|
|
|
|
## JSFiddle
|
|
|
|
The easiest way to start hacking on React is using the following JSFiddle Hello World examples:
|
|
|
|
* **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)**
|
|
* [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)
|
|
|
|
## Using React from npm
|
|
|
|
We recommend using React with a CommonJS module system like [browserify](http://browserify.org/) or [webpack](https://webpack.github.io/). Use the [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) npm packages.
|
|
|
|
```js
|
|
// main.js
|
|
var React = require('react');
|
|
var ReactDOM = require('react-dom');
|
|
|
|
ReactDOM.render(
|
|
<h1>Hello, world!</h1>,
|
|
document.getElementById('example')
|
|
);
|
|
```
|
|
|
|
To install React DOM and build your bundle with browserify:
|
|
|
|
```sh
|
|
$ npm install --save react react-dom babelify babel-preset-react
|
|
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
|
|
```
|
|
|
|
To install React DOM and build your bundle with webpack:
|
|
|
|
```sh
|
|
$ npm install --save react react-dom babel-preset-react
|
|
$ webpack
|
|
```
|
|
|
|
> Note:
|
|
>
|
|
> If you are using ES2015, you will want to also use the `babel-preset-es2015` package.
|
|
|
|
**Note:** by default, React will be in development mode, which is slower, and not advised for production. To use React in production mode, set the environment variable `NODE_ENV` to `production` (using envify or webpack's DefinePlugin). For example:
|
|
|
|
```js
|
|
new webpack.DefinePlugin({
|
|
"process.env": {
|
|
NODE_ENV: JSON.stringify("production")
|
|
}
|
|
});
|
|
```
|
|
|
|
## Quick Start Without npm
|
|
|
|
If you're not ready to use npm yet, you can download the starter kit which includes prebuilt copies of React and React DOM.
|
|
|
|
<div class="buttons-unit downloads">
|
|
<a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
|
|
Download Starter Kit {{site.react_version}}
|
|
</a>
|
|
</div>
|
|
|
|
In the root directory of the starter kit, create a `helloworld.html` with the following contents.
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Hello React!</title>
|
|
<script src="build/react.js"></script>
|
|
<script src="build/react-dom.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="example"></div>
|
|
<script type="text/babel">
|
|
ReactDOM.render(
|
|
<h1>Hello, world!</h1>,
|
|
document.getElementById('example')
|
|
);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
The XML syntax inside of JavaScript is called JSX; check out the [JSX syntax](/react/docs/jsx-in-depth.html) to learn more about it. In order to translate it to vanilla JavaScript we use `<script type="text/babel">` and include Babel to actually perform the transformation in the browser. Open the html from a browser and you should already be able to see the greeting!
|
|
|
|
### Separate File
|
|
|
|
Your React JSX code can live in a separate file. Create the following `src/helloworld.js`.
|
|
|
|
```javascript
|
|
ReactDOM.render(
|
|
<h1>Hello, world!</h1>,
|
|
document.getElementById('example')
|
|
);
|
|
```
|
|
|
|
Then reference it from `helloworld.html`:
|
|
|
|
```html{10}
|
|
<script type="text/babel" src="src/helloworld.js"></script>
|
|
```
|
|
|
|
Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.
|
|
|
|
### Offline Transform
|
|
|
|
First install the [Babel](http://babeljs.io/) command-line tools (requires [npm](https://www.npmjs.com/)):
|
|
|
|
```
|
|
npm install --global babel-cli
|
|
npm install babel-preset-react
|
|
```
|
|
|
|
Then, translate your `src/helloworld.js` file to plain JavaScript:
|
|
|
|
```
|
|
babel --presets react src --watch --out-dir build
|
|
```
|
|
|
|
> Note:
|
|
>
|
|
> If you are using ES2015, you will want to also use the `babel-preset-es2015` package.
|
|
|
|
The file `build/helloworld.js` is autogenerated whenever you make a change. Read the [Babel CLI documentation](http://babeljs.io/docs/usage/cli/) for more advanced usage.
|
|
|
|
```javascript{2}
|
|
ReactDOM.render(
|
|
React.createElement('h1', null, 'Hello, world!'),
|
|
document.getElementById('example')
|
|
);
|
|
```
|
|
|
|
|
|
Update your HTML file as below:
|
|
|
|
```html{8,12}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Hello React!</title>
|
|
<script src="build/react.js"></script>
|
|
<script src="build/react-dom.js"></script>
|
|
<!-- No need for Babel! -->
|
|
</head>
|
|
<body>
|
|
<div id="example"></div>
|
|
<script src="build/helloworld.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## Next Steps
|
|
|
|
Check out [the tutorial](/react/docs/tutorial.html) and the other examples in the starter kit's `examples` directory to learn more.
|
|
|
|
We also have a wiki where the community contributes with [workflows, UI-components, routing, data management etc.](https://github.com/facebook/react/wiki/Complementary-Tools)
|
|
|
|
Good luck, and welcome!
|