온라인 플레이그라운드

  • 개발 환경
 

React - StackBlitz

 

stackblitz.com

사실 비주얼 스튜디오 코드 설치할거면 의미는 없는 것 같음.

 

앱 만들기  추천 툴체인

 

 
  • 툴체인: React 개발을 위해 필요한 환경을 기본적으로 제공
  • 사용하려면 터미널에서 명령어 입력 필요함
  • npx 실행을 위해 node.js 설치 필요함
 
 
 
 

 

 

프로젝트 폴더 등록하기

  • 폴더 열기 클릭해서 바탕화면에 추가
  • React 이름은 오동작 가능성 있음. 다른 이름 추천 ex. react-app
 
  • 새 터미널 클릭해서 명령어로 제어 
 
  • npx create-react-app . 입력
  • . 은 현재 디렉토리를 의미
 
 
  • npm~ 들은 사용 가능한 명령어들 정의
  • npm start 입력 시 리액트 개발 가능 환경 세팅
 
  • 만약 3000 포트 관련 문구가 뜨면 Y 누르기

'면접(경력관리&협업) > React' 카테고리의 다른 글

Error & Exception  (0) 2024.01.03
리액트 컴포넌트  (0) 2022.11.06

이 글은 코지 코더 강의를 보고 정리한 글입니다.

 

<React.StrictMode>

- 개발 중에 나타나는 잠재적인 오류를 해결하는데 도움을 주는 도구

 

ReactDOM

-리액트와 브라우저의 돔을 연결해주는 역할.

호출은 import ReactDOM from 'react-dom';

ReactDOM.render(

  <넣고싶은 컴포넌트 명/>,

  document.getElementById('root')

); 

와 같은 형태로 사용.

 

리액트에서 컴포넌트를 만드는 방법

(1) 클래스를 이용 - 구버전

(2) 리액트 훅스(함수)를 이용 - 신버전 

(2)를 권장하므로 (2)에 대해서만 공부.

 

리액트에서 함수 컴포넌트 만들기

function 함수명() {

 return(

 <div>넣고싶은 컨텐츠</div> //브라우저에 이 컨텐츠가 출력되어 나타남

 );

}

export default 함수명; //function 함수명과 동일

 

 

'면접(경력관리&협업) > React' 카테고리의 다른 글

Error & Exception  (0) 2024.01.03
개발 환경 세팅  (0) 2022.11.06

+ Recent posts