JavaScript/React

[20.11.02 hello-react, react-phone-book] React 기초

우롱차 2020. 11. 3. 09:57
728x90

HELLO-REACT

index.js는 public 폴더에있는 index.html 의 div를 불러온당

필요한건 저거하나 !

index.js를 건들지 않음

 

이app만 건들일것!

 

 

 

리액트 폴더에 들어와서

 

yarn start

하면 서버가 열림! 

 

 

 

이거 설치해줌

 

 

rcc 컨트롤 스페이스 바하 하고 첫번째 꺼 선택해주면 이렇게 뜬다

 


 

이게 리액트의 컴포넌트 스타일!

>> app.js

 

이코드가 없으면 아무리 코드를 짜도 사용할 수가 없음 

이 컴포넌트를 사용할 수 없음

>> rccp.jsx

 

사용하려면 app.js에 import로 해서 그 component를 사용할 수 있고

첫글자를 대문자로 만들어야함

우리는 전부다 대문자하긴했지만.

우리가 대문자로 만드는 이유는

기본적으로 제공하는 컴포넌트와 헷갈리지마라고

우리가 만드는 컴포넌트를 첫글자를 대문자로 쓰더라!

>> rsc.jsx

 

이벤트 핸들러라 보면됌 on다음에 무족건 대문자로 해줘야함

대소문자 구별해야함

 

useState로 변수와 값을 set하고

코리아라는 문자열이 저장이 되어서!!!

코리아가 나타남

>> InOut.jsx


리액트 폴더만들때

리액트에서 컴포넌트를 만들때 항상 박스 태그(DIV)가있어야함

박스 태그안에 우리가 필요한 컴포넌트를 불러야햄

최신 버전은 <></>만 해줘도됌


리액트폴더아래에 있는 gitignore 복사하는 명령어

728x90