React + Typescript + MaterialUI 表にレコードを追加したい

投稿者: Anonymous reactもmaterialuiも初心者です 質問用に余計なコードを除ければよいのですがすみません APIから取得したレコードを表に追加表示したいと思い以下のコードを作成しました import React, { useState } from ‘react’; import GenericTemplate from ‘../lib/GenericTemplate’; import { makeStyles } from ‘@material-ui/core/styles’; import Table from ‘@material-ui/core/Table’; import TableBody from ‘@material-ui/core/TableBody’; import TableCell from ‘@material-ui/core/TableCell’; import TableContainer from ‘@material-ui/core/TableContainer’; import TableHead from ‘@material-ui/core/TableHead’; import TableRow from ‘@material-ui/core/TableRow’; import Paper from ‘@material-ui/core/Paper’; import apiTransactionHistoryCoin from ‘../lib/apiTransactionHistoryCoin’ const…(Continue Reading)

JSXのrender()で別の関数の戻り値だけを出力することができない理由を知りたい

投稿者: Anonymous var React = require(‘react’); module.exports = React.createClass({ renderActually: function() { return <p>hoge</p>; }, render: function() { return {this.renderActually()}; } }); のようなJSXファイルを利用しようとすると、コンパイル時にエラーが出ます。 代わりに render: function() { return <p>hoge</p>; } あるいは render: function() { return <div>{this.renderActually()}</div>; } とすれば正常にコンパイルされて動作します。最初のコードでエラーが起こるのはJSXのどういった仕様あるいは制限によるものでしょうか。 解決 自己解決しました。 コードが評価される順序を気にする必要があります。 renderActually: function() { return <p>hoge</p>; }, render: function() { return <span>{this.renderActually()}</span>; } は、コンパイル後 renderActually:…(Continue Reading)

JSXで配列をループで回して2個ごとにdivで纏めたい

投稿者: Anonymous 現在、特定の要素が集まった集合があり、それをループで回して2個の要素毎にdivで纏めたいです。 完成形のHTMLの例を挙げると以下の様な感じです。 <div class=”row”> <div class=”hoge”/> <div class=”hoge”/> </div> <div class=”row”> <div class=”hoge”/> <div class=”hoge”/> </div> 上記の様なHTMLを出力する為に、以下の様なjsxを書きました。 render () { return ( <React.Fragment> {this.props.hoges.map((hoge, index) => ( {index % 2 == 0 && <div className=”row”> } <div class=”hoge”/> {index % 2 == 1 && </div> } ))} </React.Fragment> ); } しかしこの記法では2種類の文法的なエラーが検出されている様です。 一つ目は閉じないdivタグを宣言している点。 二つ目はmap内で{}を使おうとしている点。…(Continue Reading)

jsxファイルをjsファイルで記述するにはどんなパッケージが必要なのでしょうか?

投稿者: Anonymous create-react-appにでプロジェクトを開始すると、最初から拡張子が.jsファイル内にjsx記法を使うことができますが、一体どのパッケージがその処理を担っているのでしょうか react-scriptsがよしなにやってくれているとは思うのですが、 react-scriptsは裏側でいろんなパッケージをinstallしていたり設定ファイルを書いていたりするイメージがあり、結局どのパッケージがjsxをjsファイル内でも記述できるようにしているのか疑問です。 どうぞよろしくお願いします。 解決 こんにちは、 meru さん ご質問のjsx記法の処理についてですが、基本的には babel というJavaScriptコンパイラがその役割を担っています。 https://babeljs.io/docs/en/#jsx-and-react さらに具体的には、以下のプラグインで jsx から JavaScriptオブジェクト にトランスパイルしているので、ご質問の機能は以下で実行されています。 https://babeljs.io/docs/en/babel-plugin-transform-react-jsx 参考になれば、幸いです。 回答者: Anonymous

React.jsでコメントアウトができずアロー関数を使った表示ができない

投稿者: Anonymous React.jsでアロー関数を使って表記リストを表示しようとしています。 参考書『React.js & Next.js超入門』に掲載されていたプログラムで Webでサンプルコードのダウンロードができるようなのですが、zipファイルの解凍でエラーが出て見れない状態です。 問題 ①React.js部分は、Javaスクリプトなので、以下の記事を参考にすると{// }のコメントアウトが使えるはずですが、実行中のコードではコメントとして認識されません。 参考記事: React JSX コメントを書きたい! – かもメモ ② Webブラウザでは以下のように表示されるはずですが、現行のコードを実行したところ「wait…」と表示されます。 ブラウザの更新やGoogleChrome以外でも、確認しましたが表示が変わりません。 <div id =”root”>wait…</div>の部分のデフォルトのままということでしょうか。 表示したいもの React Google *Googleの検索サイトです [※Googleに移動][3 http://google.com] 現在表示されるもの React wait… ③Reactの表記について ダブルクォート” “とシングルクォート’ ‘の使い分けが、以下のコードではcolor: ‘white’,以下がシングルになっているのですが、どのような決まりなのでしょうか。 ここはCSSでしょうか。 const dfn = { fontSize: “20pt”, padding: “10px”, } const dt = { fontSize: “16pt”, color: ‘white’, backgroundColor:…(Continue Reading)

text/babel とはなんですか?

投稿者: Anonymous Reactのドキュメントを読み始めました。 Getting Started – React に 自前のテキストエディタを使いたい場合は、この HTML ファイルをダウンロード・編集して、ブラウザを使ってからローカルファイルシステムから開くことができます。ランタイムでの遅いコード変換が行われる為、簡単なデモに留めておくことをおすすめします。 とあるので、「このHTMLファイル」を開いてみると下記のようになっていました。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> <!– Don’t use this in production: –> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById(‘root’) ); </script> <!– Note: this page is a great way to…(Continue Reading)