react.js reactプロジェクトを新規作成する
従来は create-reat-app を使ってreactのアプリの開発を始めることが一般的だったがcreate-react-appが非推奨となったため「vite」にて作成する
nodejsがインストールされている状態で以下を実行
...
react.js
react.js Javascript プロジェクトごとにNodeのバージョンを変更する「Volta」を使う
Nodeのバージョンアップが激しすぎて１年も立つと過去のプロジェクトは最新のNodeで動作しなくなる。プロジェクトを変えるたびにNodeのバージョンを切り替えのは大変手間だが、それを自動的にやってくれるのが「VOLTA」である。
...
Javascript create-react-app で作ったReactアプリにMapbox GL JSを使いビルドするとエラーになる
npm start
でWebPack Dev Serverで動作させているぶんには問題ないのだが、いざBuildを行いWebサーバー上でモジュールをデプロイし実行させると以下のエラー
An error occurred whi...
Javascript reactで開発したアプリをWebサーバへ載せて動作させたら「Uncaught SyntaxError: Unexpected token ‘<'」エラーが発生
数時間ハマってしまったのでメモ。
原因はscriptタグによるjsファイルが読み込まれないこと
以下を見直す
package.json
"homepage": "***"
React Routerを使っている場合...
react.js create-react-appで作成したReactアプリのbuild出力先を変更する方法
npm run eject
を実行することで隠蔽されていたWebPack関係のファイルが出現し設定を色々変更する事ができるようになる。
react.js react にて npm run build実行時に出力先のディレクトリにあるファイルが削除されないようにする
npm run build を実行すると出力先ディレクトリのファイルがすべて削除されてしまう。
サーバーサイドのスクリプトなんかを同ディレクトリへ配置しておきたい場合困る。
/scripts/build.js を変更することで元フ...
react.js ReactにてError: error:0308010C:digital envelope routines::unsupported エラーが発生
(node:43616) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --tra...
react.js react開発時に特定のリクエストを外部サーバへ転送する方法
create-react-app hogehoge
cd hogehoge
npm start
Webpack dev serverが起動しホットリロードで開発ができるようになる。
フロント側の開発ならこれでいいのだが、サーバーサ...
react.js MUI にてエラー「Module not found: Can’t resolve ‘@emotion/react’ in ‘***/node_modules/@mui/styine’」
./node_modules/@mui/styled-engine/index.js
Module not found: Can't resolve '@emotion/react' in '***/node_modules/@mui/s...
react.js ractでcssでコンパイルエラー「Error: Can’t resolve ‘./images/***.***’ in ‘***/src’ 」
Failed to compile.
./src/***.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader...
Javascript Reactでエラー「Error: The `style` prop expects a mapping from style properties to values, not a string」
RactでJSXにStyleを記載する場合、HTML時代で書いていた以下のような書き方はNG。
<div id="hogehoge" style="width:600px;height:940px;">
実行すると以下...
Javascript MATERIAL-UIがVer5になってMUIと名称変更されている
ReactのUIライブラリであるMATERIL-UIがバージョンアップしてMUIと名称ごと変わっている。サンプルを動かしてみたがエラーが出て動作しなかった。
Ver4のURLは以下に変更となっている。
Ver4は...
FOSS4G 東京都の町丁目別 火災危険度をマッピングした
町丁目別 火災危険度マップを作った。
これは東京都消防庁が公開しているオープンデータを加工しマップアプリ化したもの。作り方をすぐ忘れるのでメモしておく。
【データソース】
・e-Statから境界データ（国勢調査 小地域）...
Javascript React.jsを入れてMaterial-UIでダッシュボード的な画面を作るところまで
プロジェクト用フォルダを用意して、必要なパッケージをインストールする
# npx create-react-app react-materialui1
# cd react-materialui1
# npm install @mat...
Javascript React.js コンポーネント(class)サンプル
ひとまず簡単な雛形(CDSを使ってHTML単体で起動可能)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title...
Javascript React Developer Tools
ReactのデバッグツールのChrom版
react.js React.js 相対パスにする方法
# npx create-react-app hogehoge
# cd hogehoge
# npm run build
これで build フォルダに公開用のファイルが出力されるが、index.html に記載されているcss,j...