REACT
-
[parcel 3] React,ES6프로젝트/[parcel]parcel-experiments 2018. 7. 2. 22:31
순서 1.컴포넌트 렌더2.리액트 호출3.리액트돔으로 랜더 src/App.js 생성import React from "react"; export default () => Test!; index.html에 돔을 붙힐 루트를 만들어줌 index.js수정import React from "react";import ReactDOM from "react-dom";import App from "./src/App"; ReactDOM.render(, document.getElementById("app")); 자꾸 ReactDOM을 ReactDom으로 써서 오류낸다 ㅠㅠ
-
[todo_app_7] todo목록 수정프로젝트/[react]todo_app 2018. 5. 20. 21:37
app.js에서 todo목록을 관리, 컨트롤 하고 있다todo.js에서 수정할 때, app.js에서 props를 받아오고 싶음 => 그래야수정할때 자연스럽게 연출됨 수정할 때 텍스트인풋이 떠야하고, 그 안에 value가 있어야함. todo.js const { text } = this.props; { isEditing ? : ( { text } )} app.js ) 편집을 했을 때, 해당 텍스트를 복사해서 state에 보내기todo.jsstate = { toDoValue: ' ' }; 편집중일때는 textinput, 아닐때는 text{ isEditing ? : ( { text } )} 스타일 지정 input: { marginVertical: 15, width: width/2, paddingBottom: 5..
-
[todo_app_6] isEditing?프로젝트/[react]todo_app 2018. 5. 15. 13:42
수정, 삭제 스타일 수정중인지 아닌지 여부를 판단해서 스타일을 표시할거라 isEditing이 필요함 render(){ const { isEditing } = this.state; 수정, 삭제를 할 수 있는 연필, 엑스표 모양 이모지를 넣자column안에서 관리할거임 {/* column*/} todo ) {isEditing ? {/*수정할 때 모드*/} ✅ : {/*수정하지 않을 때 때 모드*/} ✏️ ❌ } 스타일을 준다const styles = StyleSheet.create({ container: { width: width - 50, borderBottomColor: "#bbb", borderBottomWidth: StyleSheet.hairlineWidth, alignItems: "center", ..
-
[todo_app_2] 프로젝트 세팅프로젝트/[react]todo_app 2018. 5. 8. 22:33
세팅expo에서 프로젝트 생성github에 repository생성 git remote add origin urlgit pull origin mastergit add .git commit -m "some messages"git push origin master app.json 변경{ "expo": { "name": "cute todo", "description": "cute todo app made by react", "slug": "cuteTodo", 앱 이름, 설명 쓰기 slug 가 expo 프로젝트 이름 따라서 cute-todo 이렇게 되어있었는데나중에 오류난다... '-' 이거 빼야함 README.md 변경# cute-todocute todo app made with react native GitH..
-
[weather_app_6] 아이콘 변경, 앱 제작 완료프로젝트/[react]weather_app 2018. 5. 1. 16:13
이전 제작에 문제가 된 Mist, Haze 상태 추가 ionicon 대신 material community icons를 불러오자import { MaterialCommunityIcons } from "@expo/vector-icons"; 새로운 아이콘네임으로 변경const weatherCases = { Rain: { colors:["#00C6FB", "#005BEA"], title: "Raining", subtitle: "우산 챙기세요", icon: "weather-rainy" }, Clear: { colors:["#FEF253", "#FF7300"], title: "Sunny", subtitle: "날이 좋아요", icon: "weather-sunny" }, Thunderstorm: { colors:["..
-
[weather_app_4] 상태바/벡터아이콘/위치정보 에러처리프로젝트/[react]weather_app 2018. 4. 25. 17:12
상태바(status bar)없애기react-native가 제공하는 api 사용 import { StyleSheet, Text, View, Image, StatusBar } from "react-native"; render() { const { isLoaded } = this.state; return ( {isLoaded ? : ( Getting the weather )} ); } 아이콘expo의 패키지 vector-icon 사용하기 https://expo.github.io/vector-icons/ import { Ionicons } from "@expo/vector-icons"; 이런식으로 사용한다 name props에 사용하고 싶은 것을 집어넣자 리액트 네이티브에서 위치정보 얻기componentDidM..
-
[weather_app_2] Loading View프로젝트/[react]weather_app 2018. 4. 16. 21:11
정보를 받았는지 확인하는 indicator가 필요하다. state = { isLoaded: false } 로딩이 완료되면 정보를 보여주고 , 로딩이 완료되지 않으면 로딩 스크린을 보여주자 render() { const { isLoaded } = this.state; return ( {isLoaded ? null : ( Getting the weather )} ); } 배경색과 텍스트 모양 const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff' }, loading:{ flex: 1, backgroundColor:'#FDF6AA', justifyContent: "flex-end", paddingLeft: 25 }, Lo..