create-react-app와 Cordova를 사용하여 React의 네이티브 앱 개발 환경 만들기

React 절호조네요. 이전에는 제대로 된 개발 환경을 갖추려면 Webpack이나 Babel 등을 설정할 필요가 있어 귀찮았습니다만, Facebook create-react-app .

create-react-app 그 자체는
Facebook 공식 create-react-app 명령을 사용하여 React.js 앱을 폭속으로 생성
아니,
Facebook 공식 도구 Create React App을 사용하여 React 개발의 초보를 배우는 자습서
등을 참조해 주시면 좋겠습니다만, 이 기사에서는 Cordova 와 조합해 네이티브 앱으로서 패키지 하는 방법을 쓰고 있습니다.

환경은 OS X Yosemite 10.10.5입니다.

Cordova 설치

ㅜㅜㅜㅜ 아파치. 오 rg / 두 cs / 엔 / ㅁ st / 구이 / ぃ /
단계에 따라 Cordova를 설치합니다.

% sudo npm install -g cordova
...
% cordova --version
6.4.0
...
% cordova create myapp de.georepublic.myapp MyApp
% cd myapp
% cordova platform add ios --save  #ios環境の追加
% cordova platform add android --save  #android 環境の追加

cordova requirements 를 실행하면 빌드하기에 부족한 라이브러리 등이 나오므로 설치합니다.
제 경우에는 ios-deploy가 부족했습니다.
지시대로 sudo npm install --global ios-deploy를 실행해 보았는데 오류가 발생했습니다.
htps : // 기주 b. 이 m / p 네가 p / 이오 s에서 p ぉ y / 모두 s / 109
에서처럼sudo npm install --global --unsafe-perm ios-deploy실행 후 설치할 수 있습니다.

이 시점에서

% cordova build

을 두드려서 여러 가지로 나중에** BUILD SUCCEEDED **라고 표시되면 빌드 성공.

cordova emulate android

안드로이드 에뮬레이터,

cordova emulate ios

에서 iOS 에뮬레이터가 시작 기본 페이지가 나타납니다.

create-react-app로 앱 만들기

드디어 create-react-app를 설치합니다.

% npm install -g create-react-app
...
% create-react-app --version
create-react-app version: 0.6.0

React app를 만듭니다.

# cordova アプリの root にて
% create-react-app src  # src フォルダに React アプリを作成

npm start를 실행하면 브라우저가 시작되고 기본 페이지를 볼 수 있습니다.

% cd src
% npm start

Compiled successfully!

The app is running at:

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

우선 빌드해 보겠습니다만, 그 전에, "homepage"의 설정을 package.json 에 더해, 상대 패스로 js 등의 파일을 읽어들이는 설정으로 변경합시다.
이렇게 하지 않으면 나중에 Cordova에서 로드할 때 페이지가 표시되지 않습니다. (Cordova에서 열린 index.html의 루트 경로가 다른 위치에 있기 때문에)

package.json

{
  "name": "src",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",  #この行を追加
  "devDependencies": {
  ....

% npm run build 

> [email protected] build your_source_path
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  47.15 KB (-1 B)  build/static/js/main.309660ee.js
  289 B            build/static/css/main.9a0fe4f1.css

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

잘 빌드 된 것 같습니다.
다음으로 cordova.js를 읽는 문장을 index.html에 추가해 봅시다.

% vi src/public/index.html

<script type="text/javascript" src="cordova.js"></script>의 행을 </body> 앞에 추가

다시 빌드하겠습니다.

% npm run build 

이제 cordova에서 React build 폴더를 읽어 보겠습니다.

% cd ..           # cordova のルートに戻る
% mv www www.org  # 既存のファイルを移動
% ln -s src/build/ www  #build フォルダを、www で参照できるようにする

React 앱의 build 폴더에 심볼릭 링크를 붙이고 있습니다.
이제 cordova 빌드를 수행합니다.

% cordova build
....
** BUILD SUCCEEDED **

참고 : 처음 실행했을 때/platforms/android/build/intermediates/assets/debug/www/static/css/를 찾을 수 없다는 오류가 발생했습니다. 그때는
mkdir -p ./platforms/android/build/intermediates/assets/debug/www/static/css/
을 실행하고 다시 실행하면 빌드에 성공했습니다.

빌드에 성공하면 emulator를 시작해 봅니다.

cordova emulate android

cordova emulate ios

안전하게 표시되었습니다!