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
| // Usage: | |
| // Copy and paste all of this into a debug console window of the "Who is Hiring?" comment thread | |
| // then use as follows: | |
| // | |
| // query(term | [term, term, ...], term | [term, term, ...], ...) | |
| // | |
| // When arguments are in an array then that means an "or" and when they are seperate that means "and" | |
| // | |
| // Term is of the format: | |
| // ((-)text/RegExp) ( '-' means negation ) |
| import React, { PropTypes } from 'react'; | |
| import { TransitionMotion, spring } from 'react-motion'; | |
| /** | |
| * One example of using react-motion (0.3.0) within react-router (v1.0.0-rc3). | |
| * | |
| * Usage is simple, and really only requires two things–both of which are | |
| * injected into your app via react-router–pathname and children: | |
| * | |
| * <RouteTransition pathname={this.props.pathname}> |
| // Add this to your user keybindings file | |
| { "keys": ["`"], "command": "insert_snippet", "args": {"contents": "`$0`"}, "context": | |
| [ | |
| { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, | |
| { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true }, | |
| { "key": "following_text", "operator": "regex_contains", "operand": "^(?:\t| |\\)|]|\\}|>|$)", "match_all": true }, | |
| { "key": "preceding_text", "operator": "not_regex_contains", "operand": "[`a-zA-Z0-9`]$", "match_all": true }, | |
| { "key": "eol_selector", "operator": "not_equal", "operand": "string.quoted.backtick", "match_all": true } | |
| ] | |
| }, |
| #import <Foundation/Foundation.h> | |
| #import "RCTBridgeModule.h" | |
| #define RCT_EXTERN_MODULE(objc_name, objc_supername) \ | |
| RCT_EXTERN_REMAP_MODULE(objc_name, objc_name, objc_supername) | |
| #define RCT_EXTERN_REMAP_MODULE(js_name, objc_name, objc_supername) \ | |
| objc_name : objc_supername \ | |
| @end \ | |
| @interface objc_name (RCTExternModule) <RCTBridgeModule> \ |
| /** | |
| * This example shows using Morearty and React Router together in a single app. | |
| * | |
| * Both libraries expect to be the 'top-level-item' by default, which causes conflict. | |
| * The `currentRoute` here is especially important, as this allows the components to re-render | |
| * when the Route changes. Without this the `shouldComponentUpdate` of Morearty will | |
| * return `false`, preventing routing. | |
| * | |
| * Morearty - https://github.com/moreartyjs/moreartyjs | |
| * React Router - https://github.com/rackt/react-router |
While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.
Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.
This is no longer needed as Emmet supports JSX - you just need to turn it all on. Did a quick tutorial: http://wesbos.com/emmet-react-jsx-sublime/
Thanks, @wesbos
| var React = require('react/addons'); | |
| var ReactIgnore = { | |
| displayName: 'ReactIgnore', | |
| shouldComponentUpdate (){ | |
| return false; | |
| }, | |
| render (){ | |
| return React.Children.only(this.props.children); | |
| } |