0.create-react-app로 리액트 시작하기

🔶 cra

create-react-app 을 설치하기 이전엔 이렇게 필요한 라이브러리를 하나하나 걸어줬어야 했음.
그러나 cra를 설치하면 이 모든 라이브러리가 한번에 깔리고, 그냥 코드만 치면 되게됨!

// 1. react dom : 모든 react요소들을 html 바디에 두도록 함
// 리액트 코드를 실제 HTML로 렌더링 하기 위해 사용하는 도구 
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

// 2. react js : interactive한 ui를 만들게 함. 이벤트 같은 작동 가능케 함 
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>

// jsx : 자바스크립트를 확장한 문법. html 형식처럼 씀
// 3.babel : 트랜스파일러. JSX를 브라우저가 온전히 이해하지 못하므로 오리지날 react코드로 이해할 수 있게 변환해줌
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">
</script>

• proptype은 따로 설치해줘야 함.
  prop-types : prop의 타입을 지정할 수 있음

➜  react_practice0 git:(master) ✗  npm i prop-types 

🔶 설치방법

(참고 : https://create-react-app.dev/docs/getting-started)

1. node js 깔려있는지 확인

node -v

2. npx 깔려있는지 확인

➜  practice-react git:(master) ✗ npx

Entering npm script environment at location:
/Users/jyeoni/React/practice-react0
Type 'exit' or ^D when finished

sh-3.2$ exit
exit

3. 새로운 react 폴더 생성

➜  practice-react git:(master) ✗ npx create-react-app react_practice0

4. 실행

: npm run start 또는 npm start

5. proptype은 따로 설치하기

prop-types : prop의 타입을 지정할 수 있음

➜  react_practice0 git:(master) ✗  npm i prop-types 

6.react-router-dom 설치

npm i react-router-dom

7. styled components 설치

npm install styled-components

🔶 생성파일 설명

※ 다른 사람 포스팅 내용 참조하기

• https://dev-yakuza.posstree.com/ko/react/create-react-app/start/

• https://velog.io/@devmoonsh/React-CRA-Create-React-App#3-2-cra-%EA%B8%B0%EB%B3%B8-%ED%8F%B4%EB%8D%94-%EB%B0%8F-%ED%8C%8C%EC%9D%BC-%EA%B5%AC%EC%84%B1

• src/index.js
  : 우리가 개발한 React 프로젝트를 index.html 파일에 표시하기 위한 파일
  : index.js에 연결된 모든 자바스크립트 파일과 css 파일은 src 폴더 밑에 있어야 한다.