React チュートリアル
Reactを使い始める

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript
サーチ…


備考

Reactは、宣言的なコンポーネントベースのJavaScriptライブラリであり、ユーザーインターフェイスの作成に使用されます。

ReactのMVCフレームワークのような機能を実現するために、開発者はFluxフレーバー、例えばReduxと組み合わせて使用​​します。

バージョン

バージョン発売日
0.3.0 2013-05-29
0.4.0 2013-07-17
0.5.0 2013年10月16日
0.8.0 2013-12-19
0.9.0 2014-02-20
0.10.0 2014-03-21
0.11.0 2014-07-17
0.12.0 2014-10-28
0.13.0 2015-03-10
0.14.0 2015-10-07
15.0.0 2016-04-07
15.1.0 2016年5月20日
15.2.0 2016-07-01
15.2.1 2016年7月8日
15.3.0 2016-07-29
15.3.1 2016-08-19
15.3.2 2016-09-19
15.4.0 2016-11-16
15.4.1 2016-11-23
15.4.2 2017-01-06
15.5.0 2017-04-07
15.6.0 2017-06-13

インストールまたはセットアップ

ReactJSは、任意のHTMLページに含めることができる単一のファイルreact-<version>.js含まれるJavaScriptライブラリです。人々はまた、通常、React DOMライブラリreact-dom-<version>.jsをメインのReactファイルとともにインストールします。

基本的なインクルージョン 

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script type="text/javascript">
        // Use react JavaScript code here or in a separate file
    </script>
    </body>
</html>

JavaScriptファイルを入手するには、公式のReactドキュメントのインストールページにアクセスしてください 。

ReactはJSX構文もサポートしています 。 JSXはFacebookによって作成された拡張機能で、JavaScriptにXML構文を追加しています。 JSXを使用するには、JSXをJavascriptコードに変換するために、Babelライブラリを組み込み、 <script type="text/javascript">を<script type="text/babel">に変更する必要があります。 

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
    <script type="text/babel">
        // Use react JSX code here or in a separate file
    </script>
    </body>
</html>

npmでインストールする

次のようにしてnpmを使ってReactをインストールすることもできます：

npm install --save react react-dom

JavaScriptプロジェクトでReactを使用するには、次の手順を実行します。 

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);

糸を使ってインストールする

FacebookはYarnという独自のパッケージマネージャをリリースしました。これはReactのインストールにも使用できます。 Yarnをインストールしたら、次のコマンドを実行するだけです： 

yarn add react react-dom

Reactをnpm経由でインストールした場合とまったく同じ方法で、プロジェクトでReactを使用することができます。

Hello Worldコンポーネント

Reactコンポーネントは、ベースのReact.Componentクラスを拡張するES6クラスとして定義できます。最小限のフォームでは、コンポーネントは、コンポーネントがDOMにレンダリングrender方法を指定renderメソッドを定義する必要があります。 renderメソッドはReactノードを返します。これは、JSX構文を使用してHTMLのようなタグとして定義できます。次の例は、最小限のComponentを定義する方法を示しています。 

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld

コンポーネントは、 props受け取ることもできます。これらは、コンポーネント自身が知ることができない値を指定するために、親によって渡されるプロパティです。プロパティには、特定のイベントが発生した後にコンポーネントが呼び出すことのできる関数を含めることもできます。たとえば、ボタンがそのonClickプロパティの関数を受け取り、クリックされるたびに呼び出すことができます。コンポーネントを記述する場合、そのprops介してアクセスすることができるprops部品自体上のオブジェクト。 

import React from 'react'

class Hello extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>
    }
}

export default Hello

上の例は、コンポーネントが親によってname propに渡された任意の文字列をレンダリングする方法を示しています。コンポーネントは受け取った小道具を変更できないことに注意してください。

コンポーネントは、 ReactDOM.renderを使用して、他のコンポーネント内でレンダリングすることも、 ReactDOM.renderをReactDOM.renderするコンポーネントとDOMノードの両方を提供することもできます。 

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))

ここまでで、基本的なコンポーネントを作成し、 propsを受け入れる方法を知っています。これをさらに進め、 stateを導入しましょう。

デモのために、Hello Worldアプリケーションを作成しましょう。フルネームが与えられている場合は最初の名前のみを表示してください。 

import React from 'react'

class Hello extends React.Component {

    constructor(props){

        //Since we are extending the default constructor,
        //handle default activities first.
        super(props);

        //Extract the first-name from the prop
        let firstName = this.props.name.split(" ")[0];
        
        //In the constructor, feel free to modify the
        //state property on the current context.
        this.state = {
            name: firstName
        }

    } //Look maa, no comma required in JSX based class defs!

    render() {
        return <h1>Hello, {this.state.name}!</h1>
    }
}

export default Hello

注：各コンポーネントは独自の状態を持つことができます。または、そのコンポーネントが親の状態を小道具として受け入れることができます。

Codepen例へのリンク。

こんにちは世界

JSXなし

ReactのメインAPIを使用してReact要素を作成し、React DOM APIを使用してReact要素をブラウザに表示する基本的な例を次に示します。 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

JSXで

文字列からReact要素を作成する代わりに、JSX（JavaScriptでXML構文を追加するためにFacebookによって作成されたJavascript拡張機能）を使用することができます。これにより、 

var rElement = React.createElement('h1', null, 'Hello, world!');

同等のものとして（HTMLに精通した人にとっては読みやすい） 

var rElement = <h1>Hello, world!</h1>;

JSXを含むコードは、 <script type="text/babel">タグで囲む必要があり<script type="text/babel"> 。このタグ内のすべては、Babelライブラリ（Reactライブラリに加えて必要なライブラリ）を使用してプレーンなJavascriptに変換されます。

最後に、上記の例は次のようになります。 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>
    <!-- Include the Babel library -->
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

  </head>
  <body>
   <div id="example"></div>

    <script type="text/babel">

      // create a React element rElement using JSX
      var rElement = <h1>Hello, world!</h1>;

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

ReactJSとは何ですか？

ReactJSはオープンソースのコンポーネントベースのフロントエンドライブラリで、アプリケーションのビューレイヤのみを担当します。それはFacebookによって維持されています。

ReactJSは、仮想DOMベースのメカニズムを使用してHTML DOMのデータ（ビュー）を埋め込みます。仮想DOMは、毎回完全なDOMをリロードするのではなく、個々のDOM要素のみを変更するという事実を利用して高速に動作します

Reactアプリケーションは複数のコンポーネントで構成され 、それぞれが小さな再利用可能なHTMLを出力します。コンポーネントは他のコンポーネント内にネストすることができ、複雑なアプリケーションを単純なビルディングブロックから構築することができます。コンポーネントは内部状態を維持することもできます。たとえば、TabListコンポーネントには、現在開いているタブに対応する変数が格納されます。

Reactは、JSXというドメイン固有の言語を使ってコンポーネントを書くことができます。 JSXでは、JavaScriptイベントでミキシングしながら、HTMLを使用してコンポーネントを記述することができます。 Reactはこれを内部的に仮想DOMに変換し、最終的にHTMLを出力します。

Reactは、仮想DOMを利用して、コンポーネントの状態変化を迅速かつ自動的にHTMLアプリケーションのDOMに再レンダリングするために反応します。仮想DOMは、実際のDOMのメモリ内表現です。 Reactは、ブラウザーのDOMで直接処理するのではなく、仮想DOM内でほとんどの処理を行うことで、直ちに動作し、最後のレンダリングサイクルが発生してから変更されたコンポーネントの追加、更新、および削除のみを行います。

ステートレス関数を持つHello World

ステートレスコンポーネントは、機能プログラミングから彼らの哲学を得ています。これは次のことを意味します：関数は、与えられたものと同じものを常に返します。

例えば： 

const statelessSum = (a, b) => a + b;

let a = 0;
const statefulSum = () => a++;

上の例からわかるように、statelessSumは常にaとbと同じ値を返します。ただし、statefulSum関数はパラメータを指定しなくても同じ値を返しません。このタイプの関数の動作は、 副作用とも呼ばれます 。以来、コンポーネントはそれ以上の何かに影響します。

したがって、ステートレスコンポーネントは、 副作用がなく 、常に同じ動作を作成するため、より頻繁にステートレスコンポーネントを使用することをお勧めします。これは、あなたのアプリケーションであなたが後にしたいものです。なぜなら、変動する状態は、保守可能なプログラムの最悪のシナリオなのでです。

反応成分の最も基本的なタイプは、状態なしのものである。それらの小道具の純粋な機能であり、内部状態管理を必要としない反応コンポーネントは、単純なJavaScript関数として記述することができます。これらは、 Stateless Functional Componentsあると言われていStateless Functional Componentsなぜなら、これは、 stateを把握することなく、 props機能だけであるからです。

Stateless Functional Component概念を示す簡単な例を次に示しStateless Functional Component 。 

// In HTML
<div id="element"></div>

// In React
const MyComponent = props => {
    return <h1>Hello, {props.name}!</h1>;
};

ReactDOM.render(<MyComponent name="Arun" />, element);
// Will render <h1>Hello, Arun!</h1>

このコンポーネントが行うすべては、 name propを含むh1要素をレンダリングすることに注意してください。このコンポーネントは、どの状態も追跡しません。ここにES6の例もあります： 

import React from 'react'

const HelloWorld = props => (
    <h1>Hello, {props.name}!</h1>
)

HelloWorld.propTypes = {
    name: React.PropTypes.string.isRequired
}

export default HelloWorld

これらのコンポーネントは状態を管理するためにバッキングインスタンスを必要としないため、Reactは最適化の余地があります。実装はクリーンですが、ステートレスコンポーネントの最適化はまだ実装されていません 。

リアクションアプリケーションの作成

create-react-appはFacebookによって作成されたReactアプリの定型文生成ツールです。次のような最小限の設定で使いやすいように構成された開発環境を提供します。

  • ES6とJSXの移行
  • ホットモジュールリロードによるDevサーバ
  • コードlinting
  • CSS自動プレフィックス
  • JS、CSS、イメージバンドリング、およびソースマップによるスクリプトのビルド
  • Jestテストフレームワーク

インストール

まず、ノードパッケージマネージャ（npm）を使用してcreate-react-appをグローバルにインストールします。 

npm install -g create-react-app

次に、選択したディレクトリでジェネレータを実行します。 

create-react-app my-app

新しく作成されたディレクトリに移動し、開始スクリプトを実行します。 

cd my-app/
npm start

構成

create-react-appは、デフォルトで意図的に設定できません。 Sassなどのコンパイル済みCSS言語を使用するなど、デフォルト以外の使用が必要な場合は、ejectコマンドを使用できます。 

npm run eject

これにより、すべての構成ファイルを編集できます。注意：これは不可逆的なプロセスです。

代替案

代替反応の定型文は次のとおりです。

リアクションアプリケーションを構築する

プロダクション用のアプリケーションをビルドするには、次のコマンドを実行します

npm run build

再利用可能なコンポーネントを作成するための絶対的な基礎

コンポーネントと小道具

Reactはアプリケーションの視点にのみ関わっているため、Reactの開発の大部分はコンポーネントの作成です。コンポーネントは、アプリケーションのビューの一部を表します。 "Props"は単にJSXノードで使用される属性です（例： <SomeComponent someProp="some prop's value" /> ）。アプリケーションがコンポーネントとやりとりする主な方法です。上記のコードでは、SomeComponentの内部に、我々は、アクセスだろうthis.props値オブジェクトになり、 {someProp: "some prop's value"} 。

Reactコンポーネントをシンプルな関数と考えることは有益です。彼らは「小道具」の形で入力し、出力をマークアップとして生成します。多くのシンプルなコンポーネントはこれをさらに進化させ、「純粋な関数」を作ります。つまり、副作用を起こさず、冪等です（入力がある場合、コンポーネントは常に同じ出力を生成します）。この目標は、実際にコンポーネントを「クラス」ではなく関数として作成することによって正式に実施することができます。 Reactコンポーネントを作成する方法は3つあります。

  • 機能（「ステートレス」）コンポーネント 
const FirstComponent = props => (
    <div>{props.content}</div>
);
  • React.createClass（） 
const SecondComponent = React.createClass({
    render: function () {
        return (
            <div>{this.props.content}</div>
        );
    }
});
  • ES2015クラス 
class ThirdComponent extends React.Component {
    render() {
        return (
            <div>{this.props.content}</div>
        );
    }
}

これらのコンポーネントはまったく同じ方法で使用されます。 

const ParentComponent = function (props) {
    const someText = "FooBar";
    return (
        <FirstComponent content={someText} />
        <SecondComponent content={someText} />
        <ThirdComponent content={someText} />
    );
}

上記の例はすべて同じマークアップを生成します。

機能コンポーネントは、その内部に「状態」を持つことはできません。したがって、コンポーネントに状態が必要な場合は、クラスベースのコンポーネントに移動します。詳細については、「 コンポーネントの作成」を参照してください。

最後の注意として、反応小道具は、一度通過すると変更できません。つまり、コンポーネント内から変更することはできません。コンポーネントの親が小道具の値を変更した場合、Reactハンドルは古い小道具を新しいものに置き換え、コンポーネントは新しい値を使用して再レンダリングします。

小道具とコンポーネントとの関係については、 「ReactableとReusable Componentsで考える 」を参照してください。



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow