React - 입문 기록 1

node.js 사전 설치가 필요하며

class가 아닌 function 위주로 진행할 예정

 

작업을 진행할 폴더 생성 

이때 폴더명이 'react'일 경우 오동작 가능성이 있으니 지양할것

 

터미널에서 신규 리액트 앱 생성 명령어 입력

$ npx create-react-app .
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:\Users\admin\OneDrive\바탕 화면\react-app.

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


added 1462 packages in 2m

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

Installing template dependencies using npm...

added 69 packages, and changed 1 package in 13s

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


removed 1 package, and audited 1531 packages in 2s

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

8 vulnerabilities (2 moderate, 6 high)

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

Run `npm audit` for details.

Success! Created react-app at C:\Users\admin\OneDrive\바탕 화면\react-app
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 C:\Users\admin\OneDrive\바탕 화면\react-app
  npm start

Happy hacking!

 

작업 환경 설정 완료

 

 

터미널에서 리액트 명령어 입력

$ npm start

Compiled successfully!

You can now view react-app in the browser.       

  http://localhost:3000

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

webpack compiled successfully

 

브라우저에 리액트 기본 페이지가 뜨며 컴파일 완료 메세지 출력

 

만약 해당 서버(혹은 컴퓨터)에서 포트 3000을 이미 쓰고있다면

3000외 다른 포트를 사용해서 리액트를 가동시키겠냐는 메세지가 출력되니

잘 읽어보고 확인할 것