create-react-app는 react에서 제공하는 패키지이다

npx create-react-app [folder_name]

위와 같이 입력하면 해당 폴더에 react환경이 만들어진다. 또한 리렌더링을 안해도 자동으로 서버를 만들어주고 자동으로 프로그램을 실행 시켜준다.

react를 만들엇으면 index.js에서 react모듈과 랜더링을 제외한 모든걸 지우고 시작한다.메ㅔ

그리고 app.js에가서 div를 추가하고 그 안에 h1을 넣는다.

create react app을 작업할때 css작업을 선택할 수 있다. 하나는 css파일을 만드는것이다. 작성한 css를 랜더링하는 js에가서 import하는것이다.

다른하나는 JSX에다 style을 적용시키는 방법이다. 하지만 이 둘은 비효율적이고 원하는 방법으로 스타일을 컨트롤 할 수 없다.즉, 개별로 css를 적용할 수 없다. 그래서 더 좋은 방법이 css 파일 이름을 .module.css로 바꾸고 그 안에다 작성한다.

import PropTypes from "prop-types";
import styles from "./Button.module.css";
function Button({ pText }) {
  return <button className={styles.btn}>{pText}</button>;
}
Button.prototype = {
  pText: PropTypes.string.isRequired,
};
export default Button;

./Button.module.css안에 작성된 스타일을 위와 같이 작성해서 적용 시킬 수 있다.

create-react-app은 css를 js 오브젝트로 변화시켜주고 우린 변환된 스타일을 사용할 수 있게 돈다. 그리고 변환된 html을 보면 임의로 작명된 클래스 이름이 적용된것을 볼 수 있다. 즉, 우리가 일일이 html class를 신경안쓰고 react에 썼던 클래스 요소만 잘 사용하기만 하면 된다는 소리가 된다.

js에서도 propType을 사용하기위해 npm i prop-types를 설치한다.