【プログラミング】動画教材の効果的な使い方 →「２周半する」

// Import the React and ReactDOM libraries
// Reactを使用する際には、最初にnodeモジュールから下記を取得する
import React from 'react';
import ReactDOM from 'react-dom';

// 関数を設定することで、コンポーネントの中でも使用することができる
// JSの記法やルールがそのままJSXでも使用できることが多い

// function getButtonText() {
// return 'Click on me!';
// }

// Create a react component
const App = function() {

// JSXではJSオブジェクトを属性として表示できない
const buttonText = {text: 'hi there!'};
const enterName = 'Enter Name:';

// JSXを記述する際は、誤作動を防ぐため、最初のタグはreturnの直後に配置する
// returnの後に改行を入れてしまうと「何も返さない」というコードとして読み取られる
// 慣例として、returnの背後には()を起き、その中にJSXを書くことが多い
return (
  <div>
    {/* オブジェクト志向との混同を防ぐため、classとclassNameと使い分けている
    forも同様の理由で'htmlFor'という公文で表現する（ループのforとの使い分け） */}
    <label className='label' htmlFor='name'>
      {enterName}
    </label>
    <input id='name' type='text' />
    {/* JSXでは、styleの書き方がHTMLと異なるので注意が必要
    JSXは、JSに準拠しているので、JSのオブジェクト的な書き方になる */}
    <button style={{backgroundColor: 'blue', color: 'white',}}>
      {buttonText.text}
    </button>
  </div>
)};


// Take the react component and show it on the screen
// HTMLファイルのidを取得して、レンダリングする
ReactDOM.render(
  <App />,
  document.querySelector('#root')
);