Skip to content

Instantly share code, notes, and snippets.

View child-as-func-vs-hocs.js
// Imagine what would it be if connect, withRouter, injectIntl were child as function
export default (
<Connect mapStateToProps={mapStateToProps} mapPropsToActions={actions}>
{
(props) => (
<WithRouter>
{
(router) => (
<InjectIntl>
{(intl => <SomeComonent intl={intl} router={router} {...props} />}
View counter_with_container.js
var Container = React.createClass({
getInitialState: function() {
return {
data: null,
fetching: false,
error: null
};
},
render: function() {
View select2_wrapper.js
var Select2 = React.createClass({
componentDidMount: function() {
$(this._ref).select2({data: this.props.items});
},
render: function() {
return (
<select
ref={
function(input) {
View all_unique_chars.js
function allUniqueChars(str) {
if(!str) return false;
let checker = 0;
let flagIndex;
const length = str.length;
for (let i = 0; i < length; i++) {
flagIndex = str[i].charCodeAt(0) - 'a'.charCodeAt(0);
if ((checker & (1 << flagIndex)) > 0) return false;
View counter.js
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: 0};
this.incrementCounter = this.updateCounter.bind(this, 1);
this.decrementCounter = this.updateCounter.bind(this, -1);
}
render() {
return (
View text_comp.js
var TextComponent = React.createClass({
shouldComponentUpdate: function(nextProps, nextState) {
if (this.props.text === nextProps.text) return false;
return true;
},
render: function() {
return <textarea value={this.props.text} />;
}
});
View basic_counter_enhanced.js
var Component = React.createClass({
getDefaultProps: function() {
console.log('getDefaultProps');
return {
title: "Basic counter!!!",
step: 1
}
},
getInitialState: function() {
View basic_counter.js
var Counter = React.createClass({
getDefaultProps: function() {
console.log('getDefaultProps');
return {
title: 'Basic counter!!!'
}
},
getInitialState: function() {
console.log('getInitialState');
View contact-list-search.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://fb.me/react-15.0.2.js"></script>
<script src="https://fb.me/react-dom-15.0.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
View contact-list-propTypes.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://fb.me/react-15.0.2.js"></script>
<script src="https://fb.me/react-dom-15.0.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>