Flux architecture cheatsheet
Flux is an architecture for building client-side web applications. In-Depth Overview (facebook.github.io) Dispatchers receive actions that get dispatched to its listeners. Stores are objects that store data, usually changed from a dispatcher listener. Views are React components that listen to Store changes, or emit actions to the dispatcher. A dispatcher emits events (.dispatch()) to its listeners
redux
import { createStore } from 'redux' // Reducer function counter (state = { value: 0 }, action) { switch (action.type) { case 'INCREMENT': return { value: state.value + 1 } case 'DECREMENT': return { value: state.value - 1 } default: return state } } let store = createStore(counter) // Optional - you can pass `initialState` as a second arg let store = createStore(counter, { value: 0 }) A store is m
React-router cheatsheet
import { default as Router, Route } from 'react-router' const routes = ( <Route> <Route path='*' handler={RootView} /> </Route> ) Router.run(routes, Router.HashLocation, (Root) => { React.render(<Root />, document.getElementById('all')) }) const routes = ( <Route handler={Chrome}> <Route path='about' handler={About} /> <Route path='inbox' handler={Inbox} /> <Route path='messages/:id' handler={Mess
React.js cheatsheet
<Video fullscreen={true} autoplay={false} /> render () { this.props.fullscreen const { fullscreen, autoplay } = this.props ··· } Use this.props to access properties passed to the component. See: Properties constructor(props) { super(props) this.state = { username: undefined } } this.setState({ username: 'rstacruz' }) render () { this.state.username const { username } = this.state ··· } Use states
yarnチートシート - Qiita
webpackに引き続き、Railsが推してるフロントパッケージマネージャのyarnを調べてみました。npmも慣れてきたんで変えるのやだなー、と思ってたのですが互換性高くて移行しやすいし、動作も速くていい感じです。 概要 yarn = フロント(js)のパッケージマネージャ Facebook発、オープンソース、BSDライセンス npmと互換性がある npmと同じpackage.json, node_modules/で構成される コマンドも似ている バージョンの厳密な管理ができる package.jsonでバージョンそのものではなく、許容するバージョンの範囲を指定する 実際にインストールされた際のバージョンはyarn.lockに記録され、別マシンで再現可能になる npmに比べて高速に動作する 導入 Homebrewあるいはnpmでインストールできる。
TypeScriptチートシート - Qiita
前回: ES6(ES2015)チートシート ES6に続いて、altJSの中でもひときわ勢いを感じるTypeScriptについて調べてみました。 概要 TypeScript = altJSの一種 オープンソース / マイクロソフト発 構文はJavaScript(ES5-6)と上位互換性がある ES6の構文はすべて使える 静的型付けによる型チェックができる点が特徴 その他、interface/enum/genericなど独自の機能が追加されている ES6と同様、開発時にjs(ES5)にトランスパイルすることで、ブラウザ上で実行できるようになる トランスパイルはnpmパッケージ(typescript)を使う 導入 試す(Playground) ブラウザ上でTypeScriptを書いて動かせるPlaygroundが公開されている。 http://www.typescriptlang.org/pla
webpackチートシート - Qiita
フロントまわりのツールは群雄割拠してる感がすごくて手を出せずにいたのですが、Rails5.1 で gem webpacker が導入されたこともあってwebpack/yarn構成に魅力を感じています。 今どきのモジュール/パッケージ管理したいので、まずはwebpackです。 概要 webpack = JavaScriptファイルのバンドラ モジュール単位に分離されたjsファイルをひとつのjsファイルにまとめる(バンドルする) 結合の過程で、jsファイルの依存関係を解決する CommonJS, AMD, ES6 Moduleなど復数のモジュールシステムに対応する 競合はrequire.js(依存解決), browserify(バンドル)など オープンソース, MITライセンス 導入 npmでインストールする。 プロダクション環境ではバンドルした状態で配置するわけなので、開発環境のみを指定する
Riotチートシート - Qiita
エスケープ {} を記述したいがコードを評価されたくない場合。 \{ 1 + 2 \} で { 1 + 2 } ループ <app> <div each={elem, index in array}> {index}: {elem} </div> this.array = ['hoge', 'fuga', 'piyo', 'pompopo'] </app> array の要素の数だけ、 <div> が増える。 indexは省略可能。 ArrayじゃなくてObjectでもeachできるが、パフォーマンス的な問題で推奨されない。 また、Arrayの要素がObjectだと elem も省略できるが、わかりづらいので個人的に使わない。 表示/非表示
Angular-CLIチートシート - Qiita
@armorik83です。今回はangular-cliについてまとめます。 angular-cli https://cli.angular.io/ Prototype of a CLI for Angular 2 applications based on the ember-cli project. angular-cliはAngularの2.x以上（本稿ではAngularと記述する）を用いたアプリケーションの開発を補助するCLIツールである。 インストール インストールは至って簡単だ。 node_modulesのグローバル空間にインストールするため抵抗がある人もいるかもしれないが、その場合適宜工夫してもらいたい。基本的にコマンドラインツールとして使うので、筆者はあまり問題ないと考えているが、バージョン違いによる挙動の差異があり得るため、チームで運用する際はメンバー間でバージョンについて
AngularJS Cheat Sheet
Cheatography https://cheatography.com Download This Cheat Sheet (PDF) 19 CommentsRating: () Home > Programming > AngularJS Cheat Sheets AngularJS Cheat Sheet by ProLoser The official - unofficial AngularJS cheatsheet. Filters amount | currency[:symbol] Formats a number as a currency (ie $1,234.56). date | date[:format] array | filter:expression Selects a subset of items from array. Expression take
XSS Filter Evasion - OWASP Cheat Sheet Series
XSS Filter Evasion Cheat Sheet¶ Introduction¶ This article is a guide to Cross Site Scripting (XSS) testing for application security professionals. This cheat sheet was originally based on RSnake's seminal XSS Cheat Sheet previously at: http://ha.ckers.org/xss.html. Now, the OWASP Cheat Sheet Series provides users with an updated and maintained version of the document. The very first OWASP Cheat S
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Browser's XSS Filter Bypass Cheat Sheet
Ruby,Golang,ES2015比較チートシート - Qiita
es6-cheatsheet/README.md at master · DrkSephy/es6-cheatsheet
GitHub - DrkSephy/es6-cheatsheet: ES2015 [ES6] cheatsheet containing tips, tricks, best practices and code snippets
Learn ECMAScript6 by doing it