멋사 FE 5주차. 과제 React로 todolist만들기 폴더 만들기

1. npx create-react-app 폴더명

폴더를 미리 만들어놓은 후 그 위치의 폴더 안에  npx create-react-app .를 터미널에 입력하면 react로 페이지가 만들어지고, npx create-react-app 폴더명 하면 그 위치에서 폴더명의 폴더가 만들어집니다.

다운로드가 완료되고 Happy hacking!이라는 문구가 나오면 잘 설치된 것입니다.

 

2. npm start

cd 명령어를 이용하여 만든 페이지 안으로 이동하고 npm start를 치면 React App이라는 이름의 브라우저창이 뜨게 됩니다.

3. 확장 프로그램 깔기

npm i sass

npm i react-router-dom

로 깔고 package-lock.json에서 깔렸는지 확인할 수 있습니다.

4. 필요없는 것들 지우기

지운 결과

 

5. 폴더 만들기

6. todolist.jsx에서 rafce로 해결하기

rafce는 자동 완성 단축키로 확장 기능을 다운 받아 사용합니다.

7. scss만들기

8. style.scss와 index.js와 jsx 연결하기

index.js, scss를 연결해주었다.

jsx에 scss 연결

 

9. App.js에 jsx, scss 연결하기

import ToDoList from './components/todolist.jsx' 로 jsx를 가져와 <ToDoList/>로 씁니다. 저 위치에 todolist 내용이 들어갑니다.