Initialization Lifecycle Methods Implemented

nikkaroraa · nikkaroraa · commit f9993e248578 · 2017-07-10T20:52:27.000+05:30
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "react-default",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack-dev-server --content-base static --inline",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.15.3",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.25.0",
+    "babel-loader": "^7.0.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "webpack": "^2.6.1"
+  }
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,8 @@
+const express = require("express");
+const app = express();
+
+app.use ( express.static("static/") );
+
+app.listen(3000, function() {
+    console.log("Listening on port 3000")
+});
diff --git a/src/app.jsx b/src/app.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+
+class App extends React.Component{
+
+	constructor(props){
+		super(props);
+
+		
+		//getInitialState has moved to constructor
+		console.log("constructor() is called");
+		this.state = {value: props.initialValue};
+	}
+
+    render(){ 
+    	return(
+           <div>The value is: {this.state.value}</div>
+    	);
+    }
+
+
+}
+
+App.defaultProps = { initialValue: 0 };
+App.propTypes = { initialValue: React.PropTypes.number };
+
+var app = <App/>;
+
+var node = document.getElementById("app");
+
+ReactDOM.render(app, node);
diff --git a/static/index.html b/static/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>React</title>
+</head>
+<body>
+<div id="app"></div>
+<script src="bundle.js"></script>
+</body>
+</html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,41 @@
+var webpack = require('webpack');
+var path = require('path');
+
+var BUILD_DIR = path.resolve(__dirname, 'static/');
+var APP_DIR = path.resolve(__dirname, 'src/');
+
+var config = {
+
+    entry : APP_DIR + '/app.jsx',
+
+    output: {
+        path: BUILD_DIR,
+        filename: 'bundle.js'
+    },
+
+    module : {
+        loaders : [
+            {
+                test : /\.jsx?/,
+                include : APP_DIR,
+                loader : "babel-loader",
+                query: {
+                    presets: ['react', 'es2015'] 
+                }
+            }
+        ]
+    },
+
+    resolve: {
+        // you can now require or import('file') instead of require('file.js or file.jsx')
+        extensions: ['.js', '.jsx']
+    }
+
+
+};
+
+module.exports = config;
+
+
+
+
