ChatGPT に対話的にマークアップを生成させてChrome拡張でプレビューする

2023/10/13 8 users Chrome chatgpt HTML 拡張 クリップボード

chat.openai.com 上でマークアップを試行錯誤するための Chrome 拡張を試作してみた。 例えば html+preview のコードブロックを見つけるとその隣に HTML として挿入する。後述するが React Component もプレビューできる。 📎 をクリックすると展開したHTMLを画像としてクリップボードに入れることができる。 いい感じに... 続きを読む

コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)

2023/06/02 106 users コンポーネントベース Twitter React CSS 反響

React や Svelte でコンポーネントベースで開発するとき特有の CSS ノウハウってあんまり効かない気がする Twitter に書いたら反響があったので、自己流だけどまとめておく React Component の管理単位と、CSS としてのレイアウトの管理ポリシーは違うよね、みたいな話をマークアップエンジニアに時折されるが、そんな話... 続きを読む

React Componentの推しディレクトリ構成について語る

2021/10/29 120 users ディレクトリ構成 component 単体 わたし 開発

こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Componentのディレクトリ構成」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおい... 続きを読む

React Component 分業の覚書

2021/01/30 19 users 分業 覚書

フルスタック FW の View を Next.js 化する機会が多くなってきた昨今。いざ取り組むにしても、マークアップ込みで実装出来るフロントエンドエンジニアが不足気味ではないでしょうか？得にスタイリングはコード量が多くなりがちで、CSS に苦手意識をもつエンジニアも少なくありません。マークアップエンジニアにスタイリ... 続きを読む

React Component 視点でのアトミックデザインの解釈といくつかの疑問 - mizchi's blog

2018/06/07 129 users アトミックデザイン mizchi's blog 解釈 視点

2018 - 06 - 07 React Component 視点でのアトミックデザインの解釈といくつかの疑問 フロントエンドの中でも、JS書く プログラマ と、 CSS を書く マークアップ と、デザインカンプを作るデザイナで、 コンポーネント という概念がズレる。だいたいこれらが一人だったり兼任だったりで1~2レイヤーの開発ステップになるが、完全分業だったり人が多くなると混乱の元になる。 誰か... 続きを読む

React Componentのスタイルガイドを自動生成してパーツの再利用をしやすくする - KAYAC engineers' blog

2017/04/12 68 users KAYAC engineers React カヤック パーツ

2017 - 04 - 12 React Componentのスタイルガイドを自動生成してパーツの再利用をしやすくする react javascript こんにちは。カヤックのReactおじさんこと 島津 です。 最近はVue.jsにも浮気し始めましたが、Reactについての記事を書きます。 Reactのコンポーネントが増えてきて管理が大変 Reactを使うとコンポーネントの部品化が捗りますが、 ... 続きを読む

reactjs - React component ライフサイクル図 - Qiita

2015/10/17 99 users Qiita reactjs 文章 理解 公式

React component はライフサイクルしっかり頭にいれてないとダメな気がする。 公式のページに文章で説明されているものを図にしてみた。個人的には理解が捗った。 続きを読む

React.jsをCoffeeScriptとjadeで書く | uzimith.github.io

2015/03/15 78 users Jade CoffeeScript reactjs あたり

はじめに React v0.13.0 Beta 1 | React React.Componentを使うと生のJSのclass形式でReact Componentを定義できる reactjs - react-jadeでjadeテンプレートから仮想DOMを出力する - Qiita JSXのXの部分をjadeで書けるようにするライブラリ (Jade -> React VDOM) ここあたりの記事を読ん... 続きを読む