본문 바로가기

React58

React2일차-React 컴포넌트2 *주의* 내가 복사해놓은 부분 중에 앞에 // 이거는 내가 주석 처리한거다 같이쓰면 오류나고 나중에 다시쓸려고 지우지 않고 주석처리해서 코드에 영향안끼치고 지우지는 않게 하기 위해 만들어 놓은거다 *추가설명* 컴포넌트나 클래스를 이용해서 hello이런식으로 넣을때 최상위 요소는 하나만 있어야된다 즉 hello hello 이거는 최상위요소가 div 두개기때문에 오류가 나온다 하지만 이렇게 넣고싶으면React.Fragment를 활용하면 된다 hello hello 이거는 최상위요소가 div 하나기때문에 저상 작동한다. React2일차-React 컴포넌트1을 이어서 하겠다 여기서 script 부분을 다지우고 class ClCom extends React.Component{ render(){ return hell.. 2022. 1. 21.
React2일차-React 컴포넌트1 이제 시작이다 터미널에 npx serve 치고 localhost로 인터넷 창 켜줘라 2일차 바벨 게시물 이어서 본다면 켜저있을 것이다 그리고 바디 젤상단에 + 입력 이제 모든것은 여기에다 입력 한다 컴포넌트에 대해 알아보자 우선 const compo=props=>{ return React.createElement('p',null,`${props.message}:${props.count}`) } ReactDOM.render(React.createElement(compo,{message:'update',count:1}),document.querySelector('#root')); document.querySelector("#btn_plus").addEventListener('click',()=>{ React.. 2022. 1. 21.
React2일차-React쓰기전 babel설정 *요약 npx serve로 창하나 켜놓고->헤드부분에 이거 추가->바디 부분를로 바꿔주기 자 1일차에 했던 화면에서 부터 시작이다 이화면 부터 시작이다. 터미널에 npx serve 입력하고 localhost 부분을 클릭하여 창을 하나 켜놓자 이제 코드를 쓰고 여기서 변화를 확인할거다 키면 이런 하얀 화면일거다 자이제 코딩을 시작하자 기본 설정 일단 구글을 가서 babel을 검색하고 젤위에꺼 클릭 친절한 나는 오늘도 링크가 있다 https://babeljs.io/ 영어지만 당황하지말고 (저번에 알려준 대충번역 하고 싶으면 우클릭 해서 한국어로 번역 누르면 된다 ) 가자 우측위 setup 클릭 여기왔으면 In the Browser 클릭 요기로 이동하면 script 부분 복사 혹시 모르니 여기 복사해놓을께 쓸.. 2022. 1. 21.
React 1일차-React구경해보자 *요약* 아무폴더만들고->우클릭해서 code로열기클릭->상단에 터미널 눌르기->새터미널 클릭-> 거기다가 npm init -y 입력 엔터->다음에 npx serve 입력하고 엔터-> localhost어쩌고 ctrl+좌클릭으로 열기->index.html만들고->내가 적어놓은거 입력(13번가면 있음) ->https://ko.reactjs.org/이동->우측위 돋보기에서 cdn검색 ->젤위에꺼 클릭 ->젝위에꺼 두줄 복사 해서 헤드안에에 붙여넣기->바디에 20번에 적어놓은거 붙여넣기 ->아까열어놓은 인터넷 창에서ctrl+shitf+i 눌러서 입력한거 확인 진짜로 구경만하는거다 구경.....별거 없다.... 그래도 해보자 일단 아무 폴더 만들고 더블클릭 1.그리고 파란색인" Code(으)로 열기" 클릭 뭐 보라.. 2022. 1. 21.

티스토리툴바