FC2ブログ

スマフォのアプリを作りたい(6):React NativeのJavaScriptって?

   プログラミング [2020/01/20]
前回までで、なんとなく開発環境ができたっぽいので、React Nativeで書くコードはどんな?から勉強していきます。
ですが、React Nativeを理解する場合、「Reactを知っていると入り易い」とどこぞに書いてあったので、ちょっと遠回りになるかもしれませんがReactの概要を各入門サイトを読んで見ました。

ただし、さるなので、HTML、JavaScript、さらにWebに関する知識は、古く、乏しく、いい加減なので、根本から分からないことだらけです。なので途中途中「えっそこから?」的な備忘も多いし、発散ぎみであることを最初に申し上げておきます。肝心なことは、参考にさせていただいたサイトのURLを記載しておりますので、そちらを参考になさってください。

◆Reactとは
参考サイトは以下で、以下のサイトの説明で分からなかった点の補足と勝手な解釈を以降記載しています。
★1:http://www.tohoho-web.com/ex/react.html#whatis
・Facebookが開発?/考案した、Webアプリを開発するためのJavaScriptベースのフレームワークだそうです。
・JavaScriptはES6の文法を用い、JSXを利用することができるとありました。(JSX:言語という言い方をしている場合もあったが、JavaScript中にHTML/XMLを直接的に記述できる表記法と言ってもいいんでは・・・。)
・ES6文法やJSXで記述されたコードは、Babelというトランスパイラ?で実行時にJavaScript ES5の記述に置き換えられる。
・Chrome、Firefox、IE10以降で動作する。
・MITライセンスで商用利用可。

◆Reactを試しに実行してみるサンプル
★1のサイトを一通り読んだが、さるなので、何かわからない言葉/用語を調べると次から次へと不明な用語が出てくる感じでした。

まずは★1の最初のサンプルを見ればなんとなく分かるのが、
通常のHTMLと同じで、.htmlがあって、その中にJavaScript部分で組まれたコードがクライアント側で動作すると解釈しました。
ちょっと脱線-CDN?→<script crossing ... >?→CORS?→Origin?
「CDN」とタイトルされているサンプルコードをなんとなく理解するのに上記を芋づる調べする羽目になりました。
・Origin:プロトコル、ドメイン、ポートの組み合わせで表されるリクエスト先(httpX://xxx.xxx.xx.xx:pppp)
・CORS:Cross-Origin Resource Sharingの略。オリジン間リソース共有。異なるオリジンにあるリソースをリクエストするときに、ブラウザに対してそのリソースへのアクセス権を与えるように指示する仕組み。
・crossing属性:属性値にはanonymousとuse-credentialsがあり、anonymousを指定した場合、ユーザ認証情報は送付されない。use-credentialsは資格情報が送付される。
・CDN:Content Delivery Networkの略。コンテンツを配信する際に、エッジサーバと呼ばれるリクエスト元に近いサーバーにコンテンツのコピーを置き、そこからコンテンツを配信する手法?/サービス?。DNS内に指定されたURLの代理(エッジサーバ)が登録されており、そのエッジサーバへのアクセスを誘導する。エッジサーバは、CDNキャッシュサーバとも言うらしい。
参考:https://knowledge.sakura.ad.jp/19191/


要は、実行時に取り込むReactのフレームワーク/ライブラリを使うためには、Reactのスクリプトを実行する際に以下の6~8行目の記述が必要ということのようです。開発時用と実際に稼働させる用とあるそうです。(以下は実際に稼働させる用。)

----------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>React Test</title></head>
<body>
<div id="root"> </div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"> </script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"> </script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
----------------------------------------

Reactの場合、<script type="text/babel">と指定しなくてはいけなくて、
トランスパイラBabelは、Ajaxのライブラリに含まれてんのね。

またちょっと脱線-Ajax
:Asynchronous JavaScript + XMLの略。ブラウザ内でJavaScriptの通信機能を使って、XML形式のデータを送受信する技術。
通常、何かsubmitして、宛先が現在と同じURLであるような場合、同じ内容のHTLM全体をレスポンスさせるのではなく、部分的な内容(例えば追加のメッセージ)のみで済ませることができる手法。非同期通信と呼んでいる。(※ちょっとAsynchronousという表現が分かりにくい。)
参考:https://qiita.com/Masaki_Mori07/items/8344d3ab87913b4189a4


まだまだ、レベルの低い備忘録が続きます・・・・


さて、以下のスクリプトですが、ReactDOMのrenderメソッドをパラメタ付きで呼んでるだけですね。
----------------------------------------
ReactDOM.render(
<h1>Hello world! </h1>,
document.getElementById('root')
);
----------------------------------------

これで、HTML上の<div name="root"></div>のところにHello world!と挿入されて表示されるようです。
つまり、第1引数が入れ込むタグで、第2引数が入れ込み先(Elementオブジェクト)を指定しているわけですね。
第1引数を「"<h1>Hello world! </h1>"」と書かないところがJSXなようです。

この場合、ReactDOM.render()は、手前の <script crossorigin ・・・ react-dom.development.js"> のところでインクルード?されている中に定義されているんですね。きっと。


◆Reactアプリの開発環境と構成
★1内のその次のサンプルだとindex.htmlからindex.jsへの関連付けがいまいち良くわからなかった。
肝心な前提説明がモヤモヤな印象です。
(まあ、さるの基礎知識レベルが低いせいなんですけどね。)
Reactがどういうリソースを前提にして動作しているのかという情報も必要になって・・・
★2:https://qiita.com/take9021/items/c363d15bd5fdc3b0109c
上記のサイトの説明が理解の助けになった。

つまり、Node.js環境を前提としてReactを使ってアプリを作成する場合、
1)Node.jsをインストールしておく。
2)「npm install -g create-react-app」とやって、Reactをインストールする。
3)「create-react-app My_App」とかやるとアプリのひな形環境が生成される。
この時点で最初のビルドが実施される?(間違った予想かもしれません。)
4)「npm start」(「yean start」)とやると簡易(Web)サーバとブラウザが起動されて、My_App内のindex.htmlがブラウズされるんじゃないかしら。
 -index.htmlとindex.jsの関連付けは前もって(ビルド)なのか実行時に実施され、実際は置換/マージされる。
 -マージされたものがブラウザに送られるらしい。
 -マージの内容はpackage.jsonで規定するらしい。
 -http://localhost:3000がデフォルトのURLらしい。
 -でもマージ結果はどこに入るのかは・・・よくわかんない。
 さると同じ疑問を持った人がいたようです。→参考:https://teratail.com/questions/150374
5)簡易サーバ動作状態で、スクリプトを変更したりすると、リビルドとリブラウズが自動的に行われるらしい。

まだ、釈然としない部分(マージされたものの出力先は? 実際のサーバに仕込むときは? など)がありますが、そこはReact Nativeには直接は関係なさそうなので、飛ばします。

React:JavaScript:JSXでのコードの書き方についての話を進めます。


◆ReactDOMについて
またちょっと脱線-DOM
:Document Object Modelの略。「文書の構造をメモリ内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するもの」「HTML や XML 文書のためのプログラミングインターフェイスです。ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。 DOM は文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます。・・・DOM はウェブページの完全なオブジェクト指向の表現で、 JavaScript のようなスクリプト言語から変更できます。」
分かったようなわかんないような。HTML(Webページ=文書)内の構成要素を参照したり、操作するためのAPIのことかな? JavaScriptでdocument.getElementsByTagName()とかやるこのインタフェースの仕様はW3C(World Wide Web Consortium) DOMで標準化されているらしい。
出展:https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model、
   https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction


まあ、React自体は、簡単に言ってしまえばHTMLの表示内容を動的に変更する仕組みなわけで。
ReactDOMはそのReactのトップレベルのAPIだそうです。
参考:https://ja.reactjs.org/docs/react-dom.html

メソッドとしては、以下がある模様。
・render()
・hydrate()
・unmountComponentAtNode()
・findDOMNode()
・createPortal()

少なくとも、Reactを使うと言うなら、ReactDOM.render()は必ず使うってことですね。

サンプルでは、「<h1>Hello world! </h1>」というパラメタの書き方が出てきますが、これはJSXなんだそうです。
このタグの1セットを出力する機能をコンポーネントとして別名で定義できるようです。


◆コンポーネントの定義
すでにサンプルにも出てきてますが、JSXではHTMLタグをそのまま記述できます。
「<h1>Hello world! </h1>」 こう書くとタグそのもので、エレメント(Element)という呼び方をしてました。

静的関数として、以下のようなfunctionがあったとした場合、
----------------------------------------
function Hello(props) {
return <h1>Hello {props.name}!</h1>;
}
----------------------------------------

あるいは、以下のようにやったとしても
----------------------------------------
class Hello extends React.Component {
render() {
return <h1>Hello {this.props.name}!</h1>;
}
}
----------------------------------------

同じ結果が得られるようです。

ただし、後者の場合、コンポーネントを定義した」という言い方になります。

呼び出し側は、
----------------------------------------
ReactDOM.render(
<Hello name="Tako" />,
document.getElementById('root')
);
----------------------------------------

とか
----------------------------------------
var hello = <Hello name="Surume" />;
----------------------------------------

関数だろうが、コンポーネントだろうが区別はないようです。

「<Function ・・・ />」とか「<Component ・・・ />」と書くのは、JSXの記述法です。
「<Function ・・・ />」と書くと、静的関数の呼び出しになります。
「<Component ・・・ />」とやると、コンポーネントをnew(生成)して.render()メソッドを呼び出すことになるようです。

コンポーネント名は、先頭が大文字でなければならないそうです。
「<tag ・・・>」と「<Component ・・・ />」を区別するためなのかな?

コンポーネントの定義に「class」を使っているからなのか、例えば「<div class="hoge">」とは書けなくて、「<div className="hoge">」とする必要があるそうです。
css側はclassとして定義していたときと同じく「.hoge{・・・}」のままでいいみたい。
またちょっと脱線-CSS
class属性とCSS(Cascading Style Sheets:Webページのスタイルを指定する言語/ファイル)の関係性が分からなかったので・・・参考:https://webliker.info/34436/

参考:https://overreacted.io/ja/how-does-react-tell-a-class-from-a-function/

Reactは、このコンポーネント定義を組み合わせ/重ね合わせで、HTMLの内容を制御していくものらしい。


◆JSXとJSXじゃない書き方
既に、前の説明でJSXの記述法の例を出しているので、若干話が重複します。
参考:http://uupaa.hatenablog.com/entry/2013/07/27/052121
注)上記のサイトの説明は一般的なJSXの説明であって、React JSXとはちょっと違うのかもしれないので要注意です。

JSX自体は、JavaScriptの構文を拡張した記述方法のようです。
さるの場合、JavaScriptも曖昧にしか理解できてないので、どっちでも・・・という感じ。

(1)HTMLタグをそのまま記述できる。
さるな疑問:文字列として記述するのと比較したらどこが便利なのかな?)
HTMLタグ(エレメント)を変数に代入して使う場合、
----JSX:------------------------------------------
var h1tag = <h1>Welcome! </h1>;
--------------------------------------------------

----JSXじゃない書き方--------------------------
var h1tag = React.createElement('h1', null, 'Welcome!');
--------------------------------------------------

さすがに、じゃない方の書き方はちょっと面倒ですね。

(2)エレメントの記述中に変数から値を持ってきたい場合は{}で括る
ただし、{}に入れられるのは1ステートメントのみ。(「;」で区切る単位としたら1個という意味)
四則演算だったり、関数呼び出しでもOK。
----JSX:------------------------------------------
function get_uname() {return "Umezawa";};
var vname = "Sugiyamada";
var wname_s = "Kaburatani";
var wname_f = "Kojiro";

var elem1 = <h1>Hello {v_name}! </h1>;
var elem2 = <h1>Hello {get_uname()}! </h1>;
var elem3 = <h1>Hello {wname_f + " " + wname_s}! </h1>;;
--------------------------------------------------


(3)エレメントは複数の要素の併記はできない
「<p>・・・</p> <p>・・・</p>」はNG
<div>・・・</div>で囲っちゃえばOK。たぶん<p>・・・</p>とか<span>・・・</span>でもいいんじゃないかと思う。
「<div> <p>・・・</p> <p>・・・</p></div>」はOK
エレメントは複数行で記述することができる。その場合前後を()で括る。
----JSX:------------------------------------------
function get_uname() {
return (
<div>

</div>
)
;
};
--------------------------------------------------


(4)エレメント中にstyle属性を記述する場合{{}}で囲んでJSON?で記述する
HTML内だと「<div style=”プロパティ1:値1; プロパティ2:値2; ・・・”>」とか書くようですが、
JSXでは、「<div style={{プロパティ1:値1, プロパティ2:値2, ・・・}}>」としなければいけないらしい。
(※コンポーネントのstyleパラメタを指定する場合は、<Component style={・・・} ・・・/>)

(5)イベントハンドラを指定する場合
JSXでのハンドラの指定方法を理解する前に、そもそも
-<button>というタグがあるのをさるは知らなかった。
 HTML内だと「<button onClick="j_func()">キャプション</button>」と書けるそうです。
-JaveScriptのアロー関数式という書き方も知りませんでした。
----フツーのJavaScrpt-----------------------------
let normalFunc = function(x) {
console.log(x);
}
あるいは、
function normalFunc(x) {
console.log(x);
}
--------------------------------------------------

さる的には、「function」といえば後者の認識しかなくて、前者はちょっと違和感。
前者は、宣言した以降でしか使えなくて、後者は後で宣言しても使える(巻き上げと呼んでる)そうです。
さらに違和感なのが、
----ES6:アロー関数式-----------------------------
let arrowFunc = (y) => {
console.log(y);
}
--------------------------------------------------

以前との違いは、「function」と書かなくてよくなった点と関数内のthisがどのオブジェクトを指すのかが変わってくるらしい。
参考:https://qiita.com/mejileben/items/69e5facdb60781927929
ふーん。そうなの。
でもって、JSXでは以下のように書くらしい。
----JSX:------------------------------------------
return <button onClick={(e) => {
console.log(e, this);
}}>OK</button>
;
--------------------------------------------------

最初の{}がJSXのエレメント中へのJavaScriptを入れる大かっこで、中の{}がブロックを表すんですね。
でも、
-(e)のeって何?
 動かしてみりゃすぐわかりそうですが・・・
 eはイベントオブジェクトが勝手に渡されるんじゃないかと。
console.logってのは?
 コンソールにメッセージを出すためのメソッドだそうです。
 前回のデバッガを起動した際のデベロッパーツールのConsoleタブに出る?
 あるいは、「react-native log-android」とやった画面上に出てくるのかと思います。
 参考:https://www.sejuku.net/blog/27205

またちょっと脱線-varとlet
★1のサンプルコードの中でletが分からなかったので調べました。
変数宣言:varとlet(ES6以降)の違いは、スコープ。varはfunction内、letはブロック({~})内だそうです。


(6)コンポーネントの生成&呼び出しは<Component ・・・>と記述できる
同様の記述形式で、関数(function)も呼び出し可能。
※前の節で説明済み。

(7)配列/連想配列の内容をリストする
※★1サイトの説明の順番で、JavaScriptも含めて分からない部分を調べて備忘します。
JavaScriptで配列は、
----JavaScrpt--------------------------------------
let myarray1 = new Array();
let myarray2 = new Array(4);
let myarray3 = new Array(50, 60, 'xxx', 'yyy');
let myarray4 = [];
let myarray5 = [100, 120, "max", "over"];
--------------------------------------------------

myarray1とmyarray4は、中身が無い配列が宣言されています。
myarray4のArray()の引数を1個だけ指定した場合、要素数を指定したと解釈されるそうです。
中身は空の配列で要素数が4個ということです。
myarray3とmyarray5は、配列要素の中身(値)も設定した状態です。
値は、数値でも文字列混在でも文句言われないんですね。
(C言語くらいしか知らないので、こんな注釈が入ります。)
要素を参照する場合は、配列名[要素番号]です。要素番号は0~。
※多次元の配列の場合を検索した結果、以下のような初期化処理を含んだようなのサンプルをめっけました。
----JavaScrpt--------------------------------------
var hogearr = [];
for (var i = 0; i < 10 ; i++) { hogearr[i] = [, , , ]; };
--------------------------------------------------

10x4の配列の要素枠が確保された感じですかね。
[, , , ](カンマが3つ)で4つ要素があることを表せるみたい。
要素を取り出す場合は、たぶん hogearr[0][0]とかやるんだと思います。

JavaScriptには連想配列というのもあるそうです。(リストは無いそうです。)
----JavaScrpt--------------------------------------
let myobj1 = new Object();

let myobj4 = {};
let myobj5 = {no:100, name:"Ishigooka", age:35, sex:"male"};
--------------------------------------------------

myobj1とmyobj4では中身の無い連想配列が宣言されています。
myobj5は配列に中身を設定した状態です。
配列との違いは、Array→Objectと[]→{}を使う点と、
配列番号(添え字/インデックス)で値を指す代わりに、名前(キー)が使われます。
要素を参照する場合は、配列名[キー]とか配列名.キーです。

JavaScriptを良く知らないばっかりに前置きが長くなってしまいました。
ここからが本題で、配列を一覧的に取り出して使うmap(メソッド)の説明です。
まずは、map()についてのJavaScriptの解説を見ると、
配列名.map( コールバック関数 ); という構文だそうです。

さらにコールバック関数の部分を少し詳しく表現すると、
配列名.map( function(値, 要素番号, 配列) {・・・} ); だと説明されていて、
配列の要素単位に、コールバック関数部分が実行され、その度に引数として渡されるのが「値/その要素番号/配列そのもの」と云うことみたいです
「要素番号/配列」は不要であればfunction()に書かなければよいだけかと思います。

ここまで来てやっと★1サイトのサンプルが理解できるかと。
----JSX:------------------------------------------
class Memlist extends React.Component {
render() {
const users = [
{ name: "Tanaka", age: 26 },
{ name: "Suzuki", age: 32 },
{ name: "Yamada", age: 43 }
];
const userList = users.map((user, index) =>
<li key={index}>{user.name} (Age: {user.age})</li>
);
return (
<ul>{userList}</ul>
);
}
}

var members = <Memlist />;
--------------------------------------------------

※アロー関数式が使われているのでどーも慣れがない。しかもなんだか書式が・・・
「users.map((user, index)=>」後を{}で括る必要はないのかな?
 →1ステートメンとしかない場合は{}は省略できるそうです。
また「<li key={index}>{user.name} (Age: {user.age})</li>」は「return ・・・;」とかになってなくていいの?
 →条件の詳細は不明だがreturnを省略できるらしい。

ともかく、上記のようにやったら、最後のmembersに入る内容は、以下のようになるんだと思います。
注)下記の改行とインデントは見やすくするために入れてるだけで実際は含まれないはず。
---- members結果---------------------------------
<ul>
<li key=0>Tanaka (Age:26)</li>
<li key=1>Suzuki (Age:32)</li>
<li key=2>Yamada (Age:43)</li>
</ul>
--------------------------------------------------


◆ステータスについて
ちょっと長くなったので、節を変えます。
★1のページの説明で、以下のサンプルコードが記述されてます。
でも、さるにはわからないことだらけ。
----JSX:------------------------------------------
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = { msg: 'Hello!' };
}

render() {
return (
<div>
<h1>{this.state.msg}</h1>
<button onClick={() => this.setState({msg: 'Bye!'})}>Click Here.</button>
</div>
);
}
}
--------------------------------------------------

まずは、コンポーネントにconstructor()というメソッドを宣言してます。
通常のclass定義的に予想すると、newされたときに呼ばれるメソッドかとは思います。でもパラメタpropsもある。

これまで、newの仕方の解説はあいまいで、「<Hello param="A" />とやるとcreate(new)されて初期化される」との説明のみでした。
その裏側がどうなっているかというと・・・
React.Componenntクラス(基底クラス)内のコンストラクタにはpropsの扱いが記述されていて、新規に定義したコンポーネント(派生クラス)にconstructor()メソッドを記述していなくても、param="A"と記述された引数が、this.props.param="A"; としてセットされることになっているようです。
上記の例では、constructor()を明記してあります。そこのsuper(props);という記述が、this.props.param="A"; を実施しているそうな。super()は基底(親)クラスのコンストラクタを呼び出す関数のようです。


さらに、上記の例では、this.state = { msg: 'Hello!' }; とやっている部分があります。
そこが、基底クラスのコンストラクタには無い処理ということになります。
stateというメンバ変数は、決まった型は無いみたいで、連想配列{キー:値}として初期化されています。
・・・と勝手に解釈しました。

でもって、render()メソッドにある通り、「Click Here.」と記述されているボタンがクリックされると、this.state.msgの中身は、「Hello!」から「Bye!」に更新されます。
setState()メソッドを使用してstateを更新すると、自動的に表示内容が更新(リレンダリング)されるようです。単に更新するとそうならないとのこと。

★1のページの説明だと次がルーティングでページを切り替えるになってますが、React Nativeでも使える?必要かしら?
サンプルコードの理解不能だった部分だけ調べました。

◆react-router-dom
まずは、★1のページのサンプルコードです。
----JSX:------------------------------------------
import { BrowserRouter, Link, Route } from 'react-router-dom';

function HelloA() {
return <h1>HelloA</h1>;
}

function HelloB() {
return <h1>HelloB</h1>;
}

class Hello extends React.Component {
render() {
return (
<BrowserRouter>
<div>
<ul>
<li><Link to="/hello-a">HelloA</Link></li>
<li><Link to="/hello-b">HelloB</Link></li>
</ul>
<Route path="/hello-a" component={HelloA} />
<Route path="/hello-b" component={HelloB} />
</div>
</BrowserRouter>
);
}
}
--------------------------------------------------

サンプルコードに<BrowserRouter>、<Link>、<Route> という謎のタグが出てきます。
react-router-domは、「npm install react-router-dom --save」でインストールが必要で、
サンプルの先頭に「import { BrowserRouter, Link, Route } from 'react-router-dom';」と3つimportしてあるので、ライブラリに定義されているコンポーネントなんですね。

またちょっと脱線-linkタグ
<Link to=・・・>については、一瞬<link>タグと混同した。???
普通の<link>タグに関する解説は、こちらが分かりやすい。
https://saruwakakun.com/html-css/basic/link-rel


ルーティング(react-router-dom)がなぜ必要か以下のサイトが分かりやすかった。
https://numb86-tech.hatenablog.com/entry/2017/05/06/125333
つまり、Reactで作ると、URLは同じなのにどんどん中身が変わるページが作成できるが、ブラウザのブックマークやアクセス履歴、「戻る」などの機能が使えなくなることになってしまうので、そこをカバーするために用意されているということのようです。(あくまでも、前出の参考サイトの筆者の理解によると念押しがありました。)

やっぱり、React Nativeだと関係は薄いみたいですね。
でも途中まで書いたので、謎タグについては、書いておきます。

・まずは、react-router-domのコンポーネント(?関数)を使用する箇所(ルートのエレメント)を<BrowserRouter>・・・</BrowserRouter>で囲む必要があります。

・次に、<Route path="/hello-a" component={HelloA} />というコンポーネントですが、これは表示させようとしているURLが「path=・・・」で指定されているパスと一致した場合、「component=・・・」で指定されているコンポーネントを適用するという意味のようです。

・<Route>の前に記述されている<Link to="/hello-a">HelloA</Link>は、実際の画面上にリンクを作成/表示するもので、「to=・・・」で記述されたパスがリンク先URLを示しています。(ただし、これは仮想的なものだと思われます。じゃないと、.jsと実際のフォルダをその分だけ用意しないといけなくなりそうですよね。)

・まとめると、画面上/ブラウザ的には別のURL(パス)へのリンクを張ってあるように見せておいて、実際リンクをクリックされたときは、同じスクリプトで表示内容が制御されるようにするってことなんだ・・・と思う。

★1サイトでは、さらにURLパスの一致具合を制御する、<Route exact ・・・>とか<Switch>・・・</Switch>とかについて説明されています。ReactでWebアプリを書こうと思われてる方は、もっとパターンを知ってた方がよさげですね。



いやー長い。
長くなってしまいました。
でもこれだけの文法知識で、React Nativeのサンプルコードがすんなり理解できるんでしょうか?
まあ、ともかく先だってエミュレータで動作させてみたテンプレート「Welcome to React」のコードを見てみます。

では、続きはまたいずれ。
m(__m)

スポンサーサイト





コメントの投稿

非公開コメント

カレンダー
01 | 2024/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 - -
プロフィール

さるもすなる

Author:さるもすなる
さるです。別HPサイト「さるもすなる」から侵食してきました。 山菜/きのこ、それとタイトルにしたPPバンド籠のことをメインに徒然に・・・・暇を持て余したさるの手仕事:男手芸のブログってことで。

最新記事
最新コメント
月別アーカイブ
カテゴリ
天気予報

-天気予報コム- -FC2-
本家のHPのトップ
山菜や茸の話です
PPバンドの籠作品と作り方です
投稿をお待ちしております



PVアクセスランキング にほんブログ村 にほんブログ村 ハンドメイドブログへ



マニュアルのお申し込み



検索フォーム
リンク
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QR