From eb2eae897a2452a101fb7826a841f0c9e3039828 Mon Sep 17 00:00:00 2001 From: svenkatreddy Date: Mon, 1 Aug 2016 18:08:37 +0000 Subject: [PATCH 1/5] Convert React.createClass to ES6 class for Examples - simple --- examples/simple/views/index.jsx | 14 +++++++------- examples/simple/views/layout.jsx | 14 +++++++------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/examples/simple/views/index.jsx b/examples/simple/views/index.jsx index 53ec808..b67aa8f 100644 --- a/examples/simple/views/index.jsx +++ b/examples/simple/views/index.jsx @@ -10,12 +10,8 @@ function countTo(n:number):string { return a.join(', '); } -var Index = React.createClass({ - propTypes: { - title: React.PropTypes.string - }, - - render: function() { +class Index extends React.Component { + render() { return (

{this.props.title}

@@ -27,6 +23,10 @@ var Index = React.createClass({ ); } -}); +}; + +Index.propTypes = { + title: React.PropTypes.string +}; module.exports = Index; diff --git a/examples/simple/views/layout.jsx b/examples/simple/views/layout.jsx index dbe4799..d3c6872 100644 --- a/examples/simple/views/layout.jsx +++ b/examples/simple/views/layout.jsx @@ -1,11 +1,7 @@ var React = require('react'); -var Layout = React.createClass({ - propTypes: { - title: React.PropTypes.string - }, - - render: function() { +class Layout extends React.Component { + render() { return ( @@ -24,6 +20,10 @@ var Layout = React.createClass({ ); } -}); +}; + +Layout.propTypes = { + title: React.PropTypes.string +}; module.exports = Layout; From b308622bd3a761ec01d78402bdc7da8633090c5c Mon Sep 17 00:00:00 2001 From: svenkatreddy Date: Mon, 1 Aug 2016 19:53:56 +0000 Subject: [PATCH 2/5] Convert React.createClass to ES6 class for Examples - dynamic --- examples/dynamic/views/Content.js | 34 ++++++++++++++++++------------- examples/dynamic/views/Html.js | 6 +++--- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/examples/dynamic/views/Content.js b/examples/dynamic/views/Content.js index 8f6e3ad..4223d83 100644 --- a/examples/dynamic/views/Content.js +++ b/examples/dynamic/views/Content.js @@ -1,29 +1,35 @@ var React = require('react'); -var TodoList = React.createClass({ - render: function() { +class TodoList extends React.Component { + constructor(props) { + super(props); + } + render() { var i = 0; var createItem = function(itemText) { return
  • {itemText}
    • ; }; return ; } -}); +}; -var TodoApp = React.createClass({ - getInitialState: function() { - return this.props; - }, - onChange: function(e) { +class TodoApp extends React.Component { + constructor(props) { + super(props); + this.onChange = this.onChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + this.state = props; + } + onChange(e) { this.setState({text: e.target.value}); - }, - handleSubmit: function(e) { + } + handleSubmit(e) { e.preventDefault(); var nextItems = this.state.items.concat([this.state.text]); var nextText = ''; this.setState({items: nextItems, text: nextText}); - }, - render: function() { + } + render() { return (

    TODO List

    @@ -38,6 +44,6 @@ var TodoApp = React.createClass({
    ); } -}); +}; -module.exports = TodoApp; +module.exports = TodoApp; \ No newline at end of file diff --git a/examples/dynamic/views/Html.js b/examples/dynamic/views/Html.js index f21488c..f70b660 100644 --- a/examples/dynamic/views/Html.js +++ b/examples/dynamic/views/Html.js @@ -2,9 +2,9 @@ var React = require('react'); var ReactDOMServer = require('react-dom/server'); var Content = require('./Content'); -module.exports = React.createClass({ +export default class Html extends React.Component { - render: function() { + render() { var data = this.props.data; // render the content as a dynamic react component @@ -67,4 +67,4 @@ module.exports = React.createClass({ ); } -}); +}; From f0a1f99676febab3aeec8eb1a34bb2bfc0789491 Mon Sep 17 00:00:00 2001 From: svenkatreddy Date: Tue, 2 Aug 2016 17:22:37 +0000 Subject: [PATCH 3/5] Remove semicolons at end of each class --- examples/dynamic/views/Content.js | 4 ++-- examples/dynamic/views/Html.js | 2 +- examples/simple/views/index.jsx | 2 +- examples/simple/views/layout.jsx | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/dynamic/views/Content.js b/examples/dynamic/views/Content.js index 4223d83..0e346f2 100644 --- a/examples/dynamic/views/Content.js +++ b/examples/dynamic/views/Content.js @@ -11,7 +11,7 @@ class TodoList extends React.Component { }; return
      {this.props.items.map(createItem)}
    ; } -}; +} class TodoApp extends React.Component { constructor(props) { @@ -44,6 +44,6 @@ class TodoApp extends React.Component { ); } -}; +} module.exports = TodoApp; \ No newline at end of file diff --git a/examples/dynamic/views/Html.js b/examples/dynamic/views/Html.js index f70b660..aaebc5c 100644 --- a/examples/dynamic/views/Html.js +++ b/examples/dynamic/views/Html.js @@ -67,4 +67,4 @@ export default class Html extends React.Component { ); } -}; +} diff --git a/examples/simple/views/index.jsx b/examples/simple/views/index.jsx index b67aa8f..90603f9 100644 --- a/examples/simple/views/index.jsx +++ b/examples/simple/views/index.jsx @@ -23,7 +23,7 @@ class Index extends React.Component { ); } -}; +} Index.propTypes = { title: React.PropTypes.string diff --git a/examples/simple/views/layout.jsx b/examples/simple/views/layout.jsx index d3c6872..2c6e7ee 100644 --- a/examples/simple/views/layout.jsx +++ b/examples/simple/views/layout.jsx @@ -20,7 +20,7 @@ class Layout extends React.Component { ); } -}; +} Layout.propTypes = { title: React.PropTypes.string From e7fc3ddec380f066b2b2780e82f843637c447083 Mon Sep 17 00:00:00 2001 From: svenkatreddy Date: Mon, 15 Aug 2016 17:01:32 +0000 Subject: [PATCH 4/5] Removing constructor Restoring newline Exporting with module.exports --- examples/dynamic/views/Content.js | 5 +---- examples/dynamic/views/Html.js | 4 +++- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/examples/dynamic/views/Content.js b/examples/dynamic/views/Content.js index 0e346f2..fd59da0 100644 --- a/examples/dynamic/views/Content.js +++ b/examples/dynamic/views/Content.js @@ -1,9 +1,6 @@ var React = require('react'); class TodoList extends React.Component { - constructor(props) { - super(props); - } render() { var i = 0; var createItem = function(itemText) { @@ -46,4 +43,4 @@ class TodoApp extends React.Component { } } -module.exports = TodoApp; \ No newline at end of file +module.exports = TodoApp; diff --git a/examples/dynamic/views/Html.js b/examples/dynamic/views/Html.js index aaebc5c..6095dbc 100644 --- a/examples/dynamic/views/Html.js +++ b/examples/dynamic/views/Html.js @@ -2,7 +2,7 @@ var React = require('react'); var ReactDOMServer = require('react-dom/server'); var Content = require('./Content'); -export default class Html extends React.Component { +class Html extends React.Component { render() { var data = this.props.data; @@ -68,3 +68,5 @@ export default class Html extends React.Component { } } + +module.exports = Html; From 7ace08fcd4bee49c425b4a51b97ef5935629570c Mon Sep 17 00:00:00 2001 From: svenkatreddy Date: Fri, 19 May 2017 00:12:03 +0000 Subject: [PATCH 5/5] update-packages - update dependency packages - update all test/dev packages to latest React to make React 16 ready - fix warning releated to prop-types and create classes - update simple example to use prop-types - update dynamic example to use prop-types - update npm start in dynamic example to use latest browserify/babelify syntax with babel presets --- examples/dynamic/package.json | 14 ++++++++------ examples/simple/package.json | 11 ++++++----- examples/simple/views/index.jsx | 3 ++- examples/simple/views/layout.jsx | 3 ++- package.json | 20 +++++++++++--------- test/es5-component.jsx | 6 ++++-- test/es6-component.jsx | 5 +++-- test/es6-flow-component.jsx | 3 ++- 8 files changed, 38 insertions(+), 27 deletions(-) diff --git a/examples/dynamic/package.json b/examples/dynamic/package.json index b1ea11a..07184ec 100644 --- a/examples/dynamic/package.json +++ b/examples/dynamic/package.json @@ -5,14 +5,16 @@ "author": "Chris Johnson ", "private": true, "scripts": { - "start": "browserify -t babelify --standalone main views/main.js -o public/main.js && node app.js" + "start": "browserify -t [ babelify --presets [ es2015 react ] --standalone main views/main.js -o public/main.js ] && node app.js" }, "dependencies": { - "babelify": "^6.3.0", - "browserify": "^8.0.3", - "express": "^4.10.6", + "babel-preset-es2015": "^6.24.1", + "babel-preset-react": "^6.24.1", + "babelify": "^7.3.0", + "browserify": "^14.3.0", + "express": "^4.15.3", "express-react-views": "file:../../", - "react": "^15.0.0", - "react-dom": "^15.0.0" + "react": "^15.5.4", + "react-dom": "^15.5.4" } } diff --git a/examples/simple/package.json b/examples/simple/package.json index fad2449..b04ba55 100644 --- a/examples/simple/package.json +++ b/examples/simple/package.json @@ -6,11 +6,12 @@ "start": "node app.js" }, "dependencies": { - "errorhandler": "^1.4.3", - "express": "^4.13.4", + "errorhandler": "^1.5.0", + "express": "^4.15.3", "express-react-views": "file:../../", - "morgan": "^1.7.0", - "react": "^15.0.0", - "react-dom": "^15.0.0" + "morgan": "^1.8.1", + "prop-types": "^15.5.10", + "react": "^15.5.4", + "react-dom": "^15.5.4" } } diff --git a/examples/simple/views/index.jsx b/examples/simple/views/index.jsx index 90603f9..a7e8a07 100644 --- a/examples/simple/views/index.jsx +++ b/examples/simple/views/index.jsx @@ -1,4 +1,5 @@ var React = require('react'); +var PropTypes = require('prop-types'); var Layout = require('./layout'); // Contrived example to show how one might use Flow type annotations @@ -26,7 +27,7 @@ class Index extends React.Component { } Index.propTypes = { - title: React.PropTypes.string + title: PropTypes.string }; module.exports = Index; diff --git a/examples/simple/views/layout.jsx b/examples/simple/views/layout.jsx index 2c6e7ee..95d51d7 100644 --- a/examples/simple/views/layout.jsx +++ b/examples/simple/views/layout.jsx @@ -1,4 +1,5 @@ var React = require('react'); +var PropTypes = require('prop-types'); class Layout extends React.Component { render() { @@ -23,7 +24,7 @@ class Layout extends React.Component { } Layout.propTypes = { - title: React.PropTypes.string + title: PropTypes.string }; module.exports = Layout; diff --git a/package.json b/package.json index 8ca58c9..b02c173 100644 --- a/package.json +++ b/package.json @@ -22,16 +22,18 @@ "react-dom": "^0.14.0 || ^15.0.0" }, "dependencies": { - "babel-preset-es2015": "^6.5.0", - "babel-preset-react": "^6.5.0", - "babel-register": "^6.5.1", - "js-beautify": "^1.5.10", - "lodash.escaperegexp": "^4.1.1", - "object-assign": "^4.0.1" + "babel-preset-es2015": "^6.24.1", + "babel-preset-react": "^6.24.1", + "babel-register": "^6.24.1", + "js-beautify": "^1.6.14", + "lodash.escaperegexp": "^4.1.2", + "object-assign": "^4.1.1" }, "devDependencies": { - "react": "^15.0.0", - "react-dom": "^15.0.0", - "async": "^1.4.2" + "async": "^2.4.0", + "create-react-class": "^15.5.3", + "prop-types": "^15.5.10", + "react": "^15.5.4", + "react-dom": "^15.5.4" } } diff --git a/test/es5-component.jsx b/test/es5-component.jsx index e0eabee..4bfaaa1 100644 --- a/test/es5-component.jsx +++ b/test/es5-component.jsx @@ -1,4 +1,6 @@ var React = require('react'); +var PropTypes = require('prop-types'); +var createClass = require('create-react-class'); function countTo(n) { var a = []; @@ -8,9 +10,9 @@ function countTo(n) { return a.join(', '); } -var Index = React.createClass({ +var Index = createClass({ propTypes: { - title: React.PropTypes.string + title: PropTypes.string }, render: function() { diff --git a/test/es6-component.jsx b/test/es6-component.jsx index 062717f..2e63ecc 100644 --- a/test/es6-component.jsx +++ b/test/es6-component.jsx @@ -1,4 +1,5 @@ const React = require('react'); +const PropTypes = require('prop-types'); function countTo(n) { var a = []; @@ -8,7 +9,7 @@ function countTo(n) { return a.join(', '); } -class Index = extends React.Component { +class Index extends React.Component { render() { return (
    @@ -24,7 +25,7 @@ class Index = extends React.Component { } Index.propTypes = { - title: React.PropTypes.string + title: PropTypes.string }; module.exports = Index; diff --git a/test/es6-flow-component.jsx b/test/es6-flow-component.jsx index d7c0a90..26bd060 100644 --- a/test/es6-flow-component.jsx +++ b/test/es6-flow-component.jsx @@ -1,4 +1,5 @@ const React = require('react'); +const PropTypes = require('prop-types'); // Contrived example to show how one might use Flow type annotations function countTo(n:number):string { @@ -25,7 +26,7 @@ class Index = extends React.Component { } Index.propTypes = { - title: Read.PropTypes.string + title: PropTypes.string }; module.exports = Index;