React と React Native のスレ (481ﾚｽ)
上下前次1-新
1(4): 2019/03/09(土)21:29 ID:AJ6jPa0v(1) AAS
Q. Reactってなんですか？
A. ブラウザで動くウェブアプリを作るJavaScriptフレームワークです
Q. React使えば、iOSやAndroidアプリも作れるのですか？
A. 作れません。（ブラウザでなら動きます）
Q. でも動くってきいたんだけど？
A. それはReactではなくReact Nativeです。
Q. React と React Native は同じようなものじゃないの？
A. 設計思想が同じなだけで、中身は全くの別物です。
Q. React Nativeで作ればブラウザで動くの？
A. 動きません。（動くようにするサードパーティ製のライブラリならあります）
Q. React と React Native でソースコード共通化できるの？
A. UIの部分は共通化出来ません。UI以外の部分なら頑張れば
Q. このスレはどっちの話題のスレなの？
A. 両方です。どっちの話題をしているかは文脈で判断してください
2(1): 2019/03/09(土)21:41 ID:izNw5U5z(1) AAS
>>1
乙
3: 2019/03/09(土)21:44 ID:7ubvtRZR(1/2) AAS
姉妹スレ、こっちもよろしくな！
Vue vs React vs Angular その2
2chｽﾚ:tech
4: 1 2019/03/09(土)21:45 ID:7ubvtRZR(2/2) AAS
あれ？なんでID変わってるんだろｗ
5: 2019/03/10(日)13:53 ID:56gRJqyl(1) AAS
>>1
React と React Nativeをソースレベルで共通化する試み
React Native for Web (★12,764)
外部ﾘﾝｸ:github.com
React Native DOM (★3,025)
外部ﾘﾝｸ:github.com
6: 2019/03/10(日)14:06 ID:Q25DRVQl(1/2) AAS
以前ちょっと触ってみただけだけど
ReactNativeってimportしたエレメントじゃなきゃhtmlタグとかは使えんのよな
7: 2019/03/10(日)15:04 ID:5/+zyaBC(1) AAS
そんなんやりたいならガワだけネイティブのいわゆるハイブリッドフレームワーク使ってその中でreact使えば？react nativeじゃなく。
なんでそんなことしたいのか知らないけど。
8: 2019/03/10(日)15:21 ID:Q25DRVQl(2/2) AAS
去年の秋頃だったか流行ってるみたいだったから試してみだたけ
別に本格的にアプリ作ろうなんて気はなかったしReactと同じように掛けるのかなと思ったけど認識違いだったってだけの話だよ
9: 2019/03/10(日)23:12 ID:gfFE/T4s(1) AAS
Reduxの定番ミドルウェアお願いします
10: 2019/03/12(火)03:44 ID:6KkHqTtx(1) AAS
ReactでCanvas使う場合ってcomponentDidMountでcanvas.getContext("2d")ってやるの正しい？
それとも持っとReact的にもっとスマートなやり方とかある？
11: 2019/03/15(金)22:53 ID:Q5qTdV/M(1) AAS
React Native公式ブログ
外部ﾘﾝｸ:facebook.github.io
・ver 0.59
・フックが使えるようになった
・JavaScriptCore強化： Androidで性能向上、64bitサポート
・起動高速化のためのJSモジュールの遅延ロード機能
(他省略)
12(1): 2019/03/23(土)13:29 ID:Tnjwe5F0(1/3) AAS
JSXで書いたファイルを、
HTMLとJSに変換する方法があれば教えて頂けないでしょうか・・・。
13(1): 2019/03/23(土)16:40 ID:UK/ZLX81(1/3) AAS
>>12
前提知識が不明なのでとりあえず順番に
1. 「node.js インストール」でググる
2. 「npm react インストール」でググる
3. 「webpack react ビルド」でググる
概要としては node上で動くnpmコマンドで
React, webpack, Babelをインストールして、webpackでビルド
それとJSXはJavaScriptの構文拡張でしかないから
変換(ビルド)で出てくるのはJSだけ
14(2): 2019/03/23(土)16:47 ID:Tnjwe5F0(2/3) AAS
>>13
失礼しました・・・。
node.jsはすでに入れてあり、reactはcreate-react-appからのを使っています。
webpackとbabelはreactを使う上でよく聞きました（ほとんど使えませんが・・・）
＞それとJSXはJavaScriptの構文拡張でしかないから
＞変換(ビルド)で出てくるのはJSだけ
というのは、>>13さんのwebpackでビルドしてもhtmlは出ない（jsファイルのみ出来る）という事でしょうか？
15(1): 2019/03/23(土)17:42 ID:SoDVK1qs(1/3) AAS
>>14
npm run build
でdistフォルダに生成されてない？
package.jsonにscriptsって項目で
npm run 〇〇
で使えるコマンド一覧が書いてあるから一度確認してみ
16(1): 2019/03/23(土)17:42 ID:UK/ZLX81(2/3) AAS
>>14
create-react-appなら npm run build でビルド出来る (裏でwebpackやbabelが動く)
js(JSX)をビルドするだけならhtmlは出ない
create-react-appならhtmlの最適化コピーを出すようになってる
元ファイルは public/index.html にあるはず
17(2): 2019/03/23(土)18:44 ID:Tnjwe5F0(3/3) AAS
>>15
>>16
ありがとうございます
そういうことだったのですね・・・
無事出力されました。
buildしたファイルにindex.htmlができました。
改行がされず最小の表示？(min.jsの様な）になっているのですが、
こちらをj従来の読みやすさ重視で表示できる様にする方法はありませんか…？
reactで作っている傍、知人にはhtmlとjsで同じ構成のを見せたくて、
reactで書いたのに別途htmlとjsで同じものを作るのも大変なので、そういった方法があればなと。
18: 2019/03/23(土)18:48 ID:4V4ijAbJ(1) AAS
Babel
外部ﾘﾝｸ:babeljs.io
@ babel / preset-react
このプリセットには常に、次のプラグインが含まれています。
@ babel / plugin-transform-react-jsx など！
19: 2019/03/23(土)18:57 ID:SoDVK1qs(2/3) AAS
>>17
npm run eject
node_modulesのreact-scriptsをプロジェクトルートに移してから
react-scriptsの中身を書き換えてビルドプラグインとかを抜けばいいけど
詳しいやり方はQiita漁ったら確かあったと思うから探してみ
20: 2019/03/23(土)19:08 ID:UK/ZLX81(3/3) AAS
>>17
ReactはJavaScriptで動的にページを構築するからhtmlファイル自体は殆ど空っぽだよ
21: 2019/03/23(土)20:00 ID:SoDVK1qs(3/3) AAS
npm run eject やった後にできた
scripts/build.jsの
const config = configFactory('production');
↓
const config = configFactory('development');
と
config/webpack.config.jsの148行辺り
path: isEnvProduction ? paths.appBuild : undefined,
↓
path: isEnvProduction ? paths.appBuild : paths.appBuild,
に書き換えたら良さそうだね
minify掛かってなくてもやっぱ見づらいけど
上下前次1-新書関写板覧索設栞歴
あと 460 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.010s