okuzawats / markdownapp

「React × TypeScript で手を動かながら学ぶ！モダンなフロントエンド開発入門 | Techpit」で作るMarkdownビューワ

Markdown App

React × TypeScript で手を動かながら学ぶ！モダンなフロントエンド開発入門で作るMarkdownアプリです。

• URL

環境構築

$ node -v
v20.2.0
$ npm -v
9.7.2

$ npm i webpack@5 webpack-cli@4
$ npm i typescript@4 ts-loader@9
$ npm i react@17 react-dom@17 @types/react@17 @types/react-dom@17
$ npm i react-router-dom@5 @types/react-router-dom@5
$ npm i styled-components@5 @types/styled-components@5
$ npm i react-markdown@6
$ npm i marked@2 @types/marked@2
$ npm i sanitize-html@2 @types/sanitize-html@2
$ npm i dexie@3
$ npm i worker-loader@3

開発用

$ npm i webpack-dev-server@3
$ npm i prettier --save-dev

ビルド

$ npm run build

./dist/index.js にファイルが出力される。

デバッグ用実行は以下のコマンド。webpack-dev-server により、ローカル環境で実行される。

$ npm start

フォーマット

$ npm run prettier-format