react 시작하기

1. node.js 설치 ( node.js 설치 사이트에서 LTS 버전으로 설치!)

-> node -v 로 설치 및 설치 버전 확인

-> npm은 node.js를 설치하면 자동으로 설치됩니다. (npm -v로 설치 및 버전 확인)

 

2. react 작업할 프로젝트 경로 설정

-> 저는 C드라이브 경로에 따로 추가했습니다. (C:\study\ReactLecture)

 

3. react 설치

-> npx create-react-app 프로젝트명 (npx는 npm을 설치하면 사용하실 수 있습니다.)

-> 예시) npx create-react-app project01 (project01은 프로젝트명입니다.)

 

PS C:\study\ReactLecture> npx create-react-app project01
Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in C:\study\ReactLecture\project01.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1419 packages in 34s

233 packages are looking for funding
  run `npm fund` for details
Git repo not initialized Error: Command failed: git --version
    at checkExecSyncError (node:child_process:885:11)
    at execSync (node:child_process:957:15)
    at tryGitInit (C:\study\ReactLecture\project01\node_modules\react-scripts\scripts\init.js:46:5)
    at module.exports (C:\study\ReactLecture\project01\node_modules\react-scripts\scripts\init.js:276:7)
    at [eval]:3:14
    at Script.runInThisContext (node:vm:129:12)
    at Object.runInThisContext (node:vm:307:38)
    at node:internal/process/execution:79:19
    at [eval]-wrapper:6:22 {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 20076,
  stdout: null,
  stderr: null
}

Installing template dependencies using npm...

added 62 packages, and changed 1 package in 4s

233 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1481 packages in 2s

233 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Success! Created project01 at C:\study\ReactLecture\project01
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd project01
  npm start

Happy hacking!
PS C:\study\ReactLecture>

react 설치가 끝나면 위와 같이 나오고, 

 

cd project01

npm start

 

를 하라고 나온다.

 

위 명령어를 실행하면

 

localhost:3000이 실행된다.

 

이 화면이 나오면 설치가 잘 된 것이다 ㅎㅎ