React/コンポーネント設計
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
-[[設計原則:https://ja.reactjs.org/docs/design-principles...
-[[React の流儀:https://ja.reactjs.org/docs/thinking-in-r...
-[[React初学者が必ず押さえておきたい考え方とは？【コンポ...
-[[デザイナーがデザインツールを使わずに、Reactを使ってデ...
-[[Reactを使ったフロントエンドのアーキテクチャ事例:https:...
-[[綺麗なReactコンポーネント設計でモノリシックなコンポー...
-[[フロントのコンポーネント設計ベストプラクティスを探して...
-[[フロントエンドのコンポーネント設計に立ち向かう:https:/...
-[[デザイナーとエンジニアで考えるReactコンポーネント設計:...
-[[React でデザインシステムを正しく実装する - コンポーネ...
-[[Fat ComponentにしないためのWebフロントエンド設計:https...
-[[【LINE証券 FrontEnd】LINE証券フロントエンドの全体像:ht...
-[[TwitterやSlackのRedux Storeを覗く:https://engineer.rec...
-[[ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入...
-[[デザインエンジニアしか知らない世界 後編:https://www.e...
*デザイン [#jccb274f]
**[[Atomic Design:https://atomicdesign.bradfrost.com/]] [...
-[[React の Component 設計と Atomic Design:https://info.d...
-[[Atomic Designに向き合ってみてわかったことをまとめてみ...
-[[Atomic Designを使ってReactコンポーネントを再設計した話...
-[[【Atomic Designに懐疑的なあなたへ】改めて考えたい Reac...
-[[Reactを使ったコンポーネント指向設計で、Atomic Designを...
*ツール [#ye20ee78]
**Storybook [#q6220a25]
-[[Storybookを使ってみた①環境構築編:https://liginc.co.jp/...
-[[Next13 × Storybook7を試す:https://zenn.dev/ikenohi/scr...
***導入 [#r7cf2a95]
-通常は以下でOK
$ npm sb@latest init
$ npm run storybook
-[[[Bug]: Unable to start Storybook 6.5.x for react after...
--[[Storybook 7 migration guide:https://chromatic-ui.noti...
$ npx storybook@next upgrade --prerelease
$ npx sb@next init
$ npm run storybook
--これで起動したが、起動エラー発生
--以下を追加で実行
$ npm install style-loader --save
$ npm install css-loader --save
$ npm install util --save
$ npm run storybook
--起動した！
*Web Component [#o8f326ee]
**[[Lit:https://lit.dev/]] [#lec029f7]
-メルカリが使用
--[[新しいメルカリDesign System Web:https://engineering.m...
終了行:
-[[設計原則:https://ja.reactjs.org/docs/design-principles...
-[[React の流儀:https://ja.reactjs.org/docs/thinking-in-r...
-[[React初学者が必ず押さえておきたい考え方とは？【コンポ...
-[[デザイナーがデザインツールを使わずに、Reactを使ってデ...
-[[Reactを使ったフロントエンドのアーキテクチャ事例:https:...
-[[綺麗なReactコンポーネント設計でモノリシックなコンポー...
-[[フロントのコンポーネント設計ベストプラクティスを探して...
-[[フロントエンドのコンポーネント設計に立ち向かう:https:/...
-[[デザイナーとエンジニアで考えるReactコンポーネント設計:...
-[[React でデザインシステムを正しく実装する - コンポーネ...
-[[Fat ComponentにしないためのWebフロントエンド設計:https...
-[[【LINE証券 FrontEnd】LINE証券フロントエンドの全体像:ht...
-[[TwitterやSlackのRedux Storeを覗く:https://engineer.rec...
-[[ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入...
-[[デザインエンジニアしか知らない世界 後編:https://www.e...
*デザイン [#jccb274f]
**[[Atomic Design:https://atomicdesign.bradfrost.com/]] [...
-[[React の Component 設計と Atomic Design:https://info.d...
-[[Atomic Designに向き合ってみてわかったことをまとめてみ...
-[[Atomic Designを使ってReactコンポーネントを再設計した話...
-[[【Atomic Designに懐疑的なあなたへ】改めて考えたい Reac...
-[[Reactを使ったコンポーネント指向設計で、Atomic Designを...
*ツール [#ye20ee78]
**Storybook [#q6220a25]
-[[Storybookを使ってみた①環境構築編:https://liginc.co.jp/...
-[[Next13 × Storybook7を試す:https://zenn.dev/ikenohi/scr...
***導入 [#r7cf2a95]
-通常は以下でOK
$ npm sb@latest init
$ npm run storybook
-[[[Bug]: Unable to start Storybook 6.5.x for react after...
--[[Storybook 7 migration guide:https://chromatic-ui.noti...
$ npx storybook@next upgrade --prerelease
$ npx sb@next init
$ npm run storybook
--これで起動したが、起動エラー発生
--以下を追加で実行
$ npm install style-loader --save
$ npm install css-loader --save
$ npm install util --save
$ npm run storybook
--起動した！
*Web Component [#o8f326ee]
**[[Lit:https://lit.dev/]] [#lec029f7]
-メルカリが使用
--[[新しいメルカリDesign System Web:https://engineering.m...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
