Ⅰ. はじめに タイトルの通り「HandsontableをReactで利用する方法」です Ⅱ. 手順 1. 必要なパッケージをインストールする npm install handsontable @handsontable/react 2. サンプルプログラムを書く import { registerAllModules } from 'handsontable/reg…

Ⅰ. はじめに タイトルの通り「ReactでGoogleMAP利用する方法」です。 Ⅱ. 手順 1. Google MAP PlatformのAPIキーを生成する https://console.cloud.google.com/google/maps-apis/credentials 2. 必要なライブラリをインストールする npm install @googlemaps/…

Ⅰ. はじめに タイトルの通り「EChartsを利用してグラフを描画する方法」です Ⅱ. 手順 1. ECharts をインストールする npm install echarts-for-react 2. サンプルコードを書く import ReactECharts from 'echarts-for-react' export default function App() …

2023/09/24 追記 VisualStudioが公式にTypeScript, Vite対応予定 https://devblogs.microsoft.com/visualstudio/new-react-typescript-spa-templates-and-more/ Ⅰ. はじめに タイトルの通り「ASP.NET Core + Vite + React.js (TypeScript)でHelloWorldする方…

2023/01/24追記 本記事内容は非推奨です何か特別な理由がない限りViteを利用した方法を推奨します （webpackよりもViteの方が高速で動作する事が理由です） https://kagasu.hatenablog.com/entry/2023/01/24/121703 Ⅰ. はじめに タイトルの通り「ASP.NET Cor…

Ⅰ. はじめに タイトルの通り「react-bootstrapとreact-router-domを同時に使う方法」です。 Ⅱ. やり方 1. 必要なライブラリをインストールする npm i -D bootstrap react-bootstrap react-router-dom react-router-bootstrap 2. ファイルを編集する src/main…

Ⅰ. はじめに Ⅱ. やり方 1. react-router-dom をインストールする 2. ファイルを編集する 実行結果 参考 Ⅰ. はじめに タイトルの通り「React でルーティングする方法」です。 Ⅱ. やり方 1. react-router-dom をインストールする npm i -D react-router-dom 2.…

Ⅰ. はじめに タイトルの通り「React で ESLint を使う方法」です。 Ⅱ. やり方 1. 新規プロジェクトを作成する create-react-app hello-world 2. ESLint をインストールする npm i -g eslint 2. ESLint を初期化する 以下コマンド実行後、ESLint の設定ファイ…

Ⅰ. はじめに タイトルの通り「React で Bootstrap を使う方法」です。 Ⅱ. やり方 1. react-bootstrap, bootstrap をインストールする npm install -D react-bootstrap bootstrap 2. ファイルを編集する src/index.js import 'bootstrap/dist/css/bootstrap.m…

Ⅰ. はじめに タイトルの通り「React で HelloWorld する方法」です。 Ⅱ. やり方 1. 新規プロジェクトを作成する npx create-react-app hello-world 2. サーバを起動する cd hello-world npm start 3. src/App.js を書き換える import React from 'react' fun…