to do list 만들기_1 (프로젝트 생성 및 초기화)

작업환경 설정

✔ Node 

✔ yarn

 

create-react-app 설치 및 사용

페이스북에서 만든 리액트 프로젝트 생성 도구인 create-react-app 을 사용

수많은 리액트 boilerplate 와는 다르게, 정말 프로젝트에 필요한 기능만 딱 들어있음

 

create-react-app 을 설치하려면 일단 글로벌 설치 필요

yarn global add create-react-app

 

그 다음, 아래의 명령어를 통하여 프로젝트를 생성 

create-react-app to_do_list

 

그러면 명령어를 실행 디렉토리에 to_do_list 라는 디렉토리가 생성

코드 에디터를 사용하여 해당 프로젝트 디렉토리를 열고, to_do_list 디렉토리에 들어가서 다음 명령어 실행

yarn start

http://localhost:3000/

화면이 나오면 성공

 

---

프로젝트 초기화

App.js 변경하기

 

src/App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        App
      </div>
    );
  }
}

export default App;

 

App.css, App.test.js, logo.svg 파일도 제거

파일 변경 후, 페이지에 App이란 텍스트만 나타남

 

---

 

참고 자료 👇

 

velopert.com/3480

React 기초 입문 프로젝트 – 흔하디 흔한 할 일 목록 만들기 | VELOPERT.LOG