React Component Lifecycle
- getInitialState
- getDefaultProps
- componentWillMount
- componentDidMount
- shouldComponentUpdate (Update only)
- componentWillUpdate (Update only)
- componentWillReceiveProps (Update only)
- render
| #!/bin/bash -x | |
| # This script will convert all your git submodules into git subtrees. | |
| # This script ensures that your new subtrees point to the same commits as the | |
| # old submodules did, unlike most other scripts that do this. | |
| # THIS SCRIPT MUST BE PLACED OUTSIDE OF YOUR REPOSITORY!!!!!!!!!! | |
| # Otherwise, the script will interfere with the git commits (unless you add it to .gitignore). | |
| # Save the script in your home directory as `~/subtrees.sh` | |
| # `cd` into your repository | |
| # Run `~/subtrees.sh` | |
| # Enjoy! |
| // getComponent is a function that returns a promise for a component | |
| // It will not be called until the first mount | |
| function asyncComponent(getComponent) { | |
| return class AsyncComponent extends React.Component { | |
| static Component = null; | |
| state = { Component: AsyncComponent.Component }; | |
| componentWillMount() { | |
| if (!this.state.Component) { | |
| getComponent().then(Component => { |
React Component Lifecycle
This is a quick-and-dirty guide to setting up a Raspberry Pi as a "router on a stick" to PrivateInternetAccess VPN.
Install Raspbian Jessie (2016-05-27-raspbian-jessie.img) to your Pi's sdcard.
Use the Raspberry Pi Configuration tool or sudo raspi-config to:
This table was created in 2015 so may be quite outdated today.
| Feature | Meteor Solution | Alternative Solutions | Description |
|---|---|---|---|
| Live DB Sync | [livequery][lq] ([mongo-oplog]), [ddp] | RethinkDB, Redis, ShareDB, [npm:mongo-oplog], [firebase], etc. | Push DB updates to client/server. |
| Latency Compensation, Optimistic UI | [minimongo][mm] | [RethinkDB][lcr], [mWater/minimongo] (fork, not ws but http, browserify) | Imitate successful db query on client before it is done. |
| Isomorphic Code | [isobuild] & isopacks | browserify | Write one code for server/client/mobile. |
| Isomorphic Packaging | [isobuild], atmosphere | No more separate packages for server & client. Get bower + npm + mobile. |
| var touchstartX = 0; | |
| var touchstartY = 0; | |
| var touchendX = 0; | |
| var touchendY = 0; | |
| var gesuredZone = document.getElementById('gesuredZone'); | |
| gesuredZone.addEventListener('touchstart', function(event) { | |
| touchstartX = event.screenX; | |
| touchstartY = event.screenY; |
Hi Nicholas,
I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:
The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't
| /** | |
| * @author Juliano Castilho <[email protected]> | |
| */ | |
| var React = require('react'); | |
| var AffixWrapper = React.createClass({ | |
| /** | |
| * @type {Object} | |
| */ | |
| propTypes: { |
| var Bar1 = base => class extends base { | |
| componentWillMount(){ | |
| super.componentWillMount(); | |
| console.log('Bar1'); | |
| } | |
| }; | |
| var Bar2 = base => class extends base { | |
| componentWillMount(){ | |
| super.componentWillMount(); |
| class SudokuSolver { | |
| constructor(board) { | |
| this.board = board; | |
| } | |
| solve() { | |
| const index = this.board.indexOf('0'); | |
| if (index === -1) return this.board; | |
| for (let possibility = 1; possibility < 10; possibility++) { |