React로 웹사이트 만들어보기 create-react-app

react를 사용하여 웹사이트를 한번 만들어 보려 합니다.

그 전에 필요한 것은

1. node.js

2. visual code

두가지입니다.

 

node.js 설치하는 법은 매우 간단합니다.

구글에 node.js를 검색하면 나오는 nodejs의 공식 사이트의 화면에서(nodejs.org/ko/)

nodejs공식 사이트

가장 최신 버전 또는 안정된 버전을 다운 받으면 됩니다. 

 

제대로 설치가 됐는지 확인 하는 방법은 cmd창을 켜서 node -v를 입력해보면 설치하신 버전을 확인하실 수 있습니다.

버전확인

비쥬얼 코드도 마찬가지로 구글에 검색하여 공식사이트를 통해 설치하시면 됩니다.(code.visualstudio.com/Download)

 

visualcode 공식홈페이지

 

 

자 ! 이제 모든 준비를 마쳤습니다. 

그러면 모두 cmd창을 켜서 자신이 프로젝트를 생성할 파일 위치에 이동한 후에 

명령어 "npm create-react-app 프로젝트명" 또는 "npx create-react-app 프로젝트명"을 입력하시면 끝입니다!

정말 간단하죠 ??

 

create-react-app

설치가 완료됐다면 npm start를 하면 react로 만들어진 웹이 localhost:3000번으로 열릴 것입니다.

npm start

http://localhost:3000/

여기서 웹사이트를 바꾸시고 싶다면 비쥬얼 코드를 키셔서 App.js를 수정하시면 됩니다.

 

오늘은 간단하게 "혁이는 코딩 중..."만 출력해보도록 하겠습니다.

변경 전 App.js

변경 후 App.js

변경 후 http://localhost:3000/

이렇게 리턴안에 있는 div와 같은 html 태그 안의 것들을 바꿔서 웹사이트를 변경할 수 있습니다.

 

 

 

다음에는 html css도 다루는 방법을 올릴 예정이니 많이 들려주세요 ㅎㅎ