Hello World

설치 후엔 역시 Hello World 찍어줘야져!.

우선 3000번 띄우기까지 성공 했으니 index.js로 가서 

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

추가후 저장 해주면 정말 브라우저를 새로고침 할 필요 없이 바로 바뀌는 모습 볼 수 있습니다. 렌더링.. 쩔..

(이래서 이름이 react인가..)

개발자 도구로 element를 상세히 보면 id명이 root인 div안에  <h1>Hello, world!</h1>가 들어가 있는게 보인다는.

여기서.. <h1>Hello, world!</h1> 뒤에 , 가 추가 된다는거.. 잊지마시길...

왜 안되나..? 했더니 , 를 빼먹어서 였다는...

./src/index.js
Syntax error: Unexpected token, expected , (12:2)

  10 | ReactDOM.render(
  11 |   <h1>Hello, world!</h1>
> 12 |   document.getElementById('root')
     |   ^
  13 | );

이런 메시지가 보인다면.. 콤마 까먹은 것이에요.

Syntax erro.. 즉 문법적 오류가 있다는거

콤마 하나딱 찍고 저장해주는 순간.. 브라우저만 확인함 바로 바뀐다.. 우왕..

즉각 반응 되는 react!

지인들이 진작부터 추천 했던 React맛보기 시작해보려 한다.

이전엔 윈도.. 써서.. 뭐 하나 설치할때마다.. 1시간 걸려 했는데..

역시 mac.. :0

리엑트 에선 codepen으로 보기 편하게 해두어서 따로 설치할 필요가 없다.

(리엑트 맛보기 원하면 CodePen쓰라고 첫줄 부터 나온다.)

허나. 나는 옛날 사람.. 직접 코드를 손으로 한땀 한땀 치는 것과 기억력에 큰 차이가 있고..

삽질할 수록 더 기억이 나서.. 

터미널 띄워서.. installation

https://reactjs.org/docs/installation.html

Creating a New Application

여기서 설치 전에 앞서 컴퓨터 환경 체크가 필요.

터미널 띄워서 npm -v하면 현재 버전 나오니 그에 따라.. 설치하면된다.

나는 버전이 낮아서 npm업그레이드 하고 >_<

npx create-react-app my-app

cd my-app
npm start

이렇게 해주었다.

터미널에 뜬 메시지

YAY 설치 완료와 동시에 브라우저가 띠용용 뜬다. 

설치는 완료 된듯

물론 CDN 사용도 가능.

이건 다 페이지 참고.

설치 했으니.. 이제 반은(?) 했다고 믿으며..