[React] 1. Create React App

1. node js와 npm 설치 

Node.js (nodejs.org)

Node.js

cmd를 열고 

node -v

npx

실행. 잘 작동한다면 설치 완료 

 

2. my-frist-react-app

cmd에서

npx create-react-app 이름

을 해주면 react app이 자동으로 생성된다. 생성이 완료되면 vscode에서 열어준다. 

 

3. start

package.json에서 script-start 실행

또는 터미널에서 npm strat 실행

브라우저에서 나의 react app이 열린다. 

 

4. 컴포넌트 만들기

- 컴포넌트 하나마다 새로운 js file로 만들어주자. 

export default Button; // Button.js에서 export

import Button from "./Button"; // App.js에서 import

- creat react app에서는 vscode가 자동으로 컴포넌트가 필요한 props를 알려준다.(매우 편리)

- 그외에도 다양한 편리한 자동완성 기능이 있다. 

 

5. npm install prop-types

vscode의 터미널에 npm install prop-types같이 쳐주자. 

 

중요. divide and conquer

리엑트를 어떻게 활용하는가? divide and conquer!

 

6. 컴포넌트에 css 달아주기 (css module)

creat-react-app의 강력한 기능중 하나는 css를 javascript object로 가져와서 각각의 컴포넌트에 달아줄수 있다는 점이다. 모든 컴포넌트마다 각각 독립된 css를 달아줄수 있고 이때 className은 creat-react-app이 랜덤하게 정해준다.(className을 기억할 필요가 없어진다.) 

- Button.module.css 생성 

.btn {
    color: bisque;
    background-color: coral;
    border: 0px;
}

import styles from "./Button.module.css"; //css module 불러오기 

function Button({text}){
    return <button className={styles.btn}>{text}</button> 
    // styles object에서 css를 가지고 올수 있다. 
    // className은 React가 랜덤하게 붙여준다. 
};