깃허브 홈페이지 만들기 (4)

리액트 관련해서 설치를 해볼것이다

 

 

 

1. 노드 설치

https://nodejs.org/en

 

체크 X

 

설치해주면 된다

node를 깔면 cmp도 같이 깔린다

 

node -v
npm -v

터미널에서 이렇게 치면

 

버전을 확인 할 수 있다

 

그리고 이제 초기설정을 하면 된다

npm init -y 
npm install babel-cli@6 babel-preset-react-app@3

 

만약에 에러가 뜬다!!!!

그러면 cmd를 관리자 권한으로 실행하면 된다...

 

npm init -y : 해당 폴더에 새로운 파일 'package.json' 생서된다 이건 node의 기본 정보 담고있는 중요한 파일

babel은 리액트와 호환성 때문에 필수적이다

 

2. 리액트 설치

이제 진짜 리액트를 설치할 것이다

폴더를 하나 만들고

shift+우클릭 하면 powershell이 뜨는데 거기서 작업을 하면 된다

 

npx create-react-app blog
cd blog
npm start

 

나는 블로그를 만들 것이기 때문에 blog라는 이름으로 지정했다

blog 폴더에서 npm start를 했을 때 브라우져로 리액트 화면이 뜨면 성공이다

npm start는 사이트 미리보기이다

 

 

vscode에 들어가면 내가 만든 blog가 뜬다

src 폴더 안에 App.js가 메인 페이지니까 여기에 코드 짜면 된다