備忘録

備忘録

React

ASP.NET Core + Vite + React.js (TypeScript)でHelloWorldする方法

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する方…

ASP.NET Core + 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を同時に使う方法

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

React でルーティングする方法

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

React で ESLint を使う方法

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

React で Bootstrap を使う方法

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

React で HelloWorld する方法

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