{"componentChunkName":"component---src-pages-index-js","path":"/","result":{"data":{"codeExamples":{"edges":[{"node":{"id":"a-simple-component","code":"class HelloMessage extends React.Component {\n render() {\n return
Hello {this.props.name}
;\n }\n}\n\nroot.render();\n","mdAbsolutePath":"/vercel/path0/content/home/examples/a-simple-component.md"}},{"node":{"id":"a-component-using-external-plugins","code":"class MarkdownEditor extends React.Component {\n constructor(props) {\n super(props);\n this.md = new Remarkable();\n this.handleChange = this.handleChange.bind(this);\n this.state = { value: 'Hello, **world**!' };\n }\n\n handleChange(e) {\n this.setState({ value: e.target.value });\n }\n\n getRawMarkup() {\n return { __html: this.md.render(this.state.value) };\n }\n\n render() {\n return (\n
\n

Input

\n \n \n

Output

\n \n
\n );\n }\n}\n\nroot.render();\n","mdAbsolutePath":"/vercel/path0/content/home/examples/a-component-using-external-plugins.md"}},{"node":{"id":"a-stateful-component","code":"class Timer extends React.Component {\n constructor(props) {\n super(props);\n this.state = { seconds: 0 };\n }\n\n tick() {\n this.setState(state => ({\n seconds: state.seconds + 1\n }));\n }\n\n componentDidMount() {\n this.interval = setInterval(() => this.tick(), 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.interval);\n }\n\n render() {\n return (\n
\n Seconds: {this.state.seconds}\n
\n );\n }\n}\n\nroot.render();\n","mdAbsolutePath":"/vercel/path0/content/home/examples/a-stateful-component.md"}},{"node":{"id":"an-application","code":"class TodoApp extends React.Component {\n constructor(props) {\n super(props);\n this.state = { items: [], text: '' };\n this.handleChange = this.handleChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n render() {\n return (\n
\n

TODO

\n \n
\n \n \n \n \n
\n );\n }\n\n handleChange(e) {\n this.setState({ text: e.target.value });\n }\n\n handleSubmit(e) {\n e.preventDefault();\n if (this.state.text.length === 0) {\n return;\n }\n const newItem = {\n text: this.state.text,\n id: Date.now()\n };\n this.setState(state => ({\n items: state.items.concat(newItem),\n text: ''\n }));\n }\n}\n\nclass TodoList extends React.Component {\n render() {\n return (\n
    \n {this.props.items.map(item => (\n
  • {item.text}
    • \n ))}\n
\n );\n }\n}\n\nroot.render();\n","mdAbsolutePath":"/vercel/path0/content/home/examples/an-application.md"}}]},"examples":{"edges":[{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/a-simple-component.md","fields":{"slug":"/home/examples/a-simple-component.html"},"frontmatter":{"title":"シンプルなコンポーネント","domid":"hello-example"},"html":"

React コンポーネントを作成するには render() メソッドを実装します。このメソッドは、受け取った入力データを元に、表示する内容を返す役割を担当します。次の例では JSX と呼ばれる XML に似た構文を使っています。コンポーネントに渡された入力データを this.props で参照し、render() の中で使用しています。

\n

React を使う際に JSX を必ず使わなくてはいけないわけではありません。 JSX のコンパイルによって生成される生の JavaScript コードを見るには、Babel REPL を参照してください。

"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/a-stateful-component.md","fields":{"slug":"/home/examples/a-stateful-component.html"},"frontmatter":{"title":"状態を持つコンポーネント","domid":"timer-example"},"html":"

コンポーネントは、入力されたデータを受け取るだけではなく（受け取ったデータは this.props で参照することができます）コンポーネント独自の内部状態を持つこともできます（これは this.state で参照することができます）。状態が変化した場合には、render() が再度実行され、描画されるマークアップが更新されます。

"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/an-application.md","fields":{"slug":"/home/examples/an-application.html"},"frontmatter":{"title":"アプリケーションの実例","domid":"todos-example"},"html":"

props と state を組み合わせることで、ちょっとした Todo アプリケーションを作ることができます。次の例では state を用いて、現在の Todo リストのアイテムの状態を追跡しています。それからユーザが入力したテキストに関しても state で管理しています。イベントハンドラは、それが書かれた要素内部にレンダーされるように一見思われますが、実際にはこれらのハンドラは集められて、イベントデリゲーションを用いて実装されます。

"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/a-component-using-external-plugins.md","fields":{"slug":"/home/examples/a-component-using-external-plugins.html"},"frontmatter":{"title":"外部プラグインを使用するコンポーネント","domid":"markdown-example"},"html":"

React は柔軟性が高いので、React 以外のライブラリやフレームワークとやり取りをするためのフックを提供しています。次の例では Markdown の外部ライブラリである remarkable を使用しています。<textarea> に入力された値をリアルタイムに HTML へと変換しています。

"}}]},"marketing":{"edges":[{"node":{"frontmatter":{"title":"宣言的な View"},"html":"

React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。

\n

宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。

"}},{"node":{"frontmatter":{"title":"コンポーネントベース"},"html":"

自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザインターフェイスを構築します。

\n

コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、様々なデータをアプリケーション内で簡単に取り回すことができ、かつ DOM に状態を持たせないようにすることができます。

"}},{"node":{"frontmatter":{"title":"一度学習すれば、どこでも使える"},"html":"

React と組み合わせて使用する技術に制限はありません。React を使って新しい機能を追加する際に、既存のソースコードを書き換える必要はありません。

\n

React は Node を使ったサーバ上でもレンダーできますし、React Native を使うことでモバイルアプリケーションの中でも動きます。

"}}]}},"pageContext":{}},"staticQueryHashes":[]}