JSXにjavascriptを当てはめる。

初めに

• Progateで学習した内容をアウトプットしていき学習効率を上げていく目的で書いていきます。

流れ

• returnの外にjavascriptを記述。

• JSXにjavascripで定義されたものを表示

returnの外にjavascriptを記述。

import React from 'react';

class App extends React.Component {
  render() {

    const name ="にんじゃわんこ"

    const imgUrl ="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/ninjawanko.png"
    
    return (
      <div>
   
      </div>
    );
  }
}

export default App;

• const name = ”にんじゃわんこ”と記述することで定数nameを定義。

• const imgUrl を記述することで定数imgUrlを定義。

　* const imgUrl には画像を表示するためのURLが代入されている。

SXにjavascripで定義されたものを表示。

import React from 'react';

class App extends React.Component {
  render() {

    const name ="にんじゃわんこ"
    
   
    const imgUrl ="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/ninjawanko.png"
    
    return (
      <div>
      
        <h1>{name}</h1>
        

        <img src={imgUrl} />
        
      </div>
    );
  }
}

export default App;

• javascripで定義した定数を{}を使用してJSXで記述する。

• {name}と記述することでjavascriptで定義された定数nameをJSXに当てはめて表示させる。

• img src={imgUrl} と記述することでjavascriptで定義された定数imgUrlをJSXに当てはめて表示させる。

プレビュー

結語

• javascripで定義したものをJSXで表示させるには{定義名}とすることで定義できる。