ReactMixフレームワークをベースにしたReactNativeApp開発を学べる12時間パッケージ (1) Hello World!_html/css_WEB-ITnose

ReactMix https://github.com/xueduany/react-mix 昨日リリースされて以来、多くの友人から熱狂的な支持を得ています。皆さんが抱えている問題の解決に貢献できることをとても嬉しく思います。 「HTML、Css、Jquery さえ知っていれば、学習せずに MVVM を理解できるのではないか」という疑問がずっと頭の中にありました。 ReactNative をご存知ですか? もちろん、ReactMix フレームワークに合格すれば、12 時間以内にアプリの開発を開始できます。試してみましょう。

まず第一に、ReactMix の基礎は、H5、PC、iOS、 Android と winphone を 1 行のコードで実現します。それでは皆さんと一緒に。最も一般的な H5 開発例では、まずページのベースとなっているものを知る必要があります。

はい、HTML に基づいています。では、HTML で最も一般的な要素は何でしょうか?

答え: ボックス モデル

はブロック要素、インライン要素に分かれています。クイック要素は理解しやすいです。それらは div です。インライン要素は通常、span などのテキスト ノード要素です

入力ボックス、選択ドロップダウン ボックス、ボタン ボタン要素などのフォーム要素もあります。

基本的に上記で、ページの HTML をサポートできます。

ReactMix では、これらの要素も提供しています。唯一の違いは、Div、Span、Input、Select、Button など、最初の文字が大文字であることです。まず第一に、ReactNative には HTML 要素が存在しないためです。これらの要素は、ReactJs 仕様では、システムによって提供されていないコンポーネントについては、区別するために最初の文字を大文字にする必要があります。 HTML で使用する要素は同じです。

それでは、ReactNative は JSX 構文に基づいてテンプレートを実装します。 ReactJs を使ったことがある学生なら聞いたことがあると思います。

これは、JSX の構文であり、属性の値が非常に気に入っています。等号の後にオブジェクトがある場合は、{} 中括弧に基づいて、js コードを作成できます。生徒たちは、図の構文がすべて ES6+ の構文であることを確認しました。 js の機能。このように記述すると、古いバージョンのブラウザでもサポートされるのかと疑問に思う人も多いでしょう。答えは「はい」です。ReactMix には、これらの新しい構文スタイルのコードをそのまま ES5 コードに変換できる同期変換メカニズムがあり、古いバージョンのブラウザーでも正常に実行できることが保証されています。次のような新しい構文の動的デバッグもサポートしています。

WebPack とsourceMap に基づいて、es6 構文の JS コードを直接簡単にデバッグできます

OK、まず github https://github.com/xueduany/react-mix からコードをチェックアウトする必要があります (できれば Mac システム、現在すべての bash スクリプトは Mac システムに基づいて書かれています)

次に実行しますinstall.sh の主な機能は、ReactMix プロジェクトのルート ディレクトリで npm install を実行し、ReactMix/reactnative サブディレクトリで npm install を実行することです

ここに独立した ReactNative サブディレクトリがあるのはなぜですか?

以上です。ReactNative プロジェクトはデフォルトでは CSS 形式のスタイル ファイルをサポートしていないため、Css ディレクトリを ReactNative ディレクトリの外に置き、自動コンパイル ツール React.css.build.js を使用して同期を実現します。 Css を ReactNative ディレクトリに変換します

さらに、コードのこの部分は ReactMix/Web ディレクトリにあります。これは、UI コンポーネントがパッケージ化されたスクリプトを保存するためです。 if else の論理的な区別は、同じ名前の 2 つの異なる実装ファイルに直接分割され、それぞれ ReactNative ディレクトリと Web ディレクトリに配置され、H5 で使用されるか App で使用されるかを区別しやすくなります。インターフェイスは同じままです

OK、npm インストールが完了したら、ReactMix/reactnative/ios/native.xcodeproj を開き、Xcode インターフェイスを開いて、実行をクリックします

そしてシミュレーターで私たちの美しさを直接見ることができます。Sister He Sui

最初の Hello World ページを作成しましょう

ReactMix/reactnative/index.js を開きます

すべてのコードをクリアするには、次の ReactJs コードを入力します

まず、HelloWorld という基本クラス App を継承する静的クラスを定義します

class HelloWord extends App{

}

次に、レンダリング メソッドを記述し、JSX テキスト HelloWord の一部を返し、スタイルを追加します。

最後に、このクラスの静的メソッド run() を実行します。

完了!おめでとうございます!

次に、ReactMix ルート ディレクトリで WebPack を実行して同期的にコンパイルします。webpack –w –d

ReactMix/web/index をブラウザで開くと、対応するコードの H5 翻訳版が同時に表示されます。最初の HelloWorld は合計 1 時間もかからずに完成しました~^_^