React - 리액트 맛보기

안녕하세요. 다리자 레오 입니다. 

 

오늘은 리액트 두번째 포스팅 입니다. 

 

그럼 우리 모두 app부터 만들어 볼까요~  고고고

 

순서는 다음과 같습니다.

1. 프로젝트생성

2. 필요없는 파일 삭제

3. ui 설정 및 개발 시작

4. todos 만들어 보자!! 

 

 

1. 프로젝트 생성

- create-react-app 프로젝트명  이게 안되시면 npx create-react-app 프로젝트명 이것도 안되시면 설정 부분 다시 확인해주세요!! ㅊ

 

 

 

 

저는 todolist로 만들어 보았습니다.

 

2. 필요없는 파일 삭제

- 일단 저의 목표는 css가 중요한것이 아니라 Reate를 알아 보는것이 목적이기 때문에 불 필요한 파일은 삭제 하겠습니다.

삭제 목록: App.css, App.test.js, logo.svg 입니다.

 

* 삭제 전 구조

 

 

# 삭제 후 

 

 

이제 src/App.js에 들어가서 import log from './logo.svg' 와 import './App.css' 를 삭제합니다.

 

 # 마지막 

 

 

3. UI 설정 및 개발 고고

- 참고한사이트 

URL : https://materializecss.com/getting-started.html

 

이곳에서 CDN 아래쪽을  보면 llink가 있다 복사해서 todolist/public/index.html  붙여 넣기

 

 

 

 

그럼 이제 본격적으로 시작한다. 

 

New File 선택

 - Todos.js

 

- totos.js 중간 작성 

 

 

App.js 중간 작성

 

 

터미널 창에 

명령어 : npm start

 

중간화면 

 

일단 오늘은 여기까지... 입니다. 오늘도 달리자 레오 아자아자 화이팅!!