Reactを使ったモダンなフロントエンド開発の環境構築 - Qiita

はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作成するための

[yuki_2021]

やれやれ、環境構築だけでこんなに面倒くさいのか。。暇なときに手を動かして勉強しよう。

[iR3]

ふむふむライブラリ等も色々ね

[shiradofu]

react/typescript/styled-component/storybook/eslint/prettier

[Nyoho]

TypeScript

[endok]

ちょっと前に似たような環境を自分で作ったけど1週間くらいかかった。

[slash_01]

storybookとか、フォーマッタとかは知らんかった。

[kijtra]

まあ長年積み重ねて普段から使ってるものをゼロから全て入れるとなると大変に感じるよな。

[everybodyelse]

つら

[jsstudy]

・UIライブラリとしてReact　・型のある言語としてTypeScript　・スタイル定義としてstyled-components　・コンポーネントの開発環境としてStorybook　・LinterとしてESLint　・FormatterとしてPrettier　→追加：IDEはVisual Studio CodeでOK

[turanukimaru]

必要になるまで触らないのが一番だな！