🗓 進捗:2022.04.16

5-3. JSX

MyHeader,MyFooter jsファイル作成アプリケーション.jsから

を読み込む

MyHeader.js

const MyHeader = () => {
    return <header>헤더</header>
};

export default MyHeader;

App.js

import React from 'react';
import './App.css';

import MyHeader from './MyHeader';

function App() {
  let name = "seul";

  return (
    // <div className="App"> 
    // 아래의 Fragment 태그는 <> 이런 식으로 비워줘도 됨
    <React.Fragment> 
      <MyHeader/>
      <header className="App-header">
        <h2>안녕 리액트 {name}</h2>
      </header>
    </React.Fragment>
    // </div>
  );
}

export default App;

法案で遵守すべきいくつかのルール

クローズルール:開いているラベルがある場合は、閉じているラベルが存在する必要がある(従ってImage,brのようなラベルが開くと必ず閉じる→自動的に閉じるラベル)

.

トップレベルラベルルール:返されるコンポーネントにはトップレベルラベル(残りの部分をバンドルするか、React.Fragmentで包む必要がある)

が必要です.
装飾は

css

App.jsにインポートされたアプリケーション.cssに変更できます.
内線のスタイルを直接変えることができます

import React from 'react';
// import './App.css';

import MyHeader from './MyHeader';

function App() {
  let name = "seul";

  const style = {
    App : {
      backgroundColor: 'black',
    },
    h2 : {
      color: "red",
    },
    bold_text : {
      color: "green",
    },
  };

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

export default App;

中括弧内に配列、ブール値などを含めることはできません

String,int値

条件付きレンダリング:レンダリング時に3つの演算子で値を表すことができます

const number = 5;

  return (
    <div style={style.App}> 
      <MyHeader/>
      {/* <h2 style={style.h2}>안녕 리액트 {name}</h2> */}
      <h2 style={style.h2}>안녕 리액트</h2>
      <b style={style.bold_text}>
        {number}는 : {number % 2 === 0 ? "짝수" : "홀수"}
      </b>
    </div>
  );