mac React 개발환경 설정

1. Node.js 설치

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
nvm install --lts

npm --version
6.4.1

2. Yarn 설치

brew install yarn

3. Visual Studio Code 설치(IDE) 

        https://code.visualstudio.com/

4. create-react-app 설치 및 사용

리액트 프로젝트를 쉽게 만들어 주는 도구

- 설치 

yarn global add create-react-app

yarn global v1.12.1

[1/4] 🔍  Resolving packages...

[2/4] 🚚  Fetching packages...

[3/4] 🔗  Linking dependencies...

[4/4] 📃  Building fresh packages...

success Installed "create-react-app@2.1.1" with binaries:

      - create-react-app

✨  Done in 1.33s.

SANGui-MacBook-Pro:~ fsec$ 

 

- 프로젝트 만들기

SANGui-MacBook-Pro:~ fsec$ create-react-app hello-react

Creating a new React app in /Users/fsec/hello-react.

Installing packages. This might take a couple of minutes.

Installing react, react-dom, and react-scripts...

yarn add v1.12.1

[1/4] 🔍  Resolving packages...

[2/4] 🚚  Fetching packages...

[3/4] 🔗  Linking dependencies...

[4/4] 📃  Building fresh packages...

success Saved lockfile.

success Saved 6 new dependencies.

info Direct dependencies

├─ react-dom@16.6.0

├─ react-scripts@2.1.1

└─ react@16.6.0

info All dependencies

├─ babel-preset-react-app@6.1.0

├─ react-dev-utils@6.1.1

├─ react-dom@16.6.0

├─ react-error-overlay@5.1.0

├─ react-scripts@2.1.1

└─ react@16.6.0

✨  Done in 31.70s.

Initialized a git repository.

Success! Created hello-react at /Users/fsec/hello-react

Inside that directory, you can run several commands:

  yarn start

    Starts the development server.

  yarn build

    Bundles the app into static files for production.

  yarn test

    Starts the test runner.

  yarn 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 hello-react

  yarn start

Happy hacking!

SANGui-MacBook-Pro:~ fsec$ 

- 생성된 프로젝트 실행

cd hello-react
yarn start

- 실행화면