5-3. JSX

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

export default MyHeader;

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;

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;

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>
  );