react学習ノート1

学習ノートは阮一峰大神のreact教材から来て、対応コードgithub住所はここです.
react起源
ReactはFacebookの内部プロジェクトから起源しており、同社は市場上のすべてのJavaScript MVCフレームに不満があるので、自分でセットを書くことにしてInstagramのウェブサイトを構築する.作ってみたら、このセットがよく使われていることが分かりました.2013年5月にオープンしました.
基本概念
jsx
reactの中で重要な概念はJSX(JavaScript+XML)で、JSXはXMLに似ているように見えるJavaScript文法の拡張です.JavaScriptと互換性がないので、JSXを使用するすべてのScriptタグにtype="text/babel"を追加します.
jsxの利点:-JSXはJavaScriptコードをコンパイルした後に最適化されたからです.タイプは安全で、コンパイル中にエラーが発見されます.JSXを使ってテンプレートを作成するのはもっと簡単で速いです.
基本的な文法の規則-はhtmlのラベルに出会って<で始めて、htmlの規則の解析を使います-コードに出会って{で始めて、javascript規則で解析します.

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!div>
    })
  }
  div>,
  document.getElementById('example')
);

jsx文法飴の最適化

引用が存在しない字面量の対象時報に対して間違っています.

は、ある存在するオブジェクトを引用する存在しない方法について、エラーを報告したり、undefinedを表示したりしないで、何も表示しない

です.

は、存在する配列の存在しないインデックス値を引用するとき、エラーを報告しなくてもundefinedを表示しないで、何も表示しない

です.

var arr=[],
    obj={};

//empty   ，  
ReactDOM.render(
<div>{empty}div>,
document.getElementById('example')
);

//obj  ，obj.key   ，        
ReactDOM.render(
<div>{obj.key}div>,
document.getElementById('example')
);

//                           
//arr  ，arr[5]   ，        
ReactDOM.render(
<div>{arr[5]}div>,
document.getElementById('example')
);

Browser.js
jsxをjs標準文法に変換するのに使います.
react関連方法
ReactDOM.render()
React DOM.renderは、テンプレートをHTML言語に変換し、指定されたDOMノードを挿入するためのReactの最も基本的な方法である.最初のパラメータは、挿入するテンプレート-2番目のパラメータを指定してテンプレートの挿入位置を指定します.
例えば、以下のコードの意味はidがexampleのラベルにラベルテンプレートを挿入することです.

ReactDOM.render(
  <h1>Hello, world!h1>,
  document.getElementById('example')
);

テンプレートに行列を使う

var arr = [
<h1>Hello world!h1>,
<h2>React is awesomeh2>,
];
ReactDOM.render(
<div>{arr}div>,
document.getElementById('example')
);

React.creat Class()
React.create Class方法は、コンポーネントクラスを生成するために使用されます.Reactはコードをコンポーネントにパッケージし、通常のHTMLタグを挿入するようにウェブページにこのコンポーネントを挿入することができます.すべてのコンポーネントクラスは、コンポーネント-コンポーネントクラスの最初の文字を出力するために自分のレンダー方法が必要です.コンポーネントクラスはトップレベルのラベルしか持っていません.(以下のコードでは、this.props.nameを使用してコンポーネントクラスのname属性を取得しました)

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}h1>;
  }
});

ReactDOM.render(
//   
  "John" />,
  document.getElementById('example')
);

コンポーネントの属性を追加する時に注意してください.classはclass Nameに書きます.forはhttml Forと書きます.classとforはhtmlの保留字ですから.
this.props
this.propsオブジェクトの属性はコンポーネントの属性に対応しています.
this.props.Childrenは、構築されたすべてのサブノードを表しています.サブノードが存在しない場合、その値はundefinedであり、1つのサブノードのみの場合、その値は1つのオブジェクトとなり、サブノードが複数ある場合、その値は1つのアレイとなります.
以下のコードはNodesListの各サブノード要素の外にすべて1つのliタグをセットしています.

//    NotesList                 li      
var NotesList = React.createClass({
  render: function() 
    return (
      

      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}li>;
        })
      }
      </ol>
    );
  }
});

// NotesList           ，           body 
ReactDOM.render(
  
    hellospan>
    <span>worldspan>
  NotesList>,
  document.body
);

PropTypesとget Default Props
PropTypeは、コンポーネントクラスを生成する際に設定された属性で、属性が要求に合っているかどうかを検証します.デフォルトでは、コンポーネントの属性は任意の値を受け入れることができます.

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} h1>;
   }
});

以上のコードは制限されています.1.Mytitleコンポーネントはtitle属性があります.2.title属性値は必ず3.title属性の値は文字列でなければなりません.
get DefaultPropsは、現在のコンポーネントの下のすべての属性を設定するデフォルトの検証です.

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

  render: function() {
     return <h1> {this.props.title} h1>;
   }
});

END