React Native GUIDE

React Native GUIDE
⼊⾨からその裏側まで覗いてみよう

ビズリーチ・
キャンパス
学⽣、OB/OG 向けサイト
• Java8+Spring Boot
（Thymeleaf）
• ES2015+KnockoutJS
社内管理者向けサイト
• ES2015+React（+Redux）
アプリ
• Swift

React とは 1/3
https://facebook.github.io/react/ Facebook 製
• UI 構築⽤の JavaScript ライブラリ
• Declarative（宣⾔的）
– アプリの状態に応じたインタラクティブ
な UI を簡単に構築できる
– コードもわかりやすい
• Component-Based
– いわゆるコンポーネント（部品）指向
– ⾃分⾃⾝の状態も管理する
• Learn Once,Write Anywhere
– これだけ覚えればサーバサイドもスマホ
アプリも OK

React とは 2/3
https://speakerdeck.com/katamu
ki/es2015-react-dot-jswoxue-bu 弊社のおっさんが学んだ話（宣伝）
• コンポーネントを組み合わせて構築す
るコンポーネント指向の View ライブ
ラリ
• Facebook、インスタ、Yahoo!、
Airbnb などでも使われている
• VirtualDOMを⽤いた画⾯の差分描画を
⾏い⾼速な画⾯表⽰を提供する

React とは 3/3
https://facebook.github.io/react/t
utorial/tutorial.html
• Tutorial おすすめ
• ポイント
– ES2015
– React.Component
– this.prop
– this.state
– componentXXXMount
• ES2015 は以下ざっと読んでおくのが
おすすめ
– http://postd.cc/es6-cheatsheet/
– 「...」とか検索難易度⾼すぎる

React Native とは 1/3
https://facebook.github.io/react-
native/ Facebook 製
• ネイティブアプリを JavaScript と
React を使⽤して構築できる
• ちゃんとサクサク動く本当のスマホア
プリが作れる
• （アプリなのに）ホットリローディン
グでさくさく開発できる
• Native コードも使える

native/docs/getting-
started.html#content
アプリ⽤のコンポネントを確認して
おくと効率が良い
• こちらも Getting started から
Tutorial がおすすめ

http://www.slideshare.net/TadeuZagallo/a-tour-
of-react-native?qid=ddc291a4-7988-46dc-
b086-9cf3c92a7235&v=&b=&from_search=4 メリットとか
• 今後ますますアプリの需要は⾼まって
いく
• Android と iPhone で 70% 〜 90%
コードを共有可能
• ネイティブの勉強をゴリッとやらない
で良い

React Native
の裏側を覗く

React Native の裏側を覗く
native/docs/getting-
started.html#content Getting Started
• ⾊々インストール
– node
– watchman
– react-native-cli
– …
• 初期化
• 起動
react-native init AwesomeProject
react-native run-ios

React Native
の裏側を覗く
初期化処理を react-native init からみてみる

view `which react-native`

switch (commands[0]) {
case 'init':
if (!commands[1]) {
console.error(
'Usage: react-native init <ProjectName> [--verbose]'
);
process.exit(1);
} else {
init(commands[1], argv.verbose, argv.version);
}
break;
default:
...

function createProject(name, verbose, rnPackage) {
var root = path.resolve(name);
var projectName = path.basename(root);
console.log(
'This will walk you through creating a new React Native project in',
root
);
if (!fs.existsSync(root)) {
fs.mkdirSync(root);
}
・・・

・・・
var packageJson = {
name: projectName,
version: '0.0.1',
private: true,
scripts: {
start: 'node node_modules/react-native/local-cli/cli.js start'
}
};
fs.writeFileSync(path.join(root, 'package.json'),
JSON.stringify(packageJson));
process.chdir(root);
console.log('Installing react-native package from npm...');
・・・

・・・
if (verbose) {
runVerbose(root, projectName, rnPackage);
} else {
run(root, projectName, rnPackage);
}
}

view [react-native init したディレクトリ]/[アプリ名]/node_modules/react-
native/cli.js

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional
grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
'use strict';
require('./packager/babelRegisterOnly')([
/private-cli¥/src/
]);
module.exports = require('./local-cli/cli.js');

native/local-cli/cli.js

・・・
var cliEntry = require('./cliEntry');
if (require.main === module) {
cliEntry.run();
}
module.exports = cliEntry;

native/local-cli/cliEntry.js

・・・
const init = require('./init/init');
・・・
module.exports = {
run: run,
init: init,
};

これ！
function run(root, projectName, rnPackage) {
exec('npm install --save --save-exact ' + getInstallPackage(rnPackage),
function(e, stdout, stderr) {
if (e) {
console.log(stdout);
console.error(stderr);
console.error('`npm install --save --save-exact react-native`
failed');
process.exit(1);
}
checkNodeVersion();
var cli = require(CLI_MODULE_PATH());
cli.init(root, projectName);
});
}

native/local-cli/init/init.js

/**
* Creates the template for a React Native project given the provided
* parameters:
* @param projectDir Templates will be copied here.
* @param argsOrName Project name or full list of custom arguments
* for the generator.
*/
function init(projectDir, argsOrName) {
console.log('Setting up new React Native app in ' + projectDir);
const args = Array.isArray(argsOrName)
? argsOrName // argsOrName was e.g. ['AwesomeApp', '--verbose']
: [argsOrName].concat(process.argv.slice(4)); // argsOrName was e.g.
'AwesomeApp’
・・・続く

・・・続き
// args array is e.g. ['AwesomeApp', '--verbose']
if (!args || args.length === 0) {
console.error('react-native init requires a project name.');
return;
}
const newProjectName = args[0];
const options = minimist(args);
generateProject(projectDir, newProjectName, options);
}

function generateProject(destinationRoot, newProjectName, options) {
・・・中略
copyProjectTemplateAndReplace(
path.resolve('node_modules', 'react-native', 'local-cli', 'templates',
'HelloWorld'),
destinationRoot,
newProjectName
);
・・・中略
printRunInstructions(destinationRoot, newProjectName);
}

const copyProjectTemplateAndReplace =
require('../generator/copyProjectTemplateAndReplace');
・・・中略
require('../generator/printRunInstructions');

余談（init.js）
const yarnVersion =
(!options.npm) &&
yarn.getYarnVersionIfAvailable() &&
yarn.isGlobalCliUsingYarn(destinationRoot);
・・・中略
if (yarnVersion) {
console.log('Adding React...');
execSync(`yarn add react@${reactVersion}`);
} else {
console.log('Installing React...');
execSync(`npm install react@${reactVersion} --save --save-exact`);
}

native/local-cli/generator/copyProjectTemplateAndReplace.js

割愛します・・・
[react-native init したディレクトリ]/[アプリ名]/node_modules/react-
native/local-cli/templates/HelloWorld
から
[react-native init したディレクトリ]/[アプリ名]
に HelloWorld を [アプリ名] に replace しながら頑張ってコピーしている処理

$ ls -l
total 64
drwxr-xr-x 4 ayumi.toukairin 386209875 136 12 10 19:23 __tests__
-rw-r--r-- 1 ayumi.toukairin 386209875 31 12 8 20:25 _babelrc
-rw-r--r-- 1 ayumi.toukairin 386209875 114 12 8 20:25 _buckconfig
-rw-r--r-- 1 ayumi.toukairin 386209875 1425 12 8 20:25 _flowconfig
-rw-r--r-- 1 ayumi.toukairin 386209875 16 12 8 20:25 _gitattributes
-rw-r--r-- 1 ayumi.toukairin 386209875 415 12 8 20:25 _gitignore
-rw-r--r-- 1 ayumi.toukairin 386209875 2 12 8 20:25 _watchmanconfig
drwxr-xr-x 10 ayumi.toukairin 386209875 340 12 10 19:23 android
-rw-r--r-- 1 ayumi.toukairin 386209875 1106 12 8 20:25 index.android.js
-rw-r--r-- 1 ayumi.toukairin 386209875 1072 12 8 20:25 index.ios.js
drwxr-xr-x 5 ayumi.toukairin 386209875 170 12 10 19:23 ios

$ ls –l
total 24
drwxr-xr-x 4 ayumi.toukairin 386209875 136 12 10 19:23 __tests__
drwxr-xr-x 10 ayumi.toukairin 386209875 340 12 10 19:23 android
-rw-r--r-- 1 ayumi.toukairin 386209875 1091 12 10 20:55 index.android.js
-rw-r--r-- 1 ayumi.toukairin 386209875 1057 12 10 20:55 index.ios.js
drwxr-xr-x 5 ayumi.toukairin 386209875 170 12 10 19:23 ios
drwxr-xr-x 569 ayumi.toukairin 386209875 19346 12 10 20:55 node_modules
-rw-r--r-- 1 ayumi.toukairin 386209875 421 12 10 20:55 package.json

$ ls –l ios
total 0
drwxr-xr-x 8 ayumi.toukairin 386209875 272 12 10 19:23 [アプリ名]
drwxr-xr-x 4 ayumi.toukairin 386209875 136 12 10 19:23 [アプリ名].xcodeproj
drwxr-xr-x 4 ayumi.toukairin 386209875 136 12 10 19:23 [アプリ名]Tests

React Native
の裏側を覗く
続いて react-native run-ios をみてみる

・・・
var cli;
var cliPath = CLI_MODULE_PATH();
if (fs.existsSync(cliPath)) {
cli = require(cliPath);
}
// minimist api
var commands = argv._;
if (cli) {
cli.run();
} else {
・・・

native/local-cli/cliEntry.js

function run() {
const setupEnvScript = /^win/.test(process.platform)
? 'setup_env.bat'
: 'setup_env.sh';
childProcess.execFileSync(path.join(__dirname, setupEnvScript));
const config = getCliConfig();
commands.forEach(cmd => addCommand(cmd, config));
commander.parse(process.argv);
・・・

native/local-cli/setup_env.sh

# Copyright (c) 2015-present, Facebook, Inc.
# All rights reserved.
#
# This source code is licensed under the BSD-style license found in the
# LICENSE file in the root directory of this source tree. An additional
grant
# of patent rights can be found in the PATENTS file in the same directory.
# 2048 is the max for non root users on Mac
ulimit -n 2048

function run() {
? 'setup_env.bat'
: 'setup_env.sh';
・・・続く

・・・続き
const isValidCommand = commands.find(cmd => cmd.name.split(' ')[0] ===
process.argv[2]);
if (!isValidCommand) {
printUnknownCommand(process.argv[2]);
return;
}
if (!commander.args.length) {
commander.help();
}
}

function run() {
? 'setup_env.bat'
: 'setup_env.sh';
・・・続くここらしい！

const commander = require('commander');
・・・中略
function run() {
? 'setup_env.bat'
: 'setup_env.sh';
・・・
https://tj.github.io/commander.js/
### Command#parse()
Parse argv, settings options and invoking
commands when defined.

native/local-cli/runIOS/runIOS.js

Usage: xcrun [options] <tool name> ... arguments ...
Find and execute the named command line tool from the active developer directory.
The active developer directory can be set using `xcode-select`, or via the
DEVELOPER_DIR environment variable. See the xcrun and xcode-select manualpages for
more information.

・・・
const simulatorFullName = formattedDeviceName(selectedSimulator);
console.log(`Launching ${simulatorFullName}...`);
try {
child_process.spawnSync('xcrun', ['instruments', '-w',
selectedSimulator.udid]);
} catch (e) {
// instruments always fail with 255 because it expects more arguments,
// but we want it to only launch the simulator
}
resolve(selectedSimulator.udid)
})
・・・

・・・
.then((udid) => buildProject(xcodeProject, udid, scheme,
args.configuration))
.then((appName) => {
if (!appName) {
appName = inferredSchemeName;
}
let appPath = getBuildPath(args.configuration, appName);
console.log(`Installing ${appPath}`);
child_process.spawnSync('xcrun', ['simctl', 'install', 'booted',
appPath], {stdio: 'inherit'});
・・・

・・・
const bundleID = child_process.execFileSync(
'/usr/libexec/PlistBuddy',
['-c', 'Print:CFBundleIdentifier', path.join(appPath, 'Info.plist')],
{encoding: 'utf8'}
).trim();
console.log(`Launching ${bundleID}`);
child_process.spawnSync('xcrun', ['simctl', 'launch', 'booted',
bundleID], {stdio: 'inherit'});
})
}

native/packager/react-native-xcode.sh

#!/bin/bash
#
・・・中略
case "$CONFIGURATION" in
Debug)
# Speed up build times by skipping the creation of the offline package
for debug
# builds on the simulator since the packager is supposed to be running
anyways.
if [[ "$PLATFORM_NAME" == *simulator ]]; then
echo "Skipping bundling for Simulator platform"
exit 0;
fi
・・・

xcodebuild -project [アプリ名].xcodeproj -configuration Debug -scheme [アプリ
名] -destination id=[udid] -derivedDataPath build

vim [react-native init したディレクトリ]/[アプリ名]/node_modules/react-
native/React/React.xcodeproj/project.pbxproj

#!/bin/sh
if [ -z "${RCT_NO_LAUNCH_PACKAGER+xxx}" ] ; then
if nc -w 5 -z localhost 8081 ; then
if ! curl -s "http://localhost:8081/status" | grep -q "packager-
status:running" ; then
echo "Port 8081 already in use, packager is either not running or not
running correctly"
exit 2
fi
else
open "$SRCROOT/../packager/launchPackager.command" || echo "Can't start
packager automatically"
fi
fi

native/packager/launchPackager.command

#!/usr/bin/env bash
・・・中略
# Set terminal title
echo -en "¥033]0;React Packager¥a"
clear
THIS_DIR=$(dirname "$0")
pushd "$THIS_DIR"
source ./packager.sh
popd
echo "Process terminated. Press <enter> to close the window"
read

native/packager/packager.sh

#!/usr/bin/env bash
#
# This source code is licensed under the BSD-style license found in the
# LICENSE file in the root directory of this source tree. An additional
grant
# of patent rights can be found in the PATENTS file in the same directory.
THIS_DIR=$(dirname "$0")
node "$THIS_DIR/../local-cli/cli.js" start "$@"

native/local-cli/server/server.js

/**
* Starts the React Native Packager Server.
*/
function server(argv, config, args) {
・・・中略
console.log(formatBanner(
'Running packager on port ' + args.port + '.¥n¥n' +
'Keep this packager running while developing on any JS projects. ' +
'Feel free to close this tab and run your own packager instance if you ' +
'prefer.¥n¥n' +
'https://github.com/facebook/react-native', {
marginLeft: 1,
marginRight: 1,
paddingBottom: 1,
})
);
・・・中略
runServer(args, config, () => console.log('¥nReact packager ready.¥n'));
}

native/local-cli/server/runServer.js

まとめ
• React の知識を覚えるとスマホアプリが作れる、ということでそのメリットは
⼤きい
• といいつつも、ハマった時のことを考えると node とアプリ構築（xcode）の
知識はある程度有ったほうが良さそう
• 割と⾟かった、でも勉強になった
– Simulator ⽴ち上げるまでのコードは⼤体把握できたので、ある程度トラブルシュー
ティングもできるようになれば良いな・・・
• いつか続きも読みたいな

React Native GUIDE

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie React Native GUIDE

Ähnlich wie React Native GUIDE (20)

Mehr von dcubeio

Mehr von dcubeio (20)

React Native GUIDE