React(props)

コンポーネントの属性をまとめて保管するためのもので、値は取り出せるが変更することはできません。

親コンポーネントから子コンポーネントに値を渡したいときにpropsを使うことで可能になります。
App.js(親コンポーネント)から引数を渡してBasic1.js(子コンポーネント)で引数にpropsを記述し、カーリーブラケットで{props.属性}表示させることができます。

propsはコンポーネントに用意されているプロパティ。コンポーネントの属性情報をまとめたオブジェクトが設定されており、このpropsから必要な値を取り出して利用することでコンポーネントから値を受け取ることができる。

const Basic1 = (props) => {
    return (
        <div>
            <h1>Hello{props.name}</h1>
        </div>
    )
}

this.props

this.props.contentはこのコンポーネント自身のpropsプロパティ内にあるcontentという値をはめ込むもの
{}で囲われた部分はJavaScriptの値を指定
JSXではタグの中にJavaScriptの変数やプロパティといった値を直接書き込むことができる

contentという属性として用意してある値がそのまま表示されている

render:function(){
  return(
  <p>{this.props.content}</p>
  );
}
});

ReactDOM.render(
  <MyComponent content="それがcontentの値です"/>
  document.getElementById('msg')
);

{{}}という記述は{}というJavaScriptの値が変数などを記述するブレース記号の中に{color: , background: }というオブジェクトのリテラルが書かれている

render:function(){
  return(
  <p style={{color:this.props.styleColor,background:this.props.styleBg,padding:this.props.stylePd}}>{this.props.content}</p>

ReactDOM.render(
  <MyComponent styleColor="white" styleBg="red" stylePd="10px" content="これがコンテンツです"/>
);