Updated to React 16 and implimented styled-components

Author: Ankith Konda

package-lock.json

@@ -27,66 +27,40 @@
     "autoprefixer-loader": "^3.2.0",
     "babel-cli": "^6.24.0",
     "babel-core": "^6.24.0",
-    "babel-loader": "^6.4.0",
-    "babel-preset-latest": "^6.24.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-react-html-attrs": "^2.0.0",
+    "babel-plugin-transform-class-properties": "^6.23.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.23.0",
     "babel-preset-stage-0": "^6.22.0",
     "browser-sync": "^2.18.8",
     "browser-sync-webpack-plugin": "^1.1.4",
-    "css-loader": "^0.27.3",
-    "extract-text-webpack-plugin": "^2.1.0",
-    "file-loader": "^0.10.1",
+    "css-loader": "^0.28.7",
+    "extract-text-webpack-plugin": "^3.0.1",
+    "file-loader": "^1.1.5",
     "json-loader": "^0.5.4",
     "node-sass": "^4.5.0",
     "path": "^0.12.7",
     "sass-loader": "^6.0.3",
     "strip-loader": "^0.1.2",
-    "style-loader": "^0.13.2",
-    "url-loader": "^0.5.8",
-    "webpack": "^2.2.1",
+    "style-loader": "^0.19.0",
+    "url-loader": "^0.6.2",
+    "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.3.1"
   },
   "dependencies": {
-    "axios": "^0.15.3",
-    "babel-core": "^6.24.0",
-    "babel-loader": "^6.4.0",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-react-html-attrs": "^2.0.0",
-    "babel-plugin-transform-class-properties": "^6.23.0",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "axios": "^0.16.2",
     "bootstrap": "^3.3.7",
-    "font-awesome": "^4.7.0",
-    "font-awesome-webpack": "0.0.5-beta.2",
-    "fs": "0.0.1-security",
-    "jquery": "^3.1.1",
-    "js-marker-clusterer": "^1.0.0",
-    "jspdf": "^1.3.3",
-    "less": "^2.7.2",
     "lodash": "^4.17.4",
-    "marker-clusterer-plus": "^2.1.4",
-    "pdfmake": "^0.1.27",
-    "prop-types": "~15.5.4",
-    "rc-slider": "^8.1.3",
-    "react": "^15.4.2",
-    "react-bootstrap": "^0.30.8",
-    "react-bootstrap-slider": "^2.0.0",
-    "react-checkbox-group": "^3.1.1",
-    "react-datepicker": "^0.47.0",
-    "react-dom": "^15.4.2",
-    "react-dropdown": "^1.2.1",
-    "react-dropzone": "^3.12.2",
-    "react-fa": "^4.1.2",
-    "react-fontawesome": "^1.5.0",
-    "react-google-autocomplete": "^1.0.12",
-    "react-photo-gallery": "^5.6.1",
-    "react-redux": "^5.0.3",
-    "react-select": "^1.0.0-rc.3",
-    "react-tagcloud": "^1.2.0",
-    "redux": "^3.6.0",
-    "redux-logger": "^2.8.2",
-    "redux-promise-middleware": "^4.2.0",
-    "redux-thunk": "^2.2.0",
+    "polished": "^1.8.0",
+    "prop-types": "~15.6.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-fa": "^5.0.0",
+    "styled-components": "^2.2.1",
     "uuid": "^3.0.1"
   },
-  "private":true
+  "private": true
 }

package.json

@@ -1,13 +1,20 @@
-import '../stylesheets/Container.scss'
-
 import React from "react"
-
 import axios from "axios"
+import styled from "styled-components"
+
+
+// See styled-components documentation for further api info
+const Container = styled.div`
 
+    background-color:green;
 
-export default class Container extends React.Component {
+`
 
+const Heading = styled.h1`
+    color:red;
+`
 
+export default class App extends React.Component {
     constructor(props){
         super(props);
 
@@ -58,26 +65,25 @@ export default class Container extends React.Component {
     render(){
 
         let LTI_Message = "Oh No LTI is not valid"
-        if($LTI_custom_variable_by_user_bool && $LTI_is_valid){
-            LTI_Message = <span className="valid-lti-span">{"LTI is valid and a custom LTI varible is now available in the gloabal scope - "+$LTI_custom_variable_by_user_string}</span>;
+        if($LTI_is_valid){
+            LTI_Message = <span>{"LTI is valid and a custom LTI varible is now available in the gloabal scope - "+$LTI_custom_variable_by_user_string}</span>;
         }
 
 
         return (
-        <div className="container-component clearfix">
-            <h1>{this.state.input_val}</h1>
+        <Container>
+            <Heading>{this.state.input_val}</Heading>
 
             <input 
                 type="text" 
-                class="form-input" 
                 id="usr"
                 value={this.state.input_val}
                 onChange={this.handleInputOnChange}
             />
-            <h2>{this.state.api_message}</h2>
+            <h2 className="test">{this.state.api_message}</h2>
             <h3>{LTI_Message}</h3>
 
 
-        </div>);
+        </Container>);
     }
 }

src/components/Container.js renamed to src/Components/App.js

@@ -1,15 +1,13 @@
-import 'bootstrap/dist/css/bootstrap.css'
-
 import React from "react"
 import ReactDOM from "react-dom"
 
-import Container from "./components/Container"
+import App from "./Components/App"
 
-const app = document.getElementById('app');
+const appContainer = document.getElementById('app');
 let state = {
     input_val:"Welcome to React App with PHP API",
     api_message:"",
 }
-ReactDOM.render(<Container appState={state}/>, app);
+ReactDOM.render(<App appState={state}/>, appContainer);
 
 

src/index.js

@@ -44,7 +44,7 @@ module.exports = {
                 exclude: /(node_modules)/,
                 loader: "babel-loader",
                 query: {
-                  presets: ["latest", "stage-0", "react"],
+                  presets: ["env", "stage-0", "react"],
                   plugins: ["react-html-attrs", "transform-class-properties", "transform-decorators-legacy"]
                 }
             },
@@ -56,7 +56,7 @@ module.exports = {
             {
                 test: /\.scss$/,
                 exclude: /(node_modules)/,
-                loader:"style-loader!css-loader!autoprefixer-loader!sass-loader"
+                loader:"style-loader!css-loader!sass-loader"
             },
             {
                 test: /\.css$/,