React 入門道場　~JSX　基礎文法~

4322 ワード
初心者 React JSX JSX テキストリンク

はじめに

Reactを学習していてJSXについて理解が浅かったので今回簡単ににまとめてみました。

JSXって、そもそも何なのと思った人はこちらから参照ください。

JSX基礎文法　壱

①Reactライブラリをimportする

import React from 'react';

②return文の中がJSX構文

import React from 'react';

const BlueButton = () => {
   return (
    <button className={'btn-blue'}>
      Click me!
    </button>
  )
}

export default BlueButton;

基本的にはHTMLと同じ構文。class要素はclassNameに変わる
JSXの見た目はHTMLですが、実際Javascriptで注意が必要！！！！
classと記載してしまうとオブジェクトのclassと認識してしまうので、明示的にclassNameと分けるためにclassNameとついている。その後にクラス命を記載する必要がある。

JSX基礎文法　弍

import React from 'react';

const Thumbnail = () => {
   const caption = 'sample写真'
   const imagePath = '/img/sample.png'

   return (
　　　　　　　 <div>
      <p>{caption}</p>
      <img src={samplePath} alt={'sample写真'} />
    </div>
  )
}

export default Thumbnail;

1.キャメルケースで記述

imagePath

２.{}で変数を扱える

{}を使うとJavascriptの世界だと明示的に使用することができる。
const caption = 'sample写真'
Pタグで{caption}を使うと最終的な出力として「sample写真」の文章が出力される。

同様に、
<img src={}にsamplePathを渡すと/img/sample.pngが出力されます。

{　}をJSXの世界になる
3.閉じタグが必要

/>　閉じタグがないとエラーになるので記載するようにしましょう！