단테의 연구실

1. 에러 내용

인접한 JSX 요소가  JSX fragment 인 <>  </> 으로  닫혀있어야만 해 

2. solve

before 

after 

3. matter 

 참고. 리액트 프로젝트를 하다가 App() 의 중괄호 부분이 빨간색이다면 

1. Ctrl + Shift + p를  동시에 눌르어 명려어  팔레트 창을 띄운다. 

2.  TypeScript: TS 서버 다시 시작을 다음 사진과 같은 명령어로 찾아주세요. 그리고 엔터 잊지 마세요 

3. 그래도 안된다면  VsCode 에디터를 닫고  다시 실행해주시면 됩니다.  다음과 같이  깨끗해집니다.

저는 일단 폴더를 만들게요
그리고, 리액트 공식사이트로 이동하겠습니다. 

참고 

https://reactjs-kr.firebaseapp.com/docs/installation.html

1.  npm 버전 확인하기 

참고. 비쥬얼 스튜디오 코드에서 터미널 열기 단축키 => Ctrl + ` (백틱)  눌러주기

# 버전 확인은 npm -v 
# 확인은 왜 하는 것일까? >>> 리액트를 한번에 설치가능하게 해주는 도구를 npm 버전 5.2.0+부터 이용이 가능해서

$ andante@andante-All-Series:~$ npm -v
10.5.0

2.  리액트 프로젝트 설치하기

# 자기 자신의 npm 버전에 따라 설치방법을 달리하세유 

# npm 버전 >=6 
npx create-react-app my-app

# npm 버전 < 6 
npm install -g create-react-app
create-react-app my-app

# 다음과 같은 답이 나오면 성공!!

andante@andante-All-Series:~$ npx create-react-app my-app

Creating a new React app in /home/andante/my-app.

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

(##################) ⠸ reify:@babel/code-frame: http fetch GET 200 https://registry.npmjs.org/@babel/code-frame

added 1476 packages in 2m

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

Initialized a git repository.

Installing template dependencies using npm...

added 67 packages, and changed 1 package in 12s

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


removed 1 package, and audited 1543 packages in 3s

262 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.

Created git commit.

Success! Created my-app at /home/andante/my-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 my-app
  npm start

Happy hacking!

설치시 다음과 같은 말이 나온다면  리액트 프로젝트를 실행하여도 좋다. 

3. 프로젝트 실행 

여기까지 하셨으면 우리는 리액트 개발환경을 구축한 것입니다. 고생하셨습니다. 

개발 서버를 종료하고 싶다면  Ctrl + C 해주세요~~~