PageRenderTime 52ms CodeModel.GetById 28ms RepoModel.GetById 0ms app.codeStats 0ms

/docs/docs/getting-started.ja-JP.md

https://gitlab.com/orvi2014/react
Markdown | 116 lines | 86 code | 30 blank | 0 comment | 0 complexity | fbe04a827587ea8dc6d50525af803cf0 MD5 | raw file
    

  1. ---
    2. 

  2. id: getting-started-ja-JP
    3. 

  3. title: 始めてみましょう
    4. 

  4. next: tutorial-ja-JP.html
    5. 

  5. redirect_from: "docs/index-ja-JP.html"
    6. 

  6. ---
    7. 

  7. 

  8. ## JSFiddle
    9. 

  9. 

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

  11. 

  12.  * **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)**
    13. 

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

  14. 

  15. ## スターターキット
    16. 

  16. 

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

  18. 

  19. <div class="buttons-unit downloads">
    20. 

  20.   <a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
    21. 

  21.     Download Starter Kit {{site.react_version}}
    22. 

  22.   </a>
    23. 

  23. </div>
    24. 

  24. 

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

  26. ```html
    27. 

  27. <!DOCTYPE html>
    28. 

  28. <html>
    29. 

  29.   <head>
    30. 

  30.     <script src="build/react.js"></script>
    31. 

  31.     <script src="build/JSXTransformer.js"></script>
    32. 

  32.   </head>
    33. 

  33.   <body>
    34. 

  34.     <div id="example"></div>
    35. 

  35.     <script type="text/jsx">
    36. 

  36.       React.render(
    37. 

  37.         <h1>Hello, world!</h1>,
    38. 

  38.         document.getElementById('example')
    39. 

  39.       );
    40. 

  40.     </script>
    41. 

  41.   </body>
    42. 

  42. </html>
    43. 

  43. ```
    44. 

  44. 

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

  46. 

  47. ### ファイルの分割
    48. 

  48. 

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

  50. 

  51. ```javascript
    52. 

  52. React.render(
    53. 

  53.   <h1>Hello, world!</h1>,
    54. 

  54.   document.getElementById('example')
    55. 

  55. );
    56. 

  56. ```
    57. 

  57. 

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

  59. 

  60. ```html{10}
    61. 

  61. <script type="text/jsx" src="src/helloworld.js"></script>
    62. 

  62. ```
    63. 

  63. 

  64. ### オフラインでの変換
    65. 

  65. 

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

  67. 

  68. ```
    69. 

  69. npm install -g react-tools
    70. 

  70. ```
    71. 

  71. 

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

  73. 

  74. ```
    75. 

  75. jsx --watch src/ build/
    76. 

    77. 

  77. ```
    78. 

  78. 

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

  80. 

  81. ```javascript{2}
    82. 

  82. React.render(
    83. 

  83.   React.createElement('h1', null, 'Hello, world!'),
    84. 

  84.   document.getElementById('example')
    85. 

  85. );
    86. 

  86. ```
    87. 

  87. 

  88. 

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

  90. 

  91. ```html{6,10}
    92. 

  92. <!DOCTYPE html>
    93. 

  93. <html>
    94. 

  94.   <head>
    95. 

  95.     <title>Hello React!</title>
    96. 

  96.     <script src="build/react.js"></script>
    97. 

  97.     <!-- JSXTransformer は必要ありません！ -->
    98. 

  98.   </head>
    99. 

  99.   <body>
    100. 

  100.     <div id="example"></div>
    101. 

  101.     <script src="build/helloworld.js"></script>
    102. 

  102.   </body>
    103. 

  103. </html>
    104. 

  104. ```
    105. 

  105. 

  106. ## CommonJS を使うには
    107. 

  107. 

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

  109. 

  110. ## 次にすること
    111. 

  111. 

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

  113. 

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

  115. 

  116. 幸運を祈ります！React へようこそ！
    117. 

  117.