In React's terminology, there are five core types that are important to distinguish:
React Elements
. | |
├── actions | |
├── stores | |
├── views | |
│ ├── Anonymous | |
│ │ ├── __tests__ | |
│ │ ├── views | |
│ │ │ ├── Home | |
│ │ │ │ ├── __tests__ | |
│ │ │ │ └── Handler.js |
// Usually I use this in my app's config file, in case I need to disable all cache from the app | |
// Cache is from `js-cache`, something like `import Cache from 'js-cache';` | |
const cacheable = true, | |
cache = new Cache(); | |
// On request, return the cached version, if any | |
axios.interceptors.request.use(request => { | |
// Only cache GET requests | |
if (request.method === 'get' && cacheable) { |
In React's terminology, there are five core types that are important to distinguish:
React Elements
/** | |
* IE 5.5+, Firefox, Opera, Chrome, Safari XHR object | |
* | |
* @param string url | |
* @param object callback | |
* @param mixed data | |
* @param null x | |
*/ | |
function ajax(url, callback, data, x) { | |
try { |
* { | |
font-size: 12pt; | |
font-family: monospace; | |
font-weight: normal; | |
font-style: normal; | |
text-decoration: none; | |
color: black; | |
cursor: default; | |
} |
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.
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