From f7277a6a74d6fbdc66f0326cb5f0d82cdcd7cb90 Mon Sep 17 00:00:00 2001
From: mikunimaru <43168745+mikunimaru@users.noreply.github.com>
Date: Thu, 20 Dec 2018 03:50:22 +0900
Subject: [PATCH] Update React

React has been updated to v16 and the contents of the templete have been adjusted for v16.
---
 package.json                                       |  6 +++---
 templates/simple-1/template.jsx                    | 12 ++++++------
 templates/ui-components/components/ReactColors.jsx | 12 ++++++------
 templates/ui-components/template.jsx               |  4 ++--
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 84a03ee..8ca421a 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "ansi": "^0.3.0",
     "babel-core": "^6.5.2",
     "babel-preset-es2015": "^6.5.0",
-    "babel-preset-react": "^6.5.0",
+    "babel-preset-react": "^6.24.1",
     "babel-register": "^6.5.2",
     "cross-env": "^3.1.4",
     "dot": "^1.0.3",
@@ -32,8 +32,8 @@
     "pug": "^2.0.0-alpha6",
     "raptor-async": "^1.1.2",
     "raptor-polyfill": "^1.0.2",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
     "swig": "^1.4.2",
     "uglify-js": "^3.0.0",
     "vue": "^2.0.1",
diff --git a/templates/simple-1/template.jsx b/templates/simple-1/template.jsx
index 923378a..3927106 100644
--- a/templates/simple-1/template.jsx
+++ b/templates/simple-1/template.jsx
@@ -1,7 +1,7 @@
 'use strict';
 var React = require('react');
 
-function renderColor(color) {
+const renderColor = (color) => {React.memo((color) => {
     var style = {
         backgroundColor: color
     };
@@ -9,17 +9,17 @@ function renderColor(color) {
     return <li className="color" style={style}>
             {color}
         </li>
-}
+})};
 
-function renderColors(colors) {
+const renderColors = (colors) => {React.memo((colors) => {
     if (colors.length) {
         return (<ul>{colors.map(renderColor)}</ul>);
     } else {
         return <div>No colors!</div>
     }
-}
+})};
 
-module.exports = React.createClass({
+module.exports = class extends React.PureComponent {
     render() {
         var style = {backgroundColor: 'blue', border: '1px solid black'};
 
@@ -31,4 +31,4 @@ module.exports = React.createClass({
             <button type="button" className="{this.props.primary ? 'primary' : 'secondary'}">Click me!</button>
         </div>;
     }
-});
\ No newline at end of file
+};
diff --git a/templates/ui-components/components/ReactColors.jsx b/templates/ui-components/components/ReactColors.jsx
index 6bf572d..654cb11 100644
--- a/templates/ui-components/components/ReactColors.jsx
+++ b/templates/ui-components/components/ReactColors.jsx
@@ -1,7 +1,7 @@
 'use strict';
 var React = require('react');
 
-function renderColor(color) {
+const renderColor = (color) => {React.memo((color) => {
     var style = {
         backgroundColor: color
     };
@@ -9,17 +9,17 @@ function renderColor(color) {
     return <li className="color" style={style}>
             {color}
         </li>
-}
+})};
 
-function renderColors(colors) {
+const renderColors = (colors) =>  {React.memo((colors) => {
     if (colors.length) {
         return (<ul>{colors.map(renderColor)}</ul>);
     } else {
         return <div>No colors!</div>
     }
-}
+})};
 
-module.exports = class extends React.Component {
+module.exports = class extends React.PureComponent {
     componentDidMount() {
         console.log('Mounted!')
     }
@@ -30,4 +30,4 @@ module.exports = class extends React.Component {
             {renderColors(this.props.colors)}
         </div>;
     }
-};
\ No newline at end of file
+};
diff --git a/templates/ui-components/template.jsx b/templates/ui-components/template.jsx
index 9f1f691..cd57507 100644
--- a/templates/ui-components/template.jsx
+++ b/templates/ui-components/template.jsx
@@ -1,10 +1,10 @@
 var React = require('react');
 var Colors = require('./components/ReactColors.jsx');
 
-module.exports = module.exports = React.createClass({
+module.exports = class extends React.PureComponent {
     render() {
         return <div className="my-app">
             <Colors colors={this.props.colors} name={this.props.name}/>
         </div>;
     }
-});
\ No newline at end of file
+};