| import React from 'react'; | |
| import moment from 'moment'; | |
| import DayPicker, { DateUtils } from 'react-day-picker'; | |
| export default class MydateFilter extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.handleDayClick = this.handleDayClick.bind(this); | |
| this.handleResetClick = this.handleResetClick.bind(this); | |
| 'use strict'; | |
| Object.defineProperty(exports, "__esModule", { | |
| value: true | |
| }); | |
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | |
| var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); |
| 'use strict'; | |
| Object.defineProperty(exports, "__esModule", { | |
| value: true | |
| }); | |
| var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
| var _react = require('react'); |
Now that’s out of the way, we’ve got two ways (currently) to create a React component:
A pure function: no lifecycle hooks
As a class: has lifecycle hooks
They’re functions implemented by React.Component that we get to override and make use of. You can find a simple example here.
| <!doctype html> | |
| <html class="no-js" lang=""> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Ping</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="apple-touch-icon" href="apple-touch-icon.png"> | |
| <style> |
| import React, { Component } from 'react' | |
| import PropTypes from 'prop-types' | |
| import ReactDOM from 'react-dom' | |
| import { createStore } from 'redux' | |
| import { Provider, connect } from 'react-redux' | |
| // React component | |
| class Counter extends Component { | |
| render() { | |
| return ( |
| import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| import { Provider } from 'react-redux'; | |
| import { createStore } from 'redux'; | |
| class App extends React.Component{ | |
| constructor(props) { | |
| super(props); | |
| } | |
| render() { |
| // Remove a file | |
| git rm file-name.ext | |
| git commit -m "remove file-name.ext" |
| var gulp = require('gulp'); | |
| var sass = require('gulp-sass'); | |
| var uglify = require('gulp-uglify'); | |
| var concat = require('gulp-concat'); | |
| var rename = require('gulp-rename'); | |
| var wait = require('gulp-wait'); | |
| gulp.task('bundleCSS', function(){ | |
| return gulp.src('./sass/style.scss') | |
| .pipe(wait(500)) |
| // @codekit-prepend "/vendor/hammer-2.0.8.js"; | |
| $( document ).ready(function() { | |
| // DOMMouseScroll included for firefox support | |
| var canScroll = true, | |
| scrollController = null; | |
| $(this).on('mousewheel DOMMouseScroll', function(e){ | |
| if (!($('.outer-nav').hasClass('is-vis'))) { |