| export default function createCrudHooks({ | |
| baseKey, | |
| indexFn, | |
| singleFn, | |
| createFn, | |
| updateFn, | |
| deleteFn, | |
| }) { | |
| const useIndex = (config) => useQuery([baseKey], indexFn, config) | |
| const useSingle = (id, config) => |
| import React from 'react'; | |
| import { StyleSheet, Text, View } from 'react-native'; | |
| import { Util } from 'expo' | |
| export default class App extends React.Component { | |
| state = { | |
| updated: false, | |
| } | |
| componentWillMount() { | |
| Util.addNewVersionListenerExperimental(() => { |
#A brief intro into Stateless functions#
So stateless functions are new in React 0.14 which are quite interesting. They look a bit like this.
const Test = ({name, amount}) => {
return <div className="test">{name} has £{amount}</div>;
};
ReactDOM.render(<Test name="ben" amount="-2000" />) // <div className="test">ben has £-200</div> 
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
| // give it a name so it reuses the same window | |
| var win = window.open(null, "redux-devtools", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no"); | |
| // reload in case it's reusing the same window with the old content | |
| win.location.reload(); | |
| // wait a little bit for it to reload, then render | |
| setTimeout(function() { | |
| React.render( | |
| <DebugPanel top right bottom left > |
| 'use strict'; | |
| var gulp = require('gulp'); | |
| var browserify = require('browserify'); | |
| var source = require('vinyl-source-stream'); | |
| var notifier = require('stream-notifier'); | |
| var watchify = require('watchify'); | |
| gulp.task('browserify', function() { | |
| var bundler = browserify('./src/main') |
| /* bling.js */ | |
| window.$ = document.querySelectorAll.bind(document); | |
| Node.prototype.on = window.on = function (name, fn) { | |
| this.addEventListener(name, fn); | |
| } | |
| NodeList.prototype.__proto__ = Array.prototype; |
| var cheerio = require('gulp-cheerio'); | |
| var svgmin = require('gulp-svgmin'); | |
| var svgstore = require('gulp-svgstore'); | |
| gulp.task('svgstore', function () { | |
| return gulp | |
| .src('assets/icons/*.svg') | |
| .pipe(svgmin()) | |
| .pipe(svgstore({ fileName: 'icons.svg', prefix: 'icon-' })) | |
| .pipe(cheerio({ |
| /** | |
| * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units | |
| * | |
| * To overcome this, create media queries that target the width, height, and orientation of iOS devices. | |
| * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing | |
| * the height of element `.foo` —which is a full width and height cover image. | |
| * | |
| * iOS Resolution Quick Reference: http://www.iosres.com/ | |
| */ | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Styled Select</title> | |
| </head> | |
| <style> | |
| * { |