[React] JSX 코드 작성

 

✔  create-react-app 

TERMINAL에 'npx create-react-app my-app' 을 입력한다.

완료되면 cd my-app 을 통해 my-app 안으로 들어간 다음, npm start 를 입력하여 시작한다.

 

 

✔  my-app  >  src  >  chapter_03  >  Book.jsx  :  JSX 파일 만들기  

import React from "react";

function Book(props) {
    return (
        <div>
            <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
            <h2>{`이 책은 총 ${props.numOfPage}페이지로 이루어져 있습니다.`}</h2>
        </div>
    );

}

export default Book;

Book.jsx

 

 

✔ my-app  >  src  >  chapter_03  >  Library.jsx  :  Book 컴포넌트를 사용하는 상위 컴포넌트 만들기

import React from "react";
import Book from "./Book";

function Library(props) {
    return (
        <div>
            <Book name="처음 만난 파이썬" numOfPage={300} />
            <Book name="처음 만난 AWS" numOfPage={400} />
            <Book name="처음 만난 리액트" numOfPage={500} />
        </div>
    );
}

export default Library;

Library.jsx

 

 

✔  만든 코드를 실제로 화면에 랜더링하기 : index.js 파일 수정

위와 같이 수정한 후에, 상단의 terminal 메뉴에서 new terminal 을 누른다.

그 다음, npm start 명령어를 입력한다.

 

좌자잔