Beginning react native

Building iOS App with

Eri [email protected]

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. 이벤트 처리 추가