JEONGLOG

뭐지 난 분명히 잘 설치했는데 react-scripts란? > node.js의 모듈로 create-react-app을 위해 만들어졌다고 한다. 하지만 이걸 찾을 수 없다고 하니 npm install -save react-scripts 위 명령어로 설치해주자 성공

React - 17.1. 컴포넌트 이벤트 만들기 return ( { {this.state.subject.title} {this.state.subject.sub} */} ); - header 태그를 주석처리하고 원래 쓰던 태그 살림 - 이벤트 처리를 하고 싶다면 onChangePage 이벤트를 쓸 수 있음 - a 태그가 클릭되었을 때 설치한 함수를 실행해 줌 - 우리가 만드려고 하는 Subject 컴포넌트는 onChangePage 이벤트가 있어서 이 컴포넌트 안에서 링크를 클릭했을 때 이벤트에 설치한 함수를 만드려고 함 - App.js에 추가 - onChangePage {this.props.title} {this.props.sub} - Subject.js에 추가 - 링크 태그에 onClick 속성 추가해주..

React - 16.1 이벤트 state props 그리고 render 함수 - 목표 : WEB에 링크를 걸고 링크를 클릭하면 welcome에 해당되는 메시지가 나오게 할 것 - 클릭한 것에 해당되는 content 출력되게 함 - render() 함수 : 어떤 함수가 변경되면 같이 바뀜 import { Component } from 'react'; import TOC from './component/TOC'; import Content from './component/Content'; import Subject from './component/Subject'; import './App.css'; class App extends Component { constructor(props){ super(props..

React - 12. props class TOC extends Component{ render(){ return( HTML CSS JavaScript ); } } - link 태그에는 a라는 것을 통해 이것이 태그라는 것을 알려줌 - 이것이 어떤 주소랑 연결되는지 알려줄 필요가 있음 - href="1.html" ➡ 태그의 속성(attribute)를 통해 알 수 있음 ➡ 위처럼 title과 sub title을 통해서 구별할 수 있다면 얼마나 좋을까? class Subject extends Component { render(){ return ( {this.props.title} {this.props.sub} ); } } class App extends Component { render() { return ..

나의 선생님 React - 6. 샘플 웹앱 실행 터미널에서 - npm run start : 실행 - Ctrl + C : 종료 React - 7. JS 코딩하는 법 - 모든 component들은 id가 root인 곳 안에 작성하도록 약속되어 있음 요 안에 - 대부분의 파일은 src 폴더 안에 들어감 ReactDOM.render( , document.getElementById('root') ); - srt -> index.js 파일 - ➡ 파일 - App.js 파일을 함수 형식에서 클래스 형식으로 변경 - div 태그 안을 Hello React !! 로 변경 - 자동으로 리로드 되는 것을 볼 수 있음 React - 8. CSS 코딩하는 법 - 배경화면 변경 4번째 줄의 App과 9번째 줄의 App은 이름이 ..