기본 JSX 문법

App.js

import "./App.css";

function App() {
  const name = "유석현";
  const list1 = ["HTML", "CSS", "JavaScript"];
  const list2 = [<li>hello</li>, <li>World</li>];
  const list3 = [<h2>hello</h2>, <h1>World</h1>];
  const list4 = [<a>hello</a>, <a>World</a>];

  return (
    // JSX 문법(html이 아님)
    // 1. 컴포넌트(함수)는 하나의 태그만 return 해야함(<div>로 감싸도 되고 빈 태그 <>로 감싸도됨)
    <>
      {/* 2. html처럼 태그를 그대로 사용할 수 있음} */}
      <h1>React Start!</h1>
      <hr></hr>

      {/* 3. html태그 안에서 자바스크립트 문법을 사용할 때는 중괄호{}로 감싸줘야함 */}
      <h2>안녕하세요, {name}입니다</h2>
      <hr></hr>

      {/* 4. class가 아니라 className을 사용 */}
      <h3 className="test">className</h3>

      <hr></hr>

      {/* 5. 배열 안에 있는 각 요소들은 실제 요소처럼 렌더링됨 */}
      <h3>array test 1</h3>
      <ul>
        {list1.map((item) => {
          return <li>{item}</li>;
        })}
      </ul>
      <hr></hr>

      <h3>array test 2</h3>
      <ol>{list2}</ol>
      <hr></hr>

      <h3>array test 3</h3>
      {list3}
      <hr></hr>

      <h3>array test 4</h3>
      {list4}
      <hr></hr>
    </>
  );
}

export default App;

App.css

.test {
  color: tomato;
}

View