<commit_before>---
id: getting-started-ja-JP
title: 始めてみましょう
permalink: getting-started-ja-JP.html
next: tutorial-ja-JP.html
redirect_from: "docs/index-ja-JP.html"
---

## JSFiddle

React でのハッキングを始めるにあたり、一番簡単なものとして次の JSFiddle で動いている Hello World の例を取り上げます。

 * **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)**
 * [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)

## スターターキット

始めるためにスターターキットをダウンロードしましょう。

<div class="buttons-unit downloads">
  <a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
    Download Starter Kit {{site.react_version}}
  </a>
</div>

スターターキットのルートディレクトリに `helloworld.html` を作り、次のように書いてみましょう。

```html
<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
```

JavaScript の中に書かれた XML シンタックスは JSX と呼ばれるものです（JSX の詳しいことについては [JSX syntax](/react/docs/jsx-in-depth.html) を読んでください）。ここでは JSX から vanilla JavaScript への変換をブラウザ内で行わせるため、先程のコードには `<script type="text/jsx">` と書いており、加えて `JSXTransformer.js` を読み込ませています。

### ファイルの分割

React の JSX コードは別ファイルに分離することができます。 次のような `src/helloworld.js` を作ってみましょう。

```javascript
React.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);
```

それが終わったら、`helloworld.js` への参照を `helloworld.html` に書き込みましょう。

```html{10}
<script type="text/jsx" src="src/helloworld.js"></script>
```

### オフラインでの変換

まずはコマンドラインツールをインストールしましょう（[npm](https://www.npmjs.com/) が必要です）。

```
npm install -g react-tools
```

インストールが終わったら、先程書いた `src/helloworld.js` ファイルを生の JavaScript に変換してみましょう。

```
jsx --watch src/ build/

```

すると、`src/helloword.js` に変更を加えるごとに `build/helloworld.js` が自動で生成されるようになります。

```javascript{2}
React.render(
  React.createElement('h1', null, 'Hello, world!'),
  document.getElementById('example')
);
```


最後に HTML ファイルを以下のように書き換えましょう。

```html{6,10}
<!DOCTYPE html>
<html>
  <head>
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <!-- JSXTransformer は必要ありません！ -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html>
```

## CommonJS を使うには

React を [browserify](http://browserify.org/) や [webpack](https://webpack.github.io/)、または CommonJS 準拠の他のモジュールシステムと一緒に使いたい場合、 [`react` npm package](https://www.npmjs.com/package/react) を使ってみてください。また、`jsx` ビルドツールをパッケージングシステム（CommonJS に限らず）に導入することも非常に簡単です。

## 次にすること

[チュートリアル](/react/docs/tutorial.html) や、スターターキットの `examples` ディレクトリに入っている他の例を読んでみてください。

また、[ワークフロー、UIコンポーネント、ルーティング、データマネジメントなど](https://github.com/facebook/react/wiki/Complementary-Tools)の方面で貢献しているコミュニティの wiki もあります。

幸運を祈ります！React へようこそ！<commit_msg>Fix link of getting-started.ja-JP.md<commit_after>---
id: getting-started-ja-JP
title: 始めてみましょう
permalink: getting-started-ja-JP.html
next: tutorial-ja-JP.html
redirect_from: "docs/index-ja-JP.html"
---

## JSFiddle

React でのハッキングを始めるにあたり、一番簡単なものとして次の JSFiddle で動いている Hello World の例を取り上げます。

 * **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)**
 * [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)

## スターターキット

始めるためにスターターキットをダウンロードしましょう。

<div class="buttons-unit downloads">
  <a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
    Download Starter Kit {{site.react_version}}
  </a>
</div>

スターターキットのルートディレクトリに `helloworld.html` を作り、次のように書いてみましょう。

```html
<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
```

JavaScript の中に書かれた XML シンタックスは JSX と呼ばれるものです（JSX の詳しいことについては [JSX syntax](/react/docs/jsx-in-depth.html) を読んでください）。ここでは JSX から vanilla JavaScript への変換をブラウザ内で行わせるため、先程のコードには `<script type="text/jsx">` と書いており、加えて `JSXTransformer.js` を読み込ませています。

### ファイルの分割

React の JSX コードは別ファイルに分離することができます。 次のような `src/helloworld.js` を作ってみましょう。

```javascript
React.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);
```

それが終わったら、`helloworld.js` への参照を `helloworld.html` に書き込みましょう。

```html{10}
<script type="text/jsx" src="src/helloworld.js"></script>
```

### オフラインでの変換

まずはコマンドラインツールをインストールしましょう（[npm](https://www.npmjs.com/) が必要です）。

```
npm install -g react-tools
```

インストールが終わったら、先程書いた `src/helloworld.js` ファイルを生の JavaScript に変換してみましょう。

```
jsx --watch src/ build/

```

すると、`src/helloword.js` に変更を加えるごとに `build/helloworld.js` が自動で生成されるようになります。

```javascript{2}
React.render(
  React.createElement('h1', null, 'Hello, world!'),
  document.getElementById('example')
);
```


最後に HTML ファイルを以下のように書き換えましょう。

```html{6,10}
<!DOCTYPE html>
<html>
  <head>
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <!-- JSXTransformer は必要ありません！ -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html>
```

## CommonJS を使うには

React を [browserify](http://browserify.org/) や [webpack](https://webpack.github.io/)、または CommonJS 準拠の他のモジュールシステムと一緒に使いたい場合、 [`react` npm package](https://www.npmjs.com/package/react) を使ってみてください。また、`jsx` ビルドツールをパッケージングシステム（CommonJS に限らず）に導入することも非常に簡単です。

## 次にすること

[チュートリアル](/react/docs/tutorial-ja-JP.html) や、スターターキットの `examples` ディレクトリに入っている他の例を読んでみてください。

また、[ワークフロー、UIコンポーネント、ルーティング、データマネジメントなど](https://github.com/facebook/react/wiki/Complementary-Tools)の方面で貢献しているコミュニティの wiki もあります。

幸運を祈ります！React へようこそ！
{'fraction_non_alphanumeric': 0.1743518357403863, 'fraction_numerical': 0.005568122498694972, 'mean_word_length': 5.01255230125523, 'pattern_counts': {'":': 0, '<': 87, '<?xml version=': 0, '>': 87, 'https://': 12, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2628310', 'n_tokens_mistral': 3149, 'n_tokens_neox': 2921, 'n_words': 360}