레이블이 react native인 게시물을 표시합니다. 모든 게시물 표시
레이블이 react native인 게시물을 표시합니다. 모든 게시물 표시

2016년 1월 27일 수요일

Windows 환경에서 React native Getting started sample project 실행하기.

Windows laptop에서 React Native Getting started sample인 AwesomeProject를 돌려보고자 하였음.

React Native Getting started.
https://facebook.github.io/react-native/docs/getting-started.html

- Homebrew => Scoop (https://www.outcoldman.com/en/archive/2014/07/20/scoop/)
대체 하여 사용할 수 있지만 정작 watchman, flow는 scoop을 사용해서 설치 못함.
curl, git, nodejs 같은 기본적인 것들은 설치 가능함.
 : proxy 설정 : https://github.com/lukesampson/scoop/wiki/Using-Scoop-behind-a-proxy

Android Setup guide
: https://facebook.github.io/react-native/docs/android-setup.html

- 프로젝트 빌드 시 guide에서 표시한 대로 SDK builde tool 23.0.1 은 설치가 되어야 함.

- emulator 실행 설정에 실패함.
 : Android SDK의 emulator는 부팅은 되지만 정작 실행이 안된다. HAXM install에도 불구하고 실행이 안된다.
 : Windows에서 제공하는 Hyper-V 기반으로 emulator를 실행하였지만 "preparing virtual machine" 메세지만 표시되고 실행이 안된다. 좀 Hyper-V 관련 trouble shooting을 찾아봤지만 내 환경 설정이 좀 문제인듯.
=> 그래서 그냥 device 연결해서 AwesomeProject 실행.

- 두 개의 shell에서 "react-native start" 실행 후 "react-native run-android" 실행
- 실행 시 JS load에 문제가 생겼다는 메세지와 빨간 화면 표시
 : bundle js 파일이 asset에 포함되지 않아서 생긴 known issue인 듯 아래 처럼 필요한 다운로드 하면 된다.
 => http://stackoverflow.com/questions/32572399/react-native-android-failed-to-load-js-bundle

Update

To run with local server, run the following commands under your react-native project root directory

  1. react-native start > /dev/null 2>&1 &
  2. adb reverse tcp:8081 tcp:8081
please take a look at dsissitka's answer for more details.

To run without a server, bundle the jsfile into the apk by running:

  1. create an assets folder under android/app/src/main
  2. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
please take a look at kzzzf's answer for more details.
shareimprove this question

windows 기반에서 React native project를 실행은 했으나...
개발을 위해서 맥북을 사야하나라는 생각이 마구마구 듬.

2015년 4월 2일 목요일

ReactJS, React Native 참고 resource들 링크 정리

여기저기서 React.js에 대한 얘기들이 나오길래 찾아봄.

https://facebook.github.io/react/index.html


  • 페이스북이 Web User Interface를 만들기 위해 만든 JavaScript Library.
  • Model-View-Control 패턴 중 View를 위한 component를 만드는 방법을 제공 하고 있음.


ReactJS의 특징

  • JSX(JavaScript XML)
    • XML 기반의 JavaScript 확장 문법이며 Virtual DOM을 생성하기 위해 사용된다.
  • Virtual DOM 
    • JavaScript Object Graph를 저장하고 있으며 변환단계를 거처 HTML DOM을 생성 한다고 함.
    • 변환 시 차이점을 파악하여 업데이트하는 방법을 사용하므로 빠른 DOM 조작 성능을 제공한다고 함
  • 단방향 데이터 바인딩(Unidirectional Data Flow)
    • 데이터 바인딩을 props, state를 사용하도록 제한 하여 디버깅을 쉽게 하고 성능을 높인다고 함.


[그것이 알고 싶다 – Spinbox로 React 겉핥기]
http://wit.nts-corp.com/2014/11/19/2584
: 제목과는 다르게 한번 보면 아 이런 거구나 알 수 있는 포스팅.

[REACTJS 둘러보기 – XHP부터 REACT NATIVE까지]
http://taegon.kim/archives/5097
: React가 나오게 된 배경, ReactJS, React Native에 대한 설명

[영문 Resources]


https://code.facebook.com/
conference 비디오 자료들이 있음.

[Learning React.js: Getting Started and Concepts]
: https://scotch.io/tutorials/learning-react-getting-started-and-concepts
: 간략하게 React.js 컨셉에 대해서 쉽게 설명한 영문 문서

> Unidirectional Data Flow 설명
 : https://scotch.io/tutorials/learning-react-getting-started-and-concepts
사실 JavaScript 초짜인 나에게는 좀 이해가 잘 안되는 개념이다. 그냥 바인딩 하는 방법을 제한한 것만 같아서 React.js에서 디버깅말고 성능 개선 이점의 이유를 잘 모르겠음.

[Intro to the React Framework]
: http://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660
: 자세하게 React.js의 컨셉을 설명하는 좀 긴 문서, MVC 패턴부터 설명한다.

> What Makes React Different?
 ReactJS의 특징을 좀 더 자세히 설명해 주는 부분

> Component Lifecycle
 Component Life cycle에 대한 설명

http://open.bekk.no/easier-reasoning-with-unidirectional-dataflow-and-immutable-data
이건 좀 나중에 봐야 겠다.

[React Native]



[React Native]
: http://dalinaum.github.io/react/ios/2015/03/27/hello-react-native.html
 React Native 샘플을 만드는 포스팅