react.dev

4.2 KiB

Raw Blame History

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

JSFiddle

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

スターターキット

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

Download Starter Kit {{site.react_version}}

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.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>

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

ファイルの分割

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

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

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

<script type="text/babel" src="src/helloworld.js"></script>

オフラインでの変換

まずはコマンドラインツールをインストールしましょう（npm が必要です）。

npm install -g react-tools

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

jsx --watch src/ build/

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

ReactDOM.render(
  React.createElement('h1', null, 'Hello, world!'),
  document.getElementById('example')
);

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <!-- Babel は必要ありません！ -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html>

CommonJS を使うには

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

次にすること

チュートリアルや、スターターキットの examples ディレクトリに入っている他の例を読んでみてください。

また、ワークフロー、UIコンポーネント、ルーティング、データマネジメントなどの方面で貢献しているコミュニティの wiki もあります。

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

4.2 KiB Raw Blame History