update to modern code style

packages/create-react-app/index.js

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+//   /!\ DO NOT MODIFY THIS FILE /!\
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+//
+// create-react-app is installed globally on people's computers. This means
+// that it is extremely difficult to have them upgrade the version and
+// because there's only one global version installed, it is very prone to
+// breaking changes.
+//
+// The only job of create-react-app is to init the repository and then
+// forward all the commands to the local version of create-react-app.
+//
+// If you need to add a new command, please add it to the scripts/ folder.
+//
+// The only reason to modify this file is to add more warnings and
+// troubleshooting information for the `create-react-app` command.
+//
+// Do not make breaking changes! We absolutely don't want to have to
+// tell people to update their global version of create-react-app.
+//
+// Also be careful with new language features.
+// This file must work on Node 0.10+.
+//
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+//   /!\ DO NOT MODIFY THIS FILE /!\
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+'use strict';
+
+var chalk = require('chalk');
+
+var currentNodeVersion = process.versions.node;
+if (currentNodeVersion.split('.')[0] < 4) {
+  console.error(
+    chalk.red(
+      'You are running Node ' + currentNodeVersion + '.\n' +
+      'Create React App requires Node 4 or higher. \n' +
+      'Please update your version of Node.'
+    )
+  );
+  process.exit(1);
+}
+
+require('./createReactApp');

packages/create-react-app/package.json

@@ -14,7 +14,8 @@
     "url": "https://github.com/facebookincubator/create-react-app/issues"
   },
   "files": [
-    "index.js"
+    "index.js",
+    "createReactApp.js"
   ],
   "bin": {
     "create-react-app": "./index.js"

packages/react-scripts/config/env.js

@@ -12,11 +12,10 @@
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 // injected into the application via DefinePlugin in Webpack configuration.
-
-var REACT_APP = /^REACT_APP_/i;
+const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
-  var raw = Object
+  const raw = Object
     .keys(process.env)
     .filter(key => REACT_APP.test(key))
     .reduce((env, key) => {
@@ -33,7 +32,7 @@ function getClientEnvironment(publicUrl) {
       'PUBLIC_URL': publicUrl
     });
   // Stringify all values so we can feed into Webpack DefinePlugin
-  var stringified = {
+  const stringified = {
     'process.env': Object
       .keys(raw)
       .reduce((env, key) => {

packages/react-scripts/config/jest/babelTransform.js

@@ -6,7 +6,6 @@
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  */
-
 'use strict';
 
 const babelJest = require('babel-jest');

packages/react-scripts/config/jest/fileTransform.js

@@ -16,6 +16,6 @@ const path = require('path');
 
 module.exports = {
   process(src, filename) {
-    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
   },
 };

packages/react-scripts/config/paths.js

@@ -10,13 +10,13 @@
 // @remove-on-eject-end
 'use strict';
 
-var path = require('path');
-var fs = require('fs');
-var url = require('url');
+const path = require('path');
+const fs = require('fs');
+const url = require('url');
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebookincubator/create-react-app/issues/637
-var appDirectory = fs.realpathSync(process.cwd());
+const appDirectory = fs.realpathSync(process.cwd());
 function resolveApp(relativePath) {
   return path.resolve(appDirectory, relativePath);
 }
@@ -36,20 +36,20 @@ function resolveApp(relativePath) {
 // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
 // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
 
-var nodePaths = (process.env.NODE_PATH || '')
+const nodePaths = (process.env.NODE_PATH || '')
   .split(process.platform === 'win32' ? ';' : ':')
   .filter(Boolean)
   .filter(folder => !path.isAbsolute(folder))
   .map(resolveApp);
 
-var envPublicUrl = process.env.PUBLIC_URL;
+const envPublicUrl = process.env.PUBLIC_URL;
 
 function ensureSlash(path, needsSlash) {
-  var hasSlash = path.endsWith('/');
+  const hasSlash = path.endsWith('/');
   if (hasSlash && !needsSlash) {
     return path.substr(path, path.length - 1);
   } else if (!hasSlash && needsSlash) {
-    return path + '/';
+    return `${path}/`;
   } else {
     return path;
   }
@@ -66,8 +66,8 @@ function getPublicUrl(appPackageJson) {
 // We can't use a relative path in HTML because we don't want to load something
 // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
 function getServedPath(appPackageJson) {
-  var publicUrl = getPublicUrl(appPackageJson);
-  var servedUrl = envPublicUrl || (
+  const publicUrl = getPublicUrl(appPackageJson);
+  const servedUrl = envPublicUrl || (
     publicUrl ? url.parse(publicUrl).pathname : '/'
   );
   return ensureSlash(servedUrl, true);
@@ -114,9 +114,9 @@ module.exports = {
   ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3
 };
 
-var ownPackageJson = require('../package.json');
-var reactScriptsPath = resolveApp(`node_modules/${ownPackageJson.name}`);
-var reactScriptsLinked = fs.existsSync(reactScriptsPath) && fs.lstatSync(reactScriptsPath).isSymbolicLink();
+const ownPackageJson = require('../package.json');
+const reactScriptsPath = resolveApp(`node_modules/${ownPackageJson.name}`);
+const reactScriptsLinked = fs.existsSync(reactScriptsPath) && fs.lstatSync(reactScriptsPath).isSymbolicLink();
 
 // config before publish: we're in ./packages/react-scripts/config/
 if (!reactScriptsLinked && __dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1) {

packages/react-scripts/config/webpack.config.dev.js

@@ -10,29 +10,29 @@
 // @remove-on-eject-end
 'use strict';
 
-var autoprefixer = require('autoprefixer');
-var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
-var getClientEnvironment = require('./env');
-var paths = require('./paths');
+const autoprefixer = require('autoprefixer');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+const getClientEnvironment = require('./env');
+const paths = require('./paths');
 
 // @remove-on-eject-begin
 // `path` is not used after eject - see https://github.com/facebookincubator/create-react-app/issues/1174
-var path = require('path');
+const path = require('path');
 // @remove-on-eject-end
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // In development, we always serve from the root. This makes config easier.
-var publicPath = '/';
+const publicPath = '/';
 // `publicUrl` is just like `publicPath`, but we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
-var publicUrl = '';
+const publicUrl = '';
 // Get environment variables to inject into our app.
-var env = getClientEnvironment(publicUrl);
+const env = getClientEnvironment(publicUrl);
 
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
@@ -202,18 +202,16 @@ module.exports = {
             loader: 'postcss-loader',
             options: {
               ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
-              plugins: function () {
-                return [
-                  autoprefixer({
-                    browsers: [
-                      '>1%',
-                      'last 4 versions',
-                      'Firefox ESR',
-                      'not ie < 9', // React doesn't support IE8 anyway
-                    ]
-                  })
-                ]
-              }
+              plugins:  () => ([
+                autoprefixer({
+                  browsers: [
+                    '>1%',
+                    'last 4 versions',
+                    'Firefox ESR',
+                    'not ie < 9', // React doesn't support IE8 anyway
+                  ]
+                })
+              ])
             }
           }
         ]

packages/react-scripts/config/webpack.config.prod.js

@@ -10,32 +10,32 @@
 // @remove-on-eject-end
 'use strict';
 
-var autoprefixer = require('autoprefixer');
-var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var ManifestPlugin = require('webpack-manifest-plugin');
-var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-var paths = require('./paths');
-var getClientEnvironment = require('./env');
+const autoprefixer = require('autoprefixer');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const ManifestPlugin = require('webpack-manifest-plugin');
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const paths = require('./paths');
+const getClientEnvironment = require('./env');
 
 // @remove-on-eject-begin
 // `path` is not used after eject - see https://github.com/facebookincubator/create-react-app/issues/1174
-var path = require('path');
+const path = require('path');
 // @remove-on-eject-end
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
-var publicPath = paths.servedPath;
+const publicPath = paths.servedPath;
 // Some apps do not use client-side routing with pushState.
 // For these, "homepage" can be set to "." to enable relative asset paths.
-var shouldUseRelativeAssetPaths = publicPath === './';
+const shouldUseRelativeAssetPaths = publicPath === './';
 // `publicUrl` is just like `publicPath`, but we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-var publicUrl = publicPath.slice(0, -1);
+const publicUrl = publicPath.slice(0, -1);
 // Get environment variables to inject into our app.
-var env = getClientEnvironment(publicUrl);
+const env = getClientEnvironment(publicUrl);
 
 // Assert this just to be safe.
 // Development builds of React are slow and not intended for production.
@@ -209,18 +209,16 @@ module.exports = {
               loader: 'postcss-loader',
               options: {
                 ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
-                plugins: function () {
-                  return [
-                    autoprefixer({
-                      browsers: [
-                        '>1%',
-                        'last 4 versions',
-                        'Firefox ESR',
-                        'not ie < 9', // React doesn't support IE8 anyway
-                      ]
-                    })
-                  ]
-                }
+                plugins: () => ([
+                  autoprefixer({
+                    browsers: [
+                      '>1%',
+                      'last 4 versions',
+                      'Firefox ESR',
+                      'not ie < 9', // React doesn't support IE8 anyway
+                    ]
+                  })
+                ])
               }
             }
           ]

packages/react-scripts/config/webpackDevServer.config.js

@@ -10,11 +10,11 @@
 // @remove-on-eject-end
 'use strict';
 
-var config = require('./webpack.config.dev');
-var paths = require('./paths');
+const config = require('./webpack.config.dev');
+const paths = require('./paths');
 
-var protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-var host = process.env.HOST || 'localhost';
+const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+const host = process.env.HOST || 'localhost';
 
 module.exports = {
   // Enable gzip compression of generated files.

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js

@@ -11,10 +11,10 @@ import React, { Component, PropTypes } from 'react'
 
 function load(prefix) {
   return [
-    { id: 1, [prefix + 'name']: '1' },
-    { id: 2, [prefix + 'name']: '2' },
-    { id: 3, [prefix + 'name']: '3' },
-    { id: 4, [prefix + 'name']: '4' }
+    { id: 1, [`${prefix} name`]: '1' },
+    { id: 2, [`${prefix} name`]: '2' },
+    { id: 3, [`${prefix} name`]: '3' },
+    { id: 4, [`${prefix} name`]: '4' }
   ];
 }