기록하는 노트

create-react-app my-telephone src | component - App.js 이동 부트스트랩 설치 yarn add bootstrap@3.4.1 src/index.js(상위컴포넌트에 부트스트랩라이브러리 등록) Contact.js import React, { Component } from 'react'; import ContactDetails from './ContactDetails'; //추가 import ContactInfo from './ContactInfo'; //추가(배열의 추가,삭제,수정)->update import update from 'react-addons-update'; import ContactCreate from './ContactCreate'; class Cont..

Props - 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용 - parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용 - 컴포넌트에서 immutable (변하지 않는) 데이터가 필요 할 땐, render() 메소드의 내부에 안에 { this.props.propsName } 형식으로 넣는다. - 컴포넌트를 사용 할 때, 괄호 안에 propsName="value" 를 넣어 값을 설정 index.html //추가 index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; //App부모 컴포넌트만 새로 불러올 경로를 지정 import App fr..

한곳에 작성할 경우 분리하여 작성할 경우 import 불러오는 코드를 추가 작성한다. Content.js 파일 생성 Header.js 파일 생성

한곳에 작성할 경우 분리하여 작성할 경우 import 불러오는 코드를 추가 작성한다. Content.js 파일 생성 Header.js 파일 생성

예제1 웹페이지에 랜덤 텍스트 뿌리기 새로고침을 누를 때마다 랜덤하게 출력이 된다. 결과화면 1 결과화면 2 결과화면 3 예제 2 에서는 완벽한 ES6문법을 지원하지 않는다. /* 복잡한 화면 디자인은 변수로 선언해서 부착시킬것 웹상에서는 ' ', " ",` ` 은 사용하지 말것. */ 예제3

create-react-app myapp2 로 새로운 프로젝트 생성 cd myapp2 yarn start 로 엔진구동 확인 불필요한 파일 제거작업 1. public 폴더에 index.html만 남기고 삭제 2. src 폴더에 components 폴더 생성, App.js를 components폴더로 이동 3. index.js 경로 수정 import App from './components/App'; 4. App.js 함수 삭제하고 클래스로 작성하기위해 설정 rcc tab or enter yart start 서버구동 확인 서버구동 종료하고 myback 폴더 생성하고 myapp2폴더안의 내용전부를 복사 creat-app을 하지 않고 복사해서 사용하는 방법을 사용하기 위해서 이러한 작업을 했다. JSX 문법 1...

Reactjs code snippets 설치 test.js 파일 생성 후 클래스 rcc 함수 rsc

open in brower 설치 리액트 연습 마우스 우클릭 -> Open In Default Browser

HTML Snippets 설치 user -> .vscode -> extensions -> abusaidm.html-snippets -> snippets 폴더를 vscode에서 불러오기 템플릿 작성 { "ww":{ "prefix":"ww", "body":[ "", "", "", "", "\t", "\t", "", "" ], "description":"우리웹 HTML 템플릿", "scope":"text.html" } } 저장 종료 후 vscode 재시작 ww 입력 후 tab or enter

vscode 터미널에서 1. npm install -g yarn로 yarn 프로그램 설치 2. npm install -g create-react-app => 자동으로 구조형성 3. create-react-app 프로젝트명 설치 완료화면 yarn start Starts the development server. yarn build Bundles the app into static files for production. yarn test Starts the test runner. yarn eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do thi..