Web_React #14

5457 ワード
React web テキストリンク
210825
Web_React #14
  • JSXでJS
    • を使用
    import ReactDOM from 'react-dom';

const product = '맥북';

ReactDOM.render(
    <h1>나만의 {product} 주문하기</h1>,  
    document.getElementById('root')
);
    JSコードを活用するためには、中弓カバーでOKです.

    正常に動作
    変数製品の値を変更すると、異なる値を出力できます.
    import ReactDOM from 'react-dom';

const product = 'MacBook';

ReactDOM.render(
    <h1>나만의 {product} 주문하기</h1>,  
    document.getElementById('root')
);
    import ReactDOM from 'react-dom';

const product = 'MacBook';
const model = 'Air';
const item = product + model;

ReactDOM.render(
    <h1>나만의 {item} 주문하기</h1>,  
    document.getElementById('root')
);
    プラス記号演算も可能です.
    要素内でJSを使用することもできますが、属性値に対してカッコでJSを使用することもできます.
    import ReactDOM from 'react-dom';

const product = 'MacBook';
const model = 'Air';
const item = product + model;
const imageUrl = 
'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png';


ReactDOM.render(
    <>
      <h1>나만의 {item} 주문하기</h1>
      <img src={imageUrl} alt="제품 사진" />
    </>,  
    document.getElementById('root')
);

    なお、srcでは、画像アドレスは引用符ではなく中弧で囲まれている.
    eventhandlerのプロパティも同じです.
    import ReactDOM from 'react-dom';

const product = 'MacBook';
const model = 'Air';
const item = product + model;
const imageUrl = 
'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png';

function handleClick(){
  alert("곧 도착합니다!");
}

ReactDOM.render(
    <>
      <h1>나만의 {item} 주문하기</h1>
      <img src={imageUrl} alt="제품 사진" />
      <button onClick={handleClick}>확인</button>
    </>,  
    document.getElementById('root')
);
    イベント登録にはbuttonラベルにonClickプロパティを付与し、アークに関数名を追加できます.

    なお、中弧内ではJSの式しか使用できません.したがって、if文、for文、関数宣言などのJS文は使用できません.
    リファレンス
    https://www.codeit.kr/courses/react-frontend-development/topics/getting-started-with-react
    [プログラマアルゴリズム]最大数
    [TIL]20210623