React と React Native のスレ

このスレへの固定リンク： http://5chb.net/r/tech/1552134567/
ヒント：5chスレのurlに http://xxxx.5chb.net/xxxx のようにbを入れるだけでここでスレ保存、閲覧できます。

1デフォルトの名無しさん2019/03/09(土) 21:29:27.97ID:AJ6jPa0v

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デフォルトの名無しさん2019/03/09(土) 21:41:37.77ID:izNw5U5z

>>1
乙

3デフォルトの名無しさん2019/03/09(土) 21:44:22.99ID:7ubvtRZR

姉妹スレ、こっちもよろしくな！

Vue vs React vs Angular その2
http://2chb.net/r/tech/1552122580/

412019/03/09(土) 21:45:02.26ID:7ubvtRZR

あれ？なんでID変わってるんだろｗ

5デフォルトの名無しさん2019/03/10(日) 13:53:47.03ID:56gRJqyl

>>1
React と React Nativeをソースレベルで共通化する試み

React Native for Web (★12,764)
https://github.com/necolas/react-native-web

React Native DOM (★3,025)
https://github.com/vincentriemer/react-native-dom

6デフォルトの名無しさん2019/03/10(日) 14:06:23.16ID:Q25DRVQl

以前ちょっと触ってみただけだけど
ReactNativeってimportしたエレメントじゃなきゃhtmlタグとかは使えんのよな

7デフォルトの名無しさん2019/03/10(日) 15:04:28.91ID:5/+zyaBC

そんなんやりたいならガワだけネイティブのいわゆるハイブリッドフレームワーク使ってその中でreact使えば？react nativeじゃなく。
なんでそんなことしたいのか知らないけど。

8デフォルトの名無しさん2019/03/10(日) 15:21:54.07ID:Q25DRVQl

去年の秋頃だったか流行ってるみたいだったから試してみだたけ
別に本格的にアプリ作ろうなんて気はなかったしReactと同じように掛けるのかなと思ったけど認識違いだったってだけの話だよ

9デフォルトの名無しさん2019/03/10(日) 23:12:46.62ID:gfFE/T4s

Reduxの定番ミドルウェアお願いします

10デフォルトの名無しさん2019/03/12(火) 03:44:15.71ID:6KkHqTtx

ReactでCanvas使う場合ってcomponentDidMountでcanvas.getContext("2d")ってやるの正しい？
それとも持っとReact的にもっとスマートなやり方とかある？

11デフォルトの名無しさん2019/03/15(金) 22:53:51.78ID:Q5qTdV/M

React Native公式ブログ
https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059
　・ver 0.59
　・フックが使えるようになった
　・JavaScriptCore強化：　Androidで性能向上、64bitサポート
　・起動高速化のためのJSモジュールの遅延ロード機能
　(他省略)

12デフォルトの名無しさん2019/03/23(土) 13:29:30.06ID:Tnjwe5F0

JSXで書いたファイルを、
HTMLとJSに変換する方法があれば教えて頂けないでしょうか・・・。

13デフォルトの名無しさん2019/03/23(土) 16:40:55.66ID:UK/ZLX81

>>12
前提知識が不明なのでとりあえず順番に

　1.　「node.js インストール」でググる
　2.　「npm react インストール」でググる
　3.　「webpack react ビルド」でググる

概要としては node上で動くnpmコマンドで
React, webpack, Babelをインストールして、webpackでビルド

それとJSXはJavaScriptの構文拡張でしかないから
変換(ビルド)で出てくるのはJSだけ

14デフォルトの名無しさん2019/03/23(土) 16:47:46.96ID:Tnjwe5F0

>>13
失礼しました・・・。
node.jsはすでに入れてあり、reactはcreate-react-appからのを使っています。
webpackとbabelはreactを使う上でよく聞きました（ほとんど使えませんが・・・）

＞それとJSXはJavaScriptの構文拡張でしかないから
＞変換(ビルド)で出てくるのはJSだけ

というのは、>>13さんのwebpackでビルドしてもhtmlは出ない（jsファイルのみ出来る）という事でしょうか？

15デフォルトの名無しさん2019/03/23(土) 17:42:18.24ID:SoDVK1qs

>>14
npm run build
でdistフォルダに生成されてない？
package.jsonにscriptsって項目で
npm run 〇〇
で使えるコマンド一覧が書いてあるから一度確認してみ

16デフォルトの名無しさん2019/03/23(土) 17:42:53.33ID:UK/ZLX81

>>14
create-react-appなら npm run build でビルド出来る (裏でwebpackやbabelが動く)

js(JSX)をビルドするだけならhtmlは出ない
create-react-appならhtmlの最適化コピーを出すようになってる
元ファイルは public/index.html にあるはず

17デフォルトの名無しさん2019/03/23(土) 18:44:19.14ID:Tnjwe5F0

>>15
>>16
ありがとうございます
そういうことだったのですね・・・
無事出力されました。

buildしたファイルにindex.htmlができました。
改行がされず最小の表示？(min.jsの様な）になっているのですが、
こちらをj従来の読みやすさ重視で表示できる様にする方法はありませんか…？

reactで作っている傍、知人にはhtmlとjsで同じ構成のを見せたくて、
reactで書いたのに別途htmlとjsで同じものを作るのも大変なので、そういった方法があればなと。

18デフォルトの名無しさん2019/03/23(土) 18:48:41.08ID:4V4ijAbJ

Babel
https://babeljs.io/docs/en/babel-preset-react

@ babel / preset-react

このプリセットには常に、次のプラグインが含まれています。
@ babel / plugin-transform-react-jsx など！

19デフォルトの名無しさん2019/03/23(土) 18:57:04.81ID:SoDVK1qs

>>17
npm run eject
node_modulesのreact-scriptsをプロジェクトルートに移してから
react-scriptsの中身を書き換えてビルドプラグインとかを抜けばいいけど

詳しいやり方はQiita漁ったら確かあったと思うから探してみ

20デフォルトの名無しさん2019/03/23(土) 19:08:09.96ID:UK/ZLX81

>>17
ReactはJavaScriptで動的にページを構築するからhtmlファイル自体は殆ど空っぽだよ

21デフォルトの名無しさん2019/03/23(土) 20:00:56.18ID:SoDVK1qs

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掛かってなくてもやっぱ見づらいけど

22デフォルトの名無しさん2019/03/23(土) 23:26:19.57ID:bpH0UPT8

とりあえずなんか見せるためだけなら、最終的にブラウザで表示されてる html だけとってこれば？ページ表示してブラウザの保存機能でここまでならできる。 js は react じゃない部分だけ取り出すのはむずいと思う。自分で書き直してあげるしかない。

23デフォルトの名無しさん2019/04/27(土) 22:25:13.20ID:Ud86wEGC

そういやReactでClassコンポーネント作るとき
extends React.Componentって書くけど
自作クラスを中間クラスとして中継して継承するのってあんまやらないもんなの？

24デフォルトの名無しさん2019/05/11(土) 11:04:25.28ID:dFSThr/t

継承はせずに単なるコンポジットかHigher Order Componentsでやってる

25デフォルトの名無しさん2019/05/18(土) 13:26:28.87ID:IcnCnpvi

classコンポーネントはほぼ使わないな
前はrecompose使ってたし今はhooksあるし

26デフォルトの名無しさん2019/05/18(土) 17:08:52.29ID:4C+see96

ほんとクラスのキッタネエ構文大嫌いだわ
そもそも生まれてこなきゃ良かったのにオブジェクト指向つってもクラスベースじゃないっつーの
es2015でねじ込んだヤツ呪われろ

27デフォルトの名無しさん2019/06/11(火) 13:27:33.61ID:vib91KXZ

React + Redux を使用したモダンフロントエンド開発
https://www.udemy.com/react-redux-basic/

これを1200円で購入したよって人いる・・・？
Udemyはしょっちゅう1200円セールしてるけど、これも1200円になったりするかな
現状の9600円となるとお財布が厳しくて・・・

28デフォルトの名無しさん2019/06/13(木) 10:37:32.28ID:euXigNzW

React Native 公式blog 2019/06/12
https://facebook.github.io/react-native/blog/2019/06/12/react-native-open-source-update
React Native 0.60, TurboModule, Lean Core, アップグレードコマンドの改善などの話

29デフォルトの名無しさん2019/06/13(木) 10:44:16.38ID:euXigNzW

React Nativeの改善に関するサブプロジェクトあるいは用語

Lean Core：　　リポジトリの再編成(コンポーネントの分離)
TurboModules： NativeModulesの新構造(JSIを使用した改善)
Fabric：　　　　　UIレイヤの新構造(JSIを使用した改善)
JSI：　　　　　　 JavaScript Interface, JS-Native間のブリッジを高性能化する仕組み

30デフォルトの名無しさん2019/07/01(月) 11:44:34.42ID:z9YX7xX6

みんなReduxの非同期処理どうしてる？

31デフォルトの名無しさん2019/07/01(月) 13:21:05.84ID:PO46Zlgj

オレオレミドルウェア
suspenseが来たらreduxもろとも捨てる

32デフォルトの名無しさん2019/07/06(土) 17:25:24.51ID:GNb7wQCP

React+Reduxやってるけど、MとVM的なものが分離されないのがつらくなってきた。
他のfluxフレームワークだとどうなんだろう。

33デフォルトの名無しさん2019/07/06(土) 17:57:41.84ID:TSNTMph3

所詮プレゼンテーションレイヤーのフロントエンドにMを持ち込むタコは何を使っても同じ

34デフォルトの名無しさん2019/07/06(土) 19:48:01.42ID:GNb7wQCP

>プレゼンテーションレイヤーのフロントエンドにMを持ち込む

なにかマウントとりたい意思は伝わってくるけどさすがに意味不明。

35デフォルトの名無しさん2019/07/06(土) 19:58:59.36ID:SiQr95jR

MVCとかMVVMとかって小さい単位での独立部品の切り出しを考えたら結構邪魔なんだよね

36デフォルトの名無しさん2019/07/06(土) 20:56:58.71ID:apheD/Vh

道具は悪くない
設計者が悪い

37デフォルトの名無しさん2019/07/07(日) 00:32:53.73ID:eaenhCbM

Announcing React Native 0.60
https://facebook.github.io/react-native/blog/2019/07/03/version-60

38デフォルトの名無しさん2019/08/04(日) 01:11:18.51ID:k7LAQow0

久々に動かしたらmetro bundlerなるものができてた
ナンジャコリャ

39デフォルトの名無しさん2019/08/16(金) 09:00:38.45ID:DTIEgPs0

公式blogから

React 16.9.0 およびロードマップの更新
https://reactjs.org/blog/2019/08/08/react-v16.9.0.html

新しいReact DevTools
https://reactjs.org/blog/2019/08/15/new-react-devtools.html

40デフォルトの名無しさん2019/08/16(金) 11:07:23.70ID:SpwmZ6gR

半年ぶりか
滞ってるな

41デフォルトの名無しさん2019/08/16(金) 14:14:55.65ID:fLRfCcm2

オワコンなのかな

42デフォルトの名無しさん2019/08/16(金) 16:05:56.38ID:DTIEgPs0

・Hooksのフォローアップの作業量を過小評価していた
・Concurrent Mode と Suspense for Data Fetching の作業に注力
　Facebookのサイトで実際に試していてリリースに向けて修正中

この辺で時間掛かっているらしい

43デフォルトの名無しさん2019/08/16(金) 23:37:57.69ID:RmCywHfR

hooks はなあ
モナド欲しい