*요약
npx serve로 창하나 켜놓고->헤드부분에 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 이거 추가->바디 부분<script type="text/javascript">를<script type="text/babel">로 바꿔주기
자 1일차에 했던 화면에서 부터 시작이다
이화면 부터 시작이다.
터미널에 npx serve 입력하고 localhost 부분을 클릭하여 창을 하나 켜놓자
이제 코드를 쓰고 여기서 변화를 확인할거다
키면 이런 하얀 화면일거다
자이제 코딩을 시작하자
기본 설정 일단 구글을 가서 babel을 검색하고 젤위에꺼 클릭
친절한 나는 오늘도 링크가 있다 https://babeljs.io/
영어지만 당황하지말고 (저번에 알려준 대충번역 하고 싶으면 우클릭 해서 한국어로 번역 누르면 된다 ) 가자
우측위 setup 클릭
여기왔으면 In the Browser 클릭
요기로 이동하면 script 부분 복사
혹시 모르니 여기 복사해놓을께 쓸사람은 복사해서 써줘
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
혹시모르니 사이트가서 맞나 확인하고 써줘 ㅎㅎ
링크(https://babeljs.io/setup#installation)
이제 다시 돌아가서 코드부분 중 헤드에 붙여 넣어
헤드(head)랑 바디(body) 가 어딘지 모르겠으면 저번 포스트 보면 헤드가 어딘지 빨간상자 해놨어
간단하게 설명하면 <head> 부터</head>사이가 헤드 <body>부터</body>사이가 바디
또이제 body 부분에
를
이제 바벨 설정 완료 그중 cdn을 이용한 바벨 설정 완료
cdn을 활용해 babel과 react를쓸수잇게 설정한거지
babel은 간단히 설명하면 문법에 맞게 고쳐주는거야 우리가 우리편하게 쓰면 바베일 알아서
어려운 문법에 맞게 고쳐줘 참 고마운 아이지 ㅎㅎ
react를 내용을 바꺼주고 babel 형식을 바꺼준다고 보면 편해
'React를 같이 배워보자' 카테고리의 다른 글
| React2일차-React 컴포넌트2 (0) | 2022.01.21 |
|---|---|
| React2일차-React 컴포넌트1 (0) | 2022.01.21 |
| React 1일차-React구경해보자 (0) | 2022.01.21 |
| React 1일차 -Visual Studio Code설치 (0) | 2022.01.20 |
| React 1일차 -설치 파일 목록 +node.js설치 (0) | 2022.01.20 |
