[노마드코더 - ReactJS로 영화 웹 서비스 만들기] #5 Create React App

#5.0 Introduction

create-react-app은 리액트 어플리케이션을 만드는 최고의 방법이다. 많은 스크립트들과, pre-configuration을 준비해두었기 때문!
index.js파일에서 ReactDom을 import하고, rendering한다. 내부에 있는 App은 function component다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• nodeJs로 작업하고 있기 때문에, 더 organize하게 구성할 수 있다.
• 한 파일 당 한 컴포넌트를 가지고 있다.

#5.1 Tour of CRA

파일명에 .module.css 확장자를 달고 있으면 create-react-app은 css코드를 javascript object형태로 바꾸어준다.
같은 class명을 사용해도, rendering할 때 class명이 랜덤하게 달라지도록 만들어준다!

// Button.module.css
.btn {
    color: white;
    background-color: tomato;
}

// Button.js
import PropTypes from "prop-types";
import styles from "./Button.module.css"
function Button({text}) {
    return <button className={styles.btn}>{text}</button>; 
}

Button.propTypes = {
    text: PropTypes.string.isRequired,
}
  
export default Button;