mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-24 12:43:05 +00:00
48143d7b0e
Split browserify and webpack to separate sections. Remove `babelify` from the webpack section since it's only for browserify
159 lines
4.3 KiB
Markdown
159 lines
4.3 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.
|
|
|
|
|
|
## 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.
|
|
|
|
### 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!
|