Getting StartedEdit on GitHub
JSFiddle
The easiest way to start hacking on React is using the following JSFiddle Hello World examples:
Using React from npm (NPM 사용하여 설치하기)
We recommend using React with a CommonJS module system like browserify or webpack. Use the react and react-dom npm packages.
// 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:
$ 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:
$ 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-es2015package.
Quick Start Without npm(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.
In the root directory of the starter kit, create a helloworld.html with the following contents.
<!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 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.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Then reference it from helloworld.html:
<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 command-line tools (requires npm):
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-es2015package.
The file build/helloworld.js is autogenerated whenever you make a change. Read theBabel CLI documentation for more advanced usage.
ReactDOM.render(
React.createElement('h1', null, 'Hello, world!'),
document.getElementById('example')
);
Update your HTML file as below:
<!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 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.
Good luck, and welcome!
