npm init -y
Create a folder called src and add an empty index.js file. The code that webpack compiles goes in here including any Javascript modules and the main Tailwind file.
"use strict"; | |
[foo,bar] = TNG(foo,bar); | |
// NOTE: intentionally not TNG(..) wrapping useBaz(), so that it's | |
// basically like a "custom hook" that can be called only from other | |
// TNG-wrapped functions | |
function foo(origX,origY) { | |
var [x,setX] = useState(origX); | |
var [y,setY] = useState(origY); |
/** | |
* Check if an element is truncated. | |
* | |
* CSS to be used: | |
* .truncate { | |
* width: 250px; | |
* white-space: nowrap; | |
* overflow: hidden; | |
* text-overflow: ellipsis; | |
* } |
This guide assumes you have the emmet
and language-babel
packages already installed in Atom
keymap.cson
file by clicking on Atom -> Keymap…
in the menu bar'atom-text-editor[data-grammar~="jsx"]:not([mini])':
Video Tutorial: | |
https://egghead.io/series/getting-started-with-redux | |
Lesson 05: | |
Redux: Writing a Counter Reducer with Tests | |
http://jsbin.com/piqapi/edit?js,console | |
Lesson 06: | |
Redux: Store Methods: getState(), dispatch(), and subscribe() | |
http://jsbin.com/jadunek/edit?js,console |
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
// Update: Hey Folks - I've got a full Gulpfile with everything else over at https://github.com/wesbos/React-For-Beginners-Starter-Files | |
var source = require('vinyl-source-stream'); | |
var gulp = require('gulp'); | |
var gutil = require('gulp-util'); | |
var browserify = require('browserify'); | |
var reactify = require('reactify'); | |
var babelify = require('babelify'); | |
var watchify = require('watchify'); | |
var notify = require('gulp-notify'); |
/** | |
* This gulpfile will copy static libraries and a index.html file as well as | |
* merge, babelify and uglify the rest of the javascript project. | |
* | |
* TODO: | |
* - Separate media, libs and src with different watchers. | |
* - Media and libs should only be copied to dist if they are different sizes. | |
* | |
* The expected project is to be laid out as such: | |
* |
var gulp = require('gulp') | |
var browserify = require('browserify') | |
var watchify = require('watchify') | |
var babelify = require('babelify') | |
var source = require('vinyl-source-stream') | |
var buffer = require('vinyl-buffer') | |
var merge = require('utils-merge') |