create-react-app 명령 사용

※주의 사항 : 사전에 node.js를 설치하십시오.

아직 설치되어 있지 않은 분은 여기에서!
→ node.js

1. 터미널에서 명령 실행

① "ls"명령을 입력하여 디렉토리가 이미 존재하는지 확인합니다.
예)react-directory(좋아하는 이름)를 디렉토리명으로 한다.

② "npx create-react-app react-directory"를 입력합니다.

komorioBookpuro:~ komorishuhei$ npx create-react-app react-directory
npx: 99個のパッケージを5.733秒でインストールしました。

Creating a new React app in /Users/komorishuhei/reac-directory.

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

2. 실행 결과 확인

실행이 완료되면 "ls"명령을 입력하여 "react-directory"가 실행 중인지 확인합니다.

Success! Created react-directory at /Users/komorishuhei/react-directory
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 react-directory
  npm start

Happy hacking!

3.package.json 확인

①다운로드된 디렉토리에 package.json이 있는지 확인합니다.


②package.json의 내용을 에디터로 확인합니다.

package.json

{
  "name": "react-directory",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

4. "npm start"로 React 앱 시작

편집기에서 "npm start"를 입력하여 URL을 출력합니다.

Compiled successfully!

You can now view project in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://

Note that the development build is not optimized.
To create a production build, use npm run build.

5.환경 구축 성공

편집기에서 출력된 URL을 클릭하여 이미지처럼 보이면 성공입니다.
수고하셨습니다!