はじめに
この記事は、Reactの公式サイトを勉強がてら翻訳したものです。
最近のフレームワークは、本家のサイトが充実してますね。
対象サイト:対象サイト
#Getting Started
ReactはUIを構築するためのJavaScriptライブラリです。
Reactの概要を学ぶには、公式サイトやチュートリアルを参照してください。
Try React
Reactは、段階的に導入できるように設計されています。
あなたが必要とする分だけ小さく使うことができます。
Online Playgrounds
もしあなたがReactに興味があり遊んでみたいなら、オンラインでコードを書いて遊ぶことができます。
CodePenかCodeSandboxでHello Wroldのテンプレートを試してみましょう。
Hellow Worldくらいの簡単なデモなら、ダウンロードして、ローカルのブラウザで動作確認できます。複雑になると遅くなるからおすすめしません。
Add React to a Website
Add React to a Websiteサイトをみれば、1分でHTMLにReactを組み込むことができます。
少しずつReactの活用範囲を増やしてもいいし、いくつかの動的な部品を導入するだけでもいいです。
Create a New React App
ちょっと試すくらいなら、Scriptタグを含めたHTMLページが最善の選択肢の場合があります。
セットアップはわずか1分です。
本格的に使うなら、統合された仕組みを検討しましょう。
Learn React
みんな様々な経歴からReactにたどりつき、学習スタイルも異なります。
あなたが理論的なアプローチか実践的なアプローチを好むかに関わらず、
以下のセクションが役立つことを望んています。
- もし、動かしながら学びたいなら、pratical tutorialで始めてください。
- もし、コンセプトを1つずつ学びたいなら、guide to main conceptsで学んでください。
First Examples
Reactのトップページにはいくつかの小さなReactのサンプルがあります。
Reactをまだ知らなくても、オンライン上でコードを変更して動作の変化を確認してください。
React for Beginners
もしReactのドキュメントが難しいと感じたなら、
this overview of React by Tania RasciaでReactの概要をチェックしてください。Reactの最も重要な概念を丁寧な方法で紹介してます。
React for Designers
あなたがデザイナーの経歴を持つなら、these resourcesで始めるのがおすすめです。
JavaScript Resources
Reactのドキュメントは、ある程度JavaScriptの経験を前提です。
JavaScriptのエキスパートである必要はありませんが、JavaScriptを知らないのであればReactと同時に学ぶことは困難です。
私たちはthis JavaScript overviewで、あなたの知識レベルを確認することを推奨します。
それは30分から1時間程度かかりますが、あなたは自信をもってReactを学習できるでしょう。
Practical Tutorial
もしあなたが動かしながら学びたいなら、practical tutorialをチェックしてください。
このチュートリアルでは、Reactで三目並べゲームを作ります。
あなたはゲームを作りたくないから、スキップしたくなるかもしれない ----
けど、チャンスを与えてください。チュートリアルで学べるテクニックは、どんなReactアプリを作るうえでの基礎になり、あなたにもっと深い理解を与えるでしょう。
Step-by-Step Guide
もしあなたがコンセプトから少しずつ学びたいなら、guide to main conceptsで始めるのがベストです。
前の章で紹介した知識に基づいて、次の章が作られています。
だからあなたは見落とすことがありません。
Thinking in React
Many React users credit reading Thinking in React as the moment React finally “clicked” for them. It’s probably the oldest React walkthrough but it’s still just as relevant.
古い記事だけど、Reactを理解するうえで今でも役に立つ記事だって感じだとは思うのですが、いまいち意味がわからなかった。
Recommended Courses
第三者の書籍や動画サービスは公式サイトよりも役立つことがあります。
私たちはa list of commonly recommended resourcesをメンテしており、いくつかは無償のものもあります。
Advanced Concepts
main conceptsやReactで遊んだら、あなたはもっと高度なことに興味を持つかもしれません。このセクションでは、パワフルだかけど一般的でないReactの機能contextやrefsを学べます。
API Reference
このドキュメントのセクションは、React APIの詳細を知りたい場合に利用します。
例えば、React.Component API Referenceは、どのようにsetState()
が動作するのか、様々なライフサイクルのメソッドがどのように役立つかといったことを、をあなたに提供します。
Glossary and FAQ
glossaryには、Reactのドキュメントにある最も一般的な用語を記載しています。
FAQでは、一般的なトピック(making AJAX reqrests,component state,file structure)についての簡単な質問と回答があります。
Staying Informed
React blogでは、React Teamからの最新情報の公式なソースです。
リリースノートや廃止予定の通知など、重要なものは何でも最初にポストするでしょう。
@rejectjs accountのTwietterアカウントをフォローすることもできますが、ブログを見ていれば重要な物事を見逃すことはないでしょう。
ブログのポストがReactのリリースのすべてではないですが、あなたはReactリポジトリすべてのリリースでCHANGELOG.md
Versioned Documentation
このドキュメントはいつも最新の安定板バージョンを反映してます。
Something Missing?
ドキュメントに誤りや混乱を招く表現がある場合は、改善のためにドキュメントリポジトリにIssueで報告するか、@reactjsアカウントにツイートしてください。
作業記録
4ポモドーロ 割り込み6回