dd010b34e2
Update links to use https:// where it is supported. There's probably a lot more that could be fixed, but these are the core ones I found (especially the download links in order to prevent MITM attacks). Note that there are some fb.me links that will redirect to http:// even while accessed over https://, but this seemed like the best way to fix those for now. NOTE: Only non-third-party files were modified. There are references to http:// URLs in vendored/third-party files, but seems appropriate to fix upstream for those rather than editing the files. Also, copy one image locally to the blog, as it was hotlinking to a site that did not support https://. Last, use youtube-nocookie.com instead of youtube.com for video embeds, as the former doesn't try to set a cookie on load (privacy enhancement).
4.0 KiB
id, title, next, redirect_from
| id | title | next | redirect_from |
|---|---|---|---|
| getting-started-ja-JP | 始めてみましょう | tutorial-ja-JP.html | docs/index-ja-JP.html |
JSFiddle
React でのハッキングを始めるにあたり、一番簡単なものとして次の JSFiddle で動いている Hello World の例を取り上げます。
スターターキット
始めるためにスターターキットをダウンロードしましょう。
スターターキットのルートディレクトリに helloworld.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 を読んでください）。ここでは JSX から vanilla JavaScript への変換をブラウザ内で行わせるため、先程のコードには <script type="text/jsx"> と書いており、加えて JSXTransformer.js を読み込ませています。
ファイルの分割
React の JSX コードは別ファイルに分離することができます。 次のような src/helloworld.js を作ってみましょう。
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
それが終わったら、helloworld.js への参照を helloworld.html に書き込みましょう。
<script type="text/jsx" 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 が自動で生成されるようになります。
React.render(
React.createElement('h1', null, 'Hello, world!'),
document.getElementById('example')
);
最後に HTML ファイルを以下のように書き換えましょう。
<!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 や webpack、または CommonJS 準拠の他のモジュールシステムと一緒に使いたい場合、 react npm package を使ってみてください。また、jsx ビルドツールをパッケージングシステム（CommonJS に限らず）に導入することも非常に簡単です。
次にすること
チュートリアル や、スターターキットの examples ディレクトリに入っている他の例を読んでみてください。
また、ワークフロー、UIコンポーネント、ルーティング、データマネジメントなどの方面で貢献しているコミュニティの wiki もあります。
幸運を祈ります！React へようこそ！