출처 : 소플의 처음만난 리액트 (도서)
HTML, CSS, Javascript 아주 조금 숙지된 상태에서 react를 시작하려고 한다. 리액트를 하다보면 분명 부족한 javascript 공부가 나올 것이다. 이 때 반복해서 학습하기로 하자.
웹사이트에 React.js 추가하기
리액트를 연동하기 위해서는 react, react-dom 이렇게 두 개의 자바스크립트 파일을 가져온다. js 연결링크는 리액트 컴포넌트를 가져오는 코드이다.
js코드를 해석하자면,,, (feat. chat)
create-react-app
웹사이트에 리액트를 추가한 뒤 실제로 리액트 컴포넌트까지 만들어서 렌더링하는데 있어 매번 이러한 환경설정은 번거로울 것이다.
리액트 웹 애플리케이션을 개발할 수 있도록 프로젝트를 자동으로 생성해 주는 create-react-app이라는 패키지가 있다. cra라고 부르기도 한다.
vscode 터미널에 아래 명령어를 입력한다
npx create-react-app <프로젝트이름>프로젝트 이름을 my-app으로 했다고 가정하며, 순서대로 아래 코드를 입력한다.
cd my-app(프로젝트이름)
npm startcd my-app에서 cd는 change directory의 약자로, 현재 커맨드 라인 도구가 위치한 경로를 변경하는 역할을 한다. 먼저 생성한 my-app 프로젝트 폴더 안으로 들어가고, 이후에 npm start 명령어를 통해 애플리케이션을 실행시키게 되는 것이다.
브라우저가 열리면서 http://localhost:3000/ 으로 접속하게 된다. localhost라는 것은 현재 내가 사용하고 있는 컴퓨터를 의미한다.
이제 React App 시작된다.
+++ 작업 중단하기
$npm run dev
