2ちゃんねる スマホ用 ■掲示板に戻る■ 全部 1- 最新50    

React と React Native のスレ

1 :デフォルトの名無しさん:2019/03/09(土) 21:29:27.97 ID:AJ6jPa0v.net
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.77 ID:izNw5U5z.net
>>1


3 :デフォルトの名無しさん:2019/03/09(土) 21:44:22.99 ID:7ubvtRZR.net
姉妹スレ、こっちもよろしくな!

Vue vs React vs Angular その2
https://mevius.5ch.net/test/read.cgi/tech/1552122580/

4 :1:2019/03/09(土) 21:45:02.26 ID:7ubvtRZR.net
あれ?なんでID変わってるんだろw

5 :デフォルトの名無しさん:2019/03/10(日) 13:53:47.03 ID:56gRJqyl.net
>>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.16 ID:Q25DRVQl.net
以前ちょっと触ってみただけだけど
ReactNativeってimportしたエレメントじゃなきゃhtmlタグとかは使えんのよな

7 :デフォルトの名無しさん:2019/03/10(日) 15:04:28.91 ID:5/+zyaBC.net
そんなんやりたいならガワだけネイティブのいわゆるハイブリッドフレームワーク使ってその中でreact使えば?react nativeじゃなく。
なんでそんなことしたいのか知らないけど。

8 :デフォルトの名無しさん:2019/03/10(日) 15:21:54.07 ID:Q25DRVQl.net
去年の秋頃だったか流行ってるみたいだったから試してみだたけ
別に本格的にアプリ作ろうなんて気はなかったしReactと同じように掛けるのかなと思ったけど認識違いだったってだけの話だよ

9 :デフォルトの名無しさん:2019/03/10(日) 23:12:46.62 ID:gfFE/T4s.net
Reduxの定番ミドルウェアお願いします

10 :デフォルトの名無しさん:2019/03/12(火) 03:44:15.71 ID:6KkHqTtx.net
ReactでCanvas使う場合ってcomponentDidMountでcanvas.getContext("2d")ってやるの正しい?
それとも持っとReact的にもっとスマートなやり方とかある?

11 :デフォルトの名無しさん:2019/03/15(金) 22:53:51.78 ID:Q5qTdV/M.net
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.06 ID:Tnjwe5F0.net
JSXで書いたファイルを、
HTMLとJSに変換する方法があれば教えて頂けないでしょうか・・・。

13 :デフォルトの名無しさん:2019/03/23(土) 16:40:55.66 ID:UK/ZLX81.net
>>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.96 ID:Tnjwe5F0.net
>>13
失礼しました・・・。
node.jsはすでに入れてあり、reactはcreate-react-appからのを使っています。
webpackとbabelはreactを使う上でよく聞きました(ほとんど使えませんが・・・)

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

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

15 :デフォルトの名無しさん:2019/03/23(土) 17:42:18.24 ID:SoDVK1qs.net
>>14
npm run build
でdistフォルダに生成されてない?
package.jsonにscriptsって項目で
npm run 〇〇
で使えるコマンド一覧が書いてあるから一度確認してみ

16 :デフォルトの名無しさん:2019/03/23(土) 17:42:53.33 ID:UK/ZLX81.net
>>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.14 ID:Tnjwe5F0.net
>>15
>>16
ありがとうございます
そういうことだったのですね・・・
無事出力されました。

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

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

18 :デフォルトの名無しさん:2019/03/23(土) 18:48:41.08 ID:4V4ijAbJ.net
Babel
https://babeljs.io/docs/en/babel-preset-react

@ babel / preset-react

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

19 :デフォルトの名無しさん:2019/03/23(土) 18:57:04.81 ID:SoDVK1qs.net
>>17
npm run eject
node_modulesのreact-scriptsをプロジェクトルートに移してから
react-scriptsの中身を書き換えてビルドプラグインとかを抜けばいいけど

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

20 :デフォルトの名無しさん:2019/03/23(土) 19:08:09.96 ID:UK/ZLX81.net
>>17
ReactはJavaScriptで動的にページを構築するからhtmlファイル自体は殆ど空っぽだよ

21 :デフォルトの名無しさん:2019/03/23(土) 20:00:56.18 ID:SoDVK1qs.net
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.57 ID:bpH0UPT8.net
とりあえずなんか見せるためだけなら、最終的にブラウザで表示されてる html だけとってこれば?ページ表示してブラウザの保存機能でここまでならできる。 js は react じゃない部分だけ取り出すのはむずいと思う。自分で書き直してあげるしかない。

23 :デフォルトの名無しさん:2019/04/27(土) 22:25:13.20 ID:Ud86wEGC.net
そういやReactでClassコンポーネント作るとき
extends React.Componentって書くけど
自作クラスを中間クラスとして中継して継承するのってあんまやらないもんなの?

24 :デフォルトの名無しさん:2019/05/01(水) 01:56:26.63 ID:rAvBxnqcP
React Native関連の記事を見てみると、親コンポーネントから子コンポーネントへ渡されたpropsは書き換え不可と書かれているのですが、正しいのでしょうか。

25 :デフォルトの名無しさん:2019/05/11(土) 11:04:25.28 ID:dFSThr/t.net
継承はせずに単なるコンポジットかHigher Order Componentsでやってる

26 :デフォルトの名無しさん:2019/05/18(土) 13:26:28.87 ID:IcnCnpvi.net
classコンポーネントはほぼ使わないな
前はrecompose使ってたし今はhooksあるし

27 :デフォルトの名無しさん:2019/05/18(土) 17:08:52.29 ID:4C+see96.net
ほんとクラスのキッタネエ構文大嫌いだわ
そもそも生まれてこなきゃ良かったのにオブジェクト指向つってもクラスベースじゃないっつーの
es2015でねじ込んだヤツ呪われろ

28 :デフォルトの名無しさん:2019/06/11(火) 13:27:33.61 ID:vib91KXZ.net
React + Redux を使用したモダンフロントエンド開発
https://www.udemy.com/react-redux-basic/

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

29 :デフォルトの名無しさん:2019/06/13(木) 10:37:32.28 ID:euXigNzW.net
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, アップグレードコマンドの改善などの話

30 :デフォルトの名無しさん:2019/06/13(木) 10:44:16.38 ID:euXigNzW.net
React Nativeの改善に関するサブプロジェクトあるいは用語

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

10 KB
新着レスの表示

掲示板に戻る 全部 前100 次100 最新50
名前: E-mail (省略可) :

read.cgi ver 2014.07.20.01.SC 2014/07/20 D ★