Merge pull request #10480 from vector-im/t3chguy/react16

Switch to React 16

src/components/views/auth/VectorAuthFooter.js

@@ -15,45 +15,39 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-const React = require('react');
+import React from 'react';
 import SdkConfig from 'matrix-react-sdk/lib/SdkConfig';
 
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
 
-module.exports = React.createClass({
-    displayName: 'VectorAuthFooter',
-    statics: {
-        replaces: 'AuthFooter',
-    },
+module.exports = () => {
+    const brandingConfig = SdkConfig.get().branding;
+    let links = [
+        {"text": "blog", "url": "https://medium.com/@RiotChat"},
+        {"text": "twitter", "url": "https://twitter.com/@RiotChat"},
+        {"text": "github", "url": "https://github.com/vector-im/riot-web"},
+    ];
 
-    render: function() {
-        const brandingConfig = SdkConfig.get().branding;
-        let links = [
-            {"text": "blog", "url": "https://medium.com/@RiotChat"},
-            {"text": "twitter", "url": "https://twitter.com/@RiotChat"},
-            {"text": "github", "url": "https://github.com/vector-im/riot-web"},
-        ];
+    if (brandingConfig && brandingConfig.authFooterLinks) {
+        links = brandingConfig.authFooterLinks;
+    }
 
-        if (brandingConfig && brandingConfig.authFooterLinks) {
-            links = brandingConfig.authFooterLinks;
-        }
-
-        const authFooterLinks = [];
-        for (const linkEntry of links) {
-            authFooterLinks.push(
-                <a href={linkEntry.url} key={linkEntry.text} target="_blank" rel="noopener">
-                    {linkEntry.text}
-                </a>,
-            );
-        }
-
-        return (
-            <div className="mx_AuthFooter">
-                {authFooterLinks}
-                <a href="https://matrix.org" target="_blank" rel="noopener">{ _t('powered by Matrix') }</a>
-            </div>
+    const authFooterLinks = [];
+    for (const linkEntry of links) {
+        authFooterLinks.push(
+            <a href={linkEntry.url} key={linkEntry.text} target="_blank" rel="noopener">
+                {linkEntry.text}
+            </a>,
         );
-    },
-});
+    }
+
+    return (
+        <div className="mx_AuthFooter">
+            {authFooterLinks}
+            <a href="https://matrix.org" target="_blank" rel="noopener">{ _t('powered by Matrix') }</a>
+        </div>
+    );
+};
+module.exports.statics = {
+    replaces: 'AuthFooter',
+};

src/components/views/auth/VectorCustomServerDialog.js

@@ -15,44 +15,40 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const React = require("react");
+import React from "react";
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
 
 /**
  * This is identical to `CustomServerDialog` except for replacing "this app"
  * with "Riot".
  */
-module.exports = React.createClass({
-    displayName: 'VectorCustomServerDialog',
-    statics: {
-        replaces: 'CustomServerDialog',
-    },
-
-    render: function() {
-        return (
-            <div className="mx_ErrorDialog">
-                <div className="mx_Dialog_title">
-                    { _t('Custom Server Options') }
-                </div>
-                <div className="mx_Dialog_content">
-                    <p>{_t(
-                        "You can use the custom server options to sign into other " +
-                        "Matrix servers by specifying a different homeserver URL. This " +
-                        "allows you to use Riot with an existing Matrix account on a " +
-                        "different homeserver.",
-                    )}</p>
-                    <p>{_t(
-                        "You can also set a custom identity server, but you won't be " +
-                        "able to invite users by email address, or be invited by email " +
-                        "address yourself.",
-                    )}</p>
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button onClick={this.props.onFinished} autoFocus={true}>
-                        { _t('Dismiss') }
-                    </button>
-                </div>
+module.exports = ({onFinished}) => {
+    return (
+        <div className="mx_ErrorDialog">
+            <div className="mx_Dialog_title">
+                { _t('Custom Server Options') }
             </div>
-        );
-    },
-});
+            <div className="mx_Dialog_content">
+                <p>{_t(
+                    "You can use the custom server options to sign into other " +
+                    "Matrix servers by specifying a different homeserver URL. This " +
+                    "allows you to use Riot with an existing Matrix account on a " +
+                    "different homeserver.",
+                )}</p>
+                <p>{_t(
+                    "You can also set a custom identity server, but you won't be " +
+                    "able to invite users by email address, or be invited by email " +
+                    "address yourself.",
+                )}</p>
+            </div>
+            <div className="mx_Dialog_buttons">
+                <button onClick={onFinished} autoFocus={true}>
+                    { _t('Dismiss') }
+                </button>
+            </div>
+        </div>
+    );
+};
+module.exports.statics = {
+    replaces: 'CustomServerDialog',
+};

src/vector/index.js

@@ -33,9 +33,6 @@ import React from 'react';
 // add React and ReactPerf to the global namespace, to make them easier to
 // access via the console
 global.React = React;
-if (process.env.NODE_ENV !== 'production') {
-    global.Perf = require('react-addons-perf');
-}
 
 import './modernizr';
 import ReactDOM from 'react-dom';