[ React.js ] 리액트 훅(React-Hooks) 시작하기 - 01. 프로젝트 구동

안녕하세요 상훈입니다.

코드 샌드박스 같은 곳이 아니라 내 로컬 디스크에 있는 vscode에서 리액트 훅을 공부해보고 싶었습니다.

 

1. 터미널에서 프로젝트를 명령어로 생성해줍니다.

$ npx create-react-app hooks-react

"hooks-react"라는 폴더명으로 프로젝트가 생성됩니다.

 

2. 기본 작성되어진 html을 지우기 위해서 src 폴더 내에 있는 App.js와 index.js 이외의 모든 파일을 지우도록 하겠습니다.

App.js, index.js 이외 모두 삭제

 

3. App.js

import React from "react";
const App = () => <div>Hello React?</div>;
export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

기존의 내용을 삭제해주시고, 변경해줍니다.

 

4. 터미널에서 시작을 해줍시다.

$ npm start

 

npm run successed!

 

5. 결과 확인.

아까 작성하였던 <div>Hello React?</div> 에 의해 

localhost:3000

"Hello React?" 라는 문구가 포트3000번의 localhost 에서 출력이 됩니다.

 

 

 

1단계로 리액트-훅 프로젝트 구동에 대해 알아봤습니다.

 

React-hooks 기본01. 프로젝트 구동

 

참고

[리액트 초보 따라하기 / To do] 1. create-react-app으로 프로젝트 생성하기