beginning react native
TRANSCRIPT
Building iOS App with
Warning Message
발표자료 내용은 어디까지나 개인적인 경험에 의한 의견일 수 있음을 사전
공지합니다 .
리액트 네이티브
짤막한 이야기
리액트 모바일버전
Q. 리액트 네이티브은 뭔가요 ?
자바스크립트로 개발작업이 이루어진다
인터페이스는 네이티브 위젯으로 표시된다
친화적인 네이티브 UI 제공해 준다
Q. 리액트 네이티브의 특징은 ?
컴포넌트를 간단하게 만들고 쉽게 조합해서 뷰를 손쉽게 만들 수 있는 기술
Q. 리액트 네이티브 적용사례
https://facebook.github.io/react-native/showcase.htmlFacebook Group
ES5, ES6(2015) / ECMAScript JSX(JavaScriptXML)
React.js iOS (Objective-C)
리액트 네이티브에 관한 짤막한 이야기
개발환경 구축
살짝 훑어보기
1. Homebrew 2. Node.js 3. 일반적인 iOS/Android 앱개발 환경
4. React Native 클라이언트 도구 (react-native-cli)
상세한 내용은
https://facebook.github.io/react-native/docs/getting-started.html
개발환경 구축 살짝 훓어보기
Atom Nuclide.io
간단한 앱
만들어 보기
간단한 앱 만들어 보기
1. Todo 을 입력할 수 있다 .2. 추가 버튼을 탭하면 입력한 Todo 을 추가된다 .3. 추가된 Todo 내용은 리스트로 표시된다 .
*Todo 내용을 Firebase 에 저장하기
간단한 앱 만들어 보기
1. 프로젝트 생성하기$ react-native init TodoApp$ cd TodoApp
2. 필요한 패키지 설치하기$ npm install firebase –save
$ npm install react-native-vector-icons underscore –save아이콘에 대해서는
https://github.com/oblador/react-native-vector-icons
간단한 앱 만들어 보기
* 생성된 프로젝트 폴더안 살펴보기
간단한 앱 만들어 보기
3. 리액트 네이티브 팩키지 실행하기$ npm start
4. 생성된 프로젝트의 앱을 기동하기 (iOS)$ react-native run-ios또는
ios 폴더 안에 있는 TodoApp.xcodeproj 를 Xcode 로 열어서
Run 해서 기동하기
간단한 앱 만들어 보기
* index.ios.js 살펴보기
import import React, { AppRegistry, Component, StyleSheet, ... } from 'react-native';
var React = require('react-native'); var { AppRegistry, Component, StyleSheet, ... } = React;
component class AwesomeProject extends Component { render() { return ( <View style={styles.container}> ... </View> ); } }
var AwesomeProject = React.createClass({ render: function() { return ( <View style={styles.container}> ... </View> ); } });
styles const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, ... });
var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, ... });
register component AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
ES6 ES5
간단한 앱 만들어 보기
• Component• React vs React Native
• div >>> View• span >>> Text• li, ui >>> ListView• Img >>> Image
• Native Component• UITabBar -> TabBarIOS • UINavigationController -> NavigatorIOS • UITableView -> ListView
• Native binding(Objective-C) • RCT_EXPORT_MODULE • RCT_EXPORT_METHOD
ES5
간단한 앱 만들어 보기
5. 컴포넌트로 레이아웃를 추가 및 조합하기
6. 스타일 지정해 주기
7. 데이터베이스 연결하기
8. 데이터관리 부분 추가
9. 이벤트 처리 추가