[React] 리액트 앱 만들기 (create react app)

node js 설치

먼저, node js 설치가 필요함

콘솔 창에 node -v 를 입력해서 설치 여부를 확인할 수 있음

npx 를 입력해서 작동이 되는 지 확인

 

create-react-app

npm create-react-app 앱 이릅

 

혹시 아래와 같은 에러가 뜬다면,

You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1).
We no longer support global installation of Create React App.

- npm uninstall -g create-react-app
- yarn global remove create-react-app

둘 중 하나를 입력해서 제거한 후 다시 해보면 될 거다. (나는 두번째 커맨드를 입력했을 때 해결됨)

 

package.json

react-app이 만들어진 폴더로 들어가보면, package.json 파일을 확인할 수 있다.

이 파일에는 실행시킬 수 있는 script들이 들어있다.

터미널에서 start를 사용해서 개발용 서버(development server)를 만들 수 있다.

npm run
npm start

조금 기다리면 자동으로 브라우저가 열린다.

create-react-app을 사용해서 어플리케이션을 만들었을 때의 초기 버전

src 폴더

다시 폴더로 돌아가면, src 폴더를 확인할 수 있다.

여기에 우리의 모든 파일을 넣으면 된다.

기본적으로 들어있는 파일들 중에서, 가장 중요한 것은 index.js파일이다.

리액트는 이 index.js파일을 index.html과 이미 연결시켜두었다. (우리가 따로 연결 안해도 된다!)

 

app.js 파일에 대강 welcome이라고 써서 페이지를 확인해보면 잘 출력되는 것을 확인할 수 있다.

 

Ex) 함수 추가하기

1. 새로운 파일 만들기 함수.js

2. 함수.js 파일 하단에 export default 함수명 입력 : App.js에서 해당 함수를 가져올 수 있도록 함

3. App.js 파일 상단에 import 함수명 from './함수.js' 입력 : App.js에서 해당 함수 가져옴

 

위와 같은 방법으로 파일들을 추가할 수 있다.

 

---

새로고침 안해도 바로바로 적용되는 리액트 최고...✨

그리고 class 이름이 랜덤 부여된다 체고 .