JSX

15607 ワード
React JSX テキストリンク

JSX : javascript + xml


1.クローズルール

<div></div>または<image />(終了ラベルから)

2.構成部品を返すには、親が必要です。

function App() {
  return (
    <div className="App"> //div로 감쌌음
      <MyHeader />
      <header className="App-header">
        <h2>안녕 리액트</h2>
      </header>
      <MyFooter />
    </div>
  );
}
またはReact.Fragmentを使用
: React.分割を使用して内容を上のラベルに直接配置します.
import React from 'react'; //Fragment사용에 앞서 React불러와줌
function App() {
  return (
	<React.Fragment>
      <MyHeader />
      <header className="App-header">
        <h2>안녕 리액트</h2>
      </header>
      <MyFooter />
	</React.Fragment>
  );
}
React.Fragmentも面倒なら
空のラベルを追加しても同じ結果が得られます
function App() {
   return (
   <>
       <MyHeader />
       <header className="App-header">
         <h2>안녕 리액트</h2>
       </header>
       <MyFooter />
   </>
   );
 }

3.classの使い方


HTML =
class='' >
JSX =
className='' >

4. inline style


断面線コンポーネントワークスペースにスタイルを適用し、cssファイルを使用しない
(CamelCaseとして使用する必要があります)
function App() {
  const style = {
    App: {
      backgroundColor: 'black',
    },
    h2: {
      color: 'red',
    },
    bold_text: {
      color: 'green',
    },
  };

  return (
    <div style={style.App}>
      <MyHeader />
        <h2 style={style.h2}>안녕 리액트</h2>
        <b style={style.bold_text}>React.js</b>
      <MyFooter />
    </div>
  );
}

5.{変数/値/式}の使用


数値または文字のみ
[]、falseなどは使用できません
const name = '안녕리액트'
const func = () => {
	return 'func'
}
const number = 5;

  return (
    <div style={style.App}>
      <MyHeader />
        <h2>{name} : 변수사용 가능</h2>
      	<p>{1 + 2} : 계산식도 가능</p>
        <p>{func()} : 함수도 사용 가능</p>
      	<p>{number}는 {number % 2 === 0 ? '짝수' : '홀수'}</p>
      	// 5는 홀수
      <MyFooter />
    </div>
  );
}
공부하며 정리&기록하는 ._. 씅로그
[伯俊/Python 3]10844簡単な階段数
[白俊14890号]傾斜C++