React.js ExamplesDrop-in progressive (gradient) backdrop blur for React. Both radial and linear gradients are supported.
フロントエンド開発の概要について
ここでは、フロントエンド開発の概要について説明していきます。 ＊元記事はこちらです。(英語) この記事でカバーしているものについてSingle-page Apps (SPAs)New-age JavaScriptUser InterfaceState ManagementCoding with StyleTestingLinting JavaScriptLinting CSSTypesBuild SystemPackage ManagementContinuous IntegrationHostingDeploymentSingle-page Apps (SPAs)かつてはサーバーサイドレンダリングという、別のURLを開くごとにページをリフレッシュしてサーバーから新たなHTMLページを送る手法が主流でしたが、最近のSPAsではクライアントサイドレンダリングというものが主流になっています。
最新版TypeScript 3.0+Webpack 4の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています（参考記事『Google社内の標準言語としてTypeScriptが承認される － Publickey』）。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンド
React and ES6 - Part 2, React Classes and ES7 Property Initializers
This is the second post of series in which we are going to explore the usage of React with ECMAScript6. You could find links to all parts of series below: React and ES6 - Part 1, Introduction into ES6 and React React and ES6 - React and ES6 - Part 2, React Classes and ES7 Property Initializers React and ES6 - Part 3, Binding to methods of React class (ES7 included) React and ES6 - Part 4, React Mi
Redux 基礎：Action 編 - Qiita
概要 React + Redux の Action についてサンプルを使って、Action の作成と動作の確認をします。 準備 redux/examples/real-world からいろいろそぎ落としたこちらのソースの tag/init を使って説明します。 ※ 実装完了はtag/action Action とは Action はストアの state を変更するためのメッセージです。 Action によって state が変わると UI の表示などアプリの変化が起きるので、アプリに何か起こすための出発点となります。 Action 発行 Reducer が現在の state と action を元に新しい state を作成。 state の変更をUIなどに反映 Action は javascipt のオブジェクトでどのような形でも大丈夫ですが、慣習として type フィールドに文字列で
ぽよんと展開されるメニューコンポーネントをReactで作った - undefined
ぽよんと展開されるメニューコンポーネント、react-motion-menuを作りました。 動きは以下を見てください。div要素をぽよんぽよんさせてます。 デモ 以下で実際に操作できます。 example リポジトリ github.com インストール npm i react-motion-menu 概要 ぽよんとアニメーションするメニューを作りたくなって作った。 当初はもっとスライム感みたいなのを表現したくてsvgで検討していただんだけど、いろいろとスキル不足な感じでreact-motionを使って遊んでみることにした。 svgで何かを作りたい場合、Inkscapeとかでベジェ曲線を思い通りに扱えるようになると捗るかもしれない。 使い方 展開する要素をchildrenに記述します。 あとはwidthや展開時のメニューアイテム間の距離をdistanceで指定してください。 <Menu di
Facebookのエンジニアも登壇！「React.js meetup #2」イベントレポート | Goodpatch Blog
こんにちは。グッドパッチのフロントエンドエンジニア/グロースデザイナーの右寺です。 今回は、9/8(火)にイベント＆コミュニティスペース dots.で行われたイベント「React.js meetup #2」のレポートをお届けします！ React.jsとは？ React.jsはFacebook謹製のJavaScriptライブラリです。一昨年のリリースから急激に人気が上昇しています。 その特徴は、同じJavaScriptライブラリであるAngularJSがMVCフレームワークとして全般的な機能を提供するのに対し、React.jsではMVCのViewにあたる部分をComponentとして提供することに特化している、と言えます。 現在、React.jsはFacebook社内だけではなくYahoo!やTwitter、Airbnbなどでも採用されているようです。 主催のお二人 今回のイベントは、昨年末
第2回 簡単なReact.jsの使い方 （1/8）
１）快適なReact.js開発環境をgulpで作る React.jsはJSX という言語を利用して開発します。 JSX はトランスコンパイル言語と呼ばれるもので、JavaScriptに変換して利用します。 jsxというコマンドを利用すればJSX ファイルをJavaScriptに変換することが可能ですが、ソースコードを変更するたびにJSX をコンパイルするのは面倒です。まずはソースコードの変更を検知して自動的にコンパイルし、ブラウザのリロードまでを行ってくれる環境を構築しましょう。 JavaScriptには便利なツールがいくつかありますが、今回はgulp + webpackを利用して環境を構築します。これらの動作にはNode.js が必要となりますので、まずはNode.js のインストールから行いましょう。なお、この組み合わせの他にもGrunt + Browserifyなどがあります。 No
React.js meetup #3 - 資料一覧 - connpass
「React.js meetup #3」の資料一覧です。
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
React 始めました。あるいは、React.js + Webpack の環境構築。 - hidekatsu-izuno 日々の記録
このブログの説明を読むと「プログラミング」という文字が見えるはずなのだけど、今現在に到るまでまったく書けていないということもあり、ずっと興味を持っていた React.js に手を付けてみることしてみた。 ところが着手してみると、Node.js のメジャーバージョンが上がったり、React.js のツールチェインが変わっていたりと、動かすだけでもひと苦労。結局、React.js と webpack の環境構築だけで一日が終わってしまった。昨今はツール類も多種多様で目的に到るまでに時間がかかりすぎるのが困ったもの。 バックエンドは、慣れている Java で書く予定なので以下の作業は Windows 上の eclipse から Terminal を開いて作業しているけれども、Node.js のインストールを除けば特に環境に依存する内容はないと思われる（はず）。 手順 1．Node.js のインス
React 開発環境構築 - present
React を使ってきちんと SPA を作るのに、毎回ブラウザ表示時にコンパイルしていては、さすがに効率悪い。 モダンなフロントエンド開発環境にしたいので、調べながら構築することにした。 react や react-dom などのライブラリは npm でインストール。 そういえば Bower ってオワコン化してしまったな。 # プロジェクトフォルダを作る(名前は適当なやつで) mkdir react-project cd react-project # package.json を作る npm init # React をインストール npm install --save react react-dom npm でインストールしたライブラリを使って書いたアプリは、 browserify でビルドして 1 つの .js ファイルにする。 npm install --save-dev brow
FacebookのFluxアーキテクチャの始め方 Part 1 | POSTD
私のように、Reactを使ってより進んだことがしたいと考えたなら、おそらく Flux に注目した経験があると思います。ざっと目を通してタブを閉じ、JavaScript開発者としての自分の人生を見直したことでしょう。 もしReactになじみがなければ、私の記事 「React入門」 を読んでみてください。 Fluxとは？ Fluxは、遠目には始めるために複雑な手順を踏まなければいけないように映ります。しかし、 GitHubにあるexample を見てみれば、これがどのように機能するのかが実に明確になってきます。 簡単に言うと、Fluxは美化された 出版-購読型モデル のアーキテクチャです。データはシステム内を一方向に流れ、そこから様々な利用者が必要に応じてデータを取得します。これについて考えるには、私たちの体に例えてみると簡単です。 イベント – 血液 血液は私たちの体内を一方向に流れています
ReactとHTML5 Form Validationでリアルタイムチェック機能付きフォームを作る
サンプルについてメールアドレスとURLを入力して送信するフォームです。リアルタイムで入力値のフォーマットと入力の有無のチェックを行います。入力値に問題がなければ、送信ボタンが押せるようになります。ボタンを押すと、入力値がアラートとして表示されます。※サンプルなので、かなりシンプルに作っています。 サンプルのソースコードはGitHubで確認可能です。 maechabin/react-validation-form – GitHub実際にReactの実装を行っているのが以下のJSファイルとなります。 https://github.com/maechabin/react-validation-form/blob/master/src/app.js実装方法の説明の前にReactの基礎知識の説明や開発環境の構築方法などは省略します。その辺の情報については、当ブログの以下の記事などを参考にしてください
Tutorial: Tic-Tac-Toe – React
You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you’ll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React. This tutorial is designed for people who prefer to learn by doing and want to quickly try making something tangible. If
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redux 基礎：Middleware 編 - Qiita
React.js Reconciliation
The state of React.js 2016
今からはじめるReact.js〜propsとstate、それからrefs〜 - Qiita
React入門 - コンポーネント・サーバサイドレンダリング・Flux - 野次馬エンジニア道