usomaru技術ぶろぐ

学んだことをちょこちょこメモ( ..)φ

React

Vite設定ファイルの基本と他ツールとの違いまとめ

はじめに 前回ビルドツールについてまとめました。 今回はViteで使う設定ファイル(vite.config.ts)を中心に、設定ファイルについてまとめます。 defineConfig を使ったVite設定の基本 Viteの設定ファイルは通常、プロジェクトルートに vite.config.ts として…

Reactに乗り換えて初めて意識した、JavaScriptアプリケーションのビルドツール(Vite vs Webpack)

ブログのタイトルをいれたら生成された画像 はじめに Angularを使っていた頃は、ビルドツールについて深く考えたことはありませんでした。 CLIが勝手になんかいい感じにやっていたからです。 ですがReactでは、「どのビルドツールを使うか?」という選択から…

【React】Angularと比較しながら親子コンポーネント間のデータ受け渡し

はじめに Angular Tour of heroesの3章(フィーチャーコンポーネントの作成)をReactで試してみました。 angular.jp 久しぶりすぎていっぱい忘れてました HeroDetailComponentを作成する Heroの詳細が表示されるコンポーネントを新たに作成します。 今回は普通…

【React】Angularと比較しながら一覧の表示とCSS

はじめに Angular Tour of heroesの2章(リストの表示)をReactで試してみました。 angular.jp ヒーローのモック作成と一覧表示 Angularで一覧の表示をするとき、HTML側で*ngForをすることで表示できます。 配列のデータをテーブルで表示したいときとかによく…

【React】Angularと比較しながらデータの表示

はじめに Angular Tour of heroesの1章(ヒーローエディター)をReactで試してみました。 angular.jp heroプロパティの表示 export default function Heroes() { const hero = 'Windstorm'; return( <h2>{hero}</h2> ); } Angularは中括弧2つでしたが、Reactは1つ。 中…

【React】Angularと比較しながらプロジェクト・コンポーネント作成

はじめに 業務では6年以上Angularを使用しています。 ですが、Reactに興味があるので、AngularとReactを比較してみながらReactを勉強してみることにしました。 ひとまずプロジェクトの作成とコンポーネントの作成まで。 環境 windows 11 Node v16.14.2 React…