JSXの嵌まりどころ | React 0.13 日本語リファレンス | js STUDIO
JSXはHTMLのように見えますが、幾つかの重要な違いが存在します。 注意: インラインstyle属性のようなDOMの違いについては、こちらを参照して下さい。 HTML実体参照 JSXのリテラルのテキストにHTML実体参照を挿入することが可能です。 <div>First · Second</div> 動的なコンテンツ内にHTML実体参照を表示したい場合、デフォルトでReactが広範囲に及びXSS攻撃を防護するために、 表示する全ての文字列に対してエスケープ処理を行うため、二重エスケープの問題が発生します。 // 悪い例: "First · Second"と表示される <div>{'First · Second'}</div> この問題を回避する方法が幾つか存在します。 最も簡単な方法は、Unicode文字をJavaScript内に直接書くことです。
【React】新機能hooks - Qiita
はじめに 会社で色々な事件に巻き込まれしまってなかなか書けなかった不幸な日々でした。 ちょっと乗り遅れた感あるんですが、自分の勉強と理解がてら新しい機能であるhooksを書いていきます。 hooks hooksはclassを書くことなくstateとか、色々な機能を使うことができる新しい機能です！React v16.7.0-alphaから使えます。 create-react-appでつくると、僕がやってみたときは16.6だったので、ちょっとアップデートしないとできないので注意です。 そして、かつてはSFCと呼ばれる関数定義のコンポーネントたちも、ここではSFCではなくFCになります。 なにせstatelessではないからね・・・！！。 state この機能を使うと、functional componentがstateを扱えるようになります。ちゃんとre-renderされようとも値を保持してく
Reactのアニメーションを攻略する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reactのアニメーションを攻略する 仕事でReactのアニメーションをするにあたり、 やりたいことを満たすために旅立った冒険記。 やりたいこと 要件 要素の追加・削除時にアニメーション リストではない複数要素を別々に動かす きもち カジュアルに使いたい 要件満たすために余計な記述はしたくない。可能な限りシンプルに保ちたい。 DOMに依存したくない Universalにしたいので、style弄りはVirtualDOM経由が原則。 ロジックで制御したい 複雑化への対応や保守性を考えると、絶対JSで全てコントロールできた方がよい。 汎用性の
ざっくり React & Redux with TypeScript - Qiita
はじめに この記事を書いた動機 3年前に書いた記事に対して未だにちょこちょこと反応が来るものの、自分自身はもうこの方法ではやってないし、1年で大きく動くと言われるフロントエンド界隈で3年以上前の方法で学ばれるのもまずいと思い、知識の整理も込めて比較的新しい書き方で当該記事をリメイクしたい。 方針 TypeScript を使う React と Redux と React-Thunk を使う部分は変えない redux-starter-kit を使って楽する 環境構築 npm install npm init した上で実行。 このへんに関してはあまり何も考えずに入れる。 # webpack系 npm install --save-dev webpack webpack-cli webpack-dev-server clean-webpack-plugin html-webpack-plugin
条件付きレンダー – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 条件付きレンダー React ではあなたの必要なふるまいをカプセル化した独立したコンポーネントを作ることができます。そして、あなたのアプリケーションの状態に応じて、その一部だけを描画することが可能です。 React における条件付きレンダーは JavaScript における条件分岐と同じように動作します。if もしくは条件演算子のような JavaScript 演算子を使用して現在の状態を表す要素を作成すれば、React はそれに一致するように UI を更新します。 以下の 2 つのコンポーネントを考えてみましょう： function UserGreeting(prop
Next.jsを知りたいのだ - Qiita
まずはQiitaの記事で軽めの知識を入れて見る 参考：Next.js SSRされるユニバーサルJSアプリのためのフレームワーク ディレクトリとファイルの構成を、そのままルーティングとして定義できる ∟さらに自動でSSRにも対応する(すごい！ ∟コード分割も自動で nextコマンドは、ホットリロードやトランスパイルなどを諸々やってくれる(すごい！ getInitialPropsなる拡張があり、そこにデータ取得とpropsへの追加ができる ∟サーバとクライアントで異なるデータを読み込むこともできる タグがServiceWorkerを経由してデータ取得をするため、パフォーマンスの向上が見込める？（よくわかっていない デプロイも楽 How to useで勉強してみよう 公式 ※それだけで別の記事にできそうなプリフェッチ関連や、 設定済みなもののカスタマイズなどは別の機会に学びます。 SetUp
正真正銘のReactだけの不純物なしでReact入門
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - beda-software/aidbox-react: A set of TypeScript components and utilities to create react apps on top of AidBox
関数コンポーネントはクラスとどう違うのか?