Babel3 [React]내 멋대로 만드는 Todolist-3(feat.Parcel) 이번 포스트에서는 input.js에 이벤트를 추가하여 input태그에 입력된 내용을 배열에 추가하여 화면에 표시하고, 삭제버튼으로 리스트를 삭제하는 기능을 구현하겠습니다. 또한 create-react-app으로 프로젝트를 시작할땐 알 수 없던 babel plugin을 설치해보겠습니다. 1. Event 함수 만들기 constructor(props) { super(props); this.state = { input:'', todo:[ {text:"할일목록1",check:false}, {text:"할일목록2",check:false} ] } } handleInput = (e) => { this.setState({ input:e.target.value }) } handleKey = (e) => { if(e.key.. 2019. 5. 3. [React]내 멋대로 만드는 Todolist-2(feat.Parcel) JSX로 마크업을 하고 props와 state를 활용하기 1.JSX로 마크업하기(app.js) import React from "react"; import ReactDOM from "react-dom"; import './scss/App.scss'; class ReactTodo extends React.Component { render() { return ( React To do list 추가 할일 목록1 삭제편집 할일 목록2 삭제편집 할일 목록3 삭제편집 할일 목록4 삭제편집 ) } } var app = document.getElementById("app"); ReactDOM.render(, app); 이전 포스트에서 작성했던 app.js의 내용을 위와같이 수정했습니다. JSX는 Javascript 내.. 2019. 4. 25. [React]내 멋대로 만드는 Todolist-1(feat.Parcel) React로 만드는 Todo-list 개발환경설정 *creact-react-app을 통해 Todo-list를 만드는 포스트는 이미 벨로퍼트님이나 다른분들이 다루셨기때문에, 저는 좀 다르게 npm설치와 번들러 설정부터 시작하겠습니다. 또한, 입문자분들에게 Webpack이라는 번들러 자체가 진입장벽이 높기때문에,(사실 필자도 잘 다루지못함) webpack.json처럼 따로 번들러의 환결설정을 해주지 않고도 자동으로 처리해주는 Parcel이라는 번들러를 사용합니다. 1.폴더 생성 : react-todo 2.터미널로 해당폴더 이동 후 npm init -y입력 (npm init시에 모든 문항에 y로 대답한다는 명령어) 3. npm 설치 npm install --save react react-dom npm inst.. 2019. 4. 18. 이전 1 다음
