--- id: getting-started-ja-JP title: 始めてみましょう next: tutorial-ja-JP.html redirect_from: "docs/index-ja-JP.html" --- ## JSFiddle React でのハッキングを始めるにあたり、一番簡単なものとして次の JSFiddle で動いている Hello World の例を取り上げます。 * **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)** * [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/) ## スターターキット 始めるためにスターターキットをダウンロードしましょう。
Download Starter Kit {{site.react_version}}
スターターキットのルートディレクトリに `helloworld.html` を作り、次のように書いてみましょう。 ```html
``` JavaScript の中に書かれた XML シンタックスは JSX と呼ばれるものです(JSX の詳しいことについては [JSX syntax](/react/docs/jsx-in-depth.html) を読んでください)。ここでは JSX から vanilla JavaScript への変換をブラウザ内で行わせるため、先程のコードには ` ``` ### オフラインでの変換 まずはコマンドラインツールをインストールしましょう([npm](http://npmjs.org/) が必要です)。 ``` 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} Hello React!
``` ## CommonJS を使うには React を [browserify](http://browserify.org/) や [webpack](http://webpack.github.io/)、または CommonJS 準拠の他のモジュールシステムと一緒に使いたい場合、 [`react` npm package](https://www.npmjs.org/package/react) を使ってみてください。また、`jsx` ビルドツールをパッケージングシステム(CommonJS に限らず)に導入することも非常に簡単です。 ## 次にすること [チュートリアル](/react/docs/tutorial.html) や、スターターキットの `examples` ディレクトリに入っている他の例を読んでみてください。 また、[ワークフロー、UIコンポーネント、ルーティング、データマネジメントなど](https://github.com/facebook/react/wiki/Complementary-Tools)の方面で貢献しているコミュニティの wiki もあります。 幸運を祈ります!React へようこそ!