d457201862
Full list of changes is at https://jekyllrb.com/docs/upgrading/2-to-3/. The tl;dr of it is: - Relative permalinks were removed, so all the files in the `docs` subdirectory need their permalink to be prefixed with `docs/` - `post` and `page` types were renamed to `posts` and `pages` respectively - `jekyll-paginate`, `pygments` and `redcarpet` are all now optional, so I needed to explicitly add it to the Gemfile. Jekyll now uses `rouge` rather than `pygments` for syntax highlighting, but rouge does not support highlighting individual lines (`hl_lines`) so we need to continue using Pygments. - Layout metadata (eg. `sectionid`) is now on a `layout` variable rather than `page` Tested the following pages and confirmed that they all work: - "Docs" link (getting started page): http://127.0.0.1:4000/react/docs/getting-started.html - Downloads: http://127.0.0.1:4000/react/downloads.html - Tutorial: http://127.0.0.1:4000/react/docs/tutorial.html - A few pages under the "docs" subdirectory, to confirm they're working properly: - http://127.0.0.1:4000/react/docs/addons.html - http://127.0.0.1:4000/react/docs/why-react.html - http://127.0.0.1:4000/react/docs/create-fragment.html - A few tips: - http://127.0.0.1:4000/react/tips/false-in-jsx.html - http://127.0.0.1:4000/react/tips/style-props-value-px.html - Non-English versions of the page: - http://127.0.0.1:4000/react/docs/getting-started-it-IT.html - http://127.0.0.1:4000/react/docs/getting-started-ja-JP.html
4.2 KiB
id, title, permalink, next, redirect_from
| id | title | permalink | next | redirect_from |
|---|---|---|---|---|
| getting-started-ja-JP | 始めてみましょう | docs/getting-started-ja-JP.html | tutorial-ja-JP.html | docs/index-ja-JP.html |
JSFiddle
React でのハッキングを始めるにあたり、一番簡単なものとして次の JSFiddle で動いている Hello World の例を取り上げます。
スターターキット
始めるためにスターターキットをダウンロードしましょう。
スターターキットのルートディレクトリに 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.34/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 へようこそ！