react学習(二)

JSX基本文法
元素の属性
クラスの属性をクラスNameに変更しました.for属性をhtml Forに変更します.
Javascript属性表現
属性値を式に使うには、{}を''に置き換えるだけでいいです.
HTML変換
Reactは、すべてのDOMに表示する文字列を変換し、XSSを防止します.したがって、JSXには変換後の実体文字が含まれている場合、例えば© 最後にDOMに行ったら正しく表示されません.Reactは自動的に©の特殊文字が変換されました.いくつかの解決方法があります.

直接UTF-8文字を使う©;

は、対応する文字のUnicode符号化クエリ符号化を使用する.

配列を用いて{'cc'を組み立て、©, '2015'};

元のHTML

を直接挿入します.
また、ReactはdangerouslySetInnersのプロパティを提供します.その名の通り、React変換記号を避ける役割を果たしていますが、必要と判断された場合に使用できます.
ReactとWeb Components
Reactコンポーネントの構築方法
React.create Class

const Button = React.createClass({
    getDefaultProps() {
        return {
            color: 'blue',
            text: 'confirm'
        };
    },
    
    render() {
        const {color, text} = this.props;
        
        return (
            
                {text}
            
        );
    }
});

ES 6 clases

import React, {Component} from 'react';

class Button extends Component {
    constructor(props) {
        super(props);
    }
    
    static defaultProps = {
        color: 'blue',
        text: 'Confirm'
    }
    
    render() {
        return (
                
                    {text}
                
         );
    }
}

Reactデータストリーム
stateとpropsはReactコンポーネントの中で最も重要な概念です.トップレベルのコンポーネントがpropsを初期化すると、Reactは下に向かってツリー全体を巡回し、関連するすべてのサブコンポーネントをレンダリングすることを再試行する.stateはコンポーネントごとに自分の内部の状態だけに関心を持ち、これらの状態はコンポーネント内でしか変えられない.コンポーネントを関数として見ると、パラメータとしてpropsを受け入れ、内部はstateを関数とする内部パラメータで、Virtual DOMを返して実現します.