React と React Native のスレ (481ﾚｽ)
上下前次1-新
432: 2022/11/27(日)18:18 ID:DGQvXdXK(1) AAS
reactでjsx使いたくないなReact.createElement使えばすむだろ
pure jsだしreact自身がメンテナだぞ
433: 2022/11/28(月)16:39 ID:bah5acf2(1) AAS
class使わんかったらええしjsxも受け入れればええやん
中途半端に色々俺ルール入れようとするからプロジェクト通したコードがグチャグチャになるんだよ
ガタガタ抜かさずに読みやすいコード書け
434: 2022/11/28(月)17:59 ID:IoJupQtf(1) AAS
それはそう
435(1): 2022/11/28(月)18:10 ID:HJ3Js2uA(1) AAS
React.createElement() は、見たことない。
クラスなのか？
今は、関数しか使わない
436: 2022/11/28(月)20:53 ID:UVD224c9(1) AAS
>>435
JSXをトランスパイルするとそれが出てくる
というか前はそれになってた
今はもちっとサイズが小さくなるコードにトランスパイルされる
437: 2022/12/03(土)08:35 ID:taaLhEhL(1) AAS
フロントエンドはAIとローコードにより死んでいきそう
438: 2022/12/03(土)10:06 ID:nGrXXmmc(1) AAS
フロントエンドの連中が死んでいったら愉快すぎるだろうな。
439(1): 2022/12/03(土)10:26 ID:yzFmn8Js(1) AAS
管理画面作れるローコードツールやばいで？
t-wadaさんの会社が出資してるやつ
ガチでフロントエンドいらんw
440: 2022/12/03(土)11:52 ID:olmTGWDy(1) AAS
できねぇ自分を棚に上げてよく言うぜ
441: 2022/12/03(土)13:16 ID:DRrYSu6r(1) AAS
フロントエンドができるのは
どのくらいのレベル？
442: 2022/12/04(日)10:14 ID:Mf+W6hFq(1) AAS
外部ﾘﾝｸ:pleasanter.org
これとか使えそうだな
443: 2022/12/04(日)11:54 ID:Wvq70p6a(1) AAS
周りが適性なさすぎて消去法でバックエンドやるハメになり
苦労もあったが経験しておけて良かった
444: 2022/12/08(木)08:12 ID:Z0lc4TAH(1) AAS
ここ本スレ？
445: 2023/01/15(日)12:22 ID:c+nrjCWx(1) AAS
みんなuseStateのとき以外でset～って関数名付けてる？
446: 2023/02/11(土)08:10 ID:vzM9dagC(1) AAS
>>439
何？ 使ってみたいから教えて
447: 2023/02/14(火)00:24 ID:L+R7vyp5(1) AAS
知らんけどAirtableとかじゃないの？
448(1): 2023/02/20(月)17:20 ID:o1ZyjHKj(1/3) AAS
Reactが始めてなので変な質問かもしれません。
React.Componentを継承したクラスを作成し、これを「new」した時点でbodyの最後に描画したいです。
具体的にはmodalのクラスなのですが、
import modalClass from './modalClass';
const hoge = new modalClass(); //この時点でbodyの最後に描画されて
hoge.show(); //これで描画されたモーダルが表示される
だけでモーダルを表示したいです。
constructor中でrenderを実行して、戻り値をReact.Domでbodyの最後に置換すれば可能な気がしますが、
このような使い方は一般的でしょうか？
htmlに「<modalClass />」の記述をしたくありません。
449: 2023/02/20(月)17:53 ID:1+J+V+Et(1/2) AAS
>>448
一般的ではないね。ReactコンポーネントであればJSXに<Modal />などと書いておきReactのライフサイクルの中でstate更新して表示/非表示を制御するのが一般的。
あとDOMツリーに要素を「追加」する操作を「描画」と呼んでると今後の理解の妨げになる可能性があるから一回整理したほうが良いかも。(Reactはライフサイクルの意識が結構大事なため)
450(1): 2023/02/20(月)18:41 ID:o1ZyjHKj(2/3) AAS
はい、一般的ではないのは十分承知しています。
ライフサイクルなどを無視してHTMLの管理と描画のみにreactを使用したいと考えています。
ソースコードとしては下記で行けたのですが、このような使い方が一般的に許されるのかが不安です。
class ExampleComponent extends React.Component {
constructor(props) {
super(props);
const element = this.render();
const container = document.createElement('div');
document.body.appendChild(container);
ReactDOM.render(element, container);
}
show() {
//モーダル表示のDOMの操作
}
render() {
return (
<div>
/** モーダルのHTMLソース **/</div>
);
}
}
451: 2023/02/20(月)18:48 ID:o1ZyjHKj(3/3) AAS
動作するのは確認できたので、あとはプロジェクトリーダーの好み次第ですかね。
これが許されればサーバ側のviewでHTML管理しなくて済むようになりますので
コンポーネントの使いまわしが楽になるのですが。
javascriptのみで完結できるので。
452(1): 2023/02/20(月)20:09 ID:CBterFMa(1) AAS
Reactをrender()するHTML要素を動的に追加するのはありだと思うよ
でもそのロジックをReactコンポーネントに入れる必要はないな
ユーティリティな関数でそれをすればReactコンポーネントはクラスではなく関数コンポーネントにもできるし
453: 2023/02/20(月)20:40 ID:1+J+V+Et(2/2) AAS
まず動くようにしたのは素晴らしいけど、たぶんリーダーかは指摘が入るはず。
454: 2023/02/20(月)21:16 ID:zSsoBtA6(1) AAS
最初はお手本通りrender関数とコンポーネント挿入関数に2ファイルに別けてたのですが、
一機能実現するために手順を踏んで２ファイル使うのが解り辛いかなと思いました。
作った自分は解るのですが、引き継ぐ人にはシンプルな手順で使えるようにしておきたいです。
render関数とコンポーネントの挿入関数を試行錯誤して一つのファイルにまとめたら >>450のようになりました。
>>450なら
import ExampleComponent from './examplecomponent';
const modal = new ExampleComponent ();
modal.show("メッセージです", "タイトル");
だけで済むので、クラスのusageに書いておけば利用手順も簡単でどの画面でも使えると思います。
reactの定石からは離れますので、やはりreactのプロの目から見ると違和感あるのですね。
455: 2023/02/20(月)23:39 ID:qmqKnMRQ(1) AAS
Windowsアプリのメッセージダイアログみたいにメソッドひとつで呼び出せる手軽さを実現したいって理解でいいのかな
456(1): 2023/02/21(火)02:04 ID:R25lIONK(1) AAS
あちこちに<ExampleComponent />追加したくないってことかな？その場合はProviderやContextを使うのが正式なやり方になると思う。
レイアウトに1個<ExampleComponent />追加する程度はふつうにやることなのでそれはみんなわかると思う。
457: 2023/02/21(火)08:04 ID:pYWIE5Lo(1/5) AAS
>Windowsアプリのメッセージダイアログみたいにメソッドひとつで呼び出せる手軽さを実現したいって理解でいいのかな
はい、それであっています。
>あちこちに<ExampleComponent />追加したくないってことかな？
はい、ReactのメリットはJavascriptにHTMLを書ける事なので、HTMLとの依存関係を切って
なるべくJavascriptだけで完結させたいです。
とくにモーダルのような汎用的などこでも使うものは、HTMLに<ExampleComponent />を記述させたくないです。
458: 2023/02/21(火)13:34 ID:5AAcCPtU(1/3) AAS
メッセージダイアログ、確認ダイアログ、エラーダイアログなんかの共通系は
どこでも仕込みなしで呼び出したい
あるあるな要求だと思うけどReactではどうやるのが定石なんだろうね
459: 2023/02/21(火)13:52 ID:pYWIE5Lo(2/5) AAS
レイアウトが必要なコンポーネントは、HTMLファイルにreactのタグを埋め込む方向で理解できるのですが
メッセージダイアログのような画面中のレイアウトが必要無い物については
わざわざHTMLファイルにタグ埋め込んでおく必要ないのではと考えています。
javascriptで動的にタグを埋め込むのが良いと思いますが、タグ埋め込む機能をrender機能のファイルと別けたくないですね。
460: 2023/02/21(火)14:46 ID:4BxaQg+7(1/3) AAS
Railsとかの既存画面にReactでモーダルだけ作ろうって話？
jQueryの代わりにReactみたいな使い方ならその時点で定石から外れてるわな
461: 2023/02/21(火)14:59 ID:5AAcCPtU(2/3) AAS
いや、そういう話ではないよ
上下前次1-新書関写板覧索設栞歴
あと 20 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.019s