Update on 02 readme.md plus starting point 03 state

vermuz · Oct 17, 2016 · 26ab4aa · 26ab4aa
1 parent 183e2f9
commit 26ab4aa
Show file tree

Hide file tree

Showing 8 changed files with 171 additions and 5 deletions.
diff --git a/02 Properties/readme.md b/02 Properties/readme.md
@@ -1,11 +1,8 @@
 # 02 Properties
 
-In this sample we will introduce a basic React concept, handling propertiers and
-callbacks.
+In this sample we will introduce a basic React concept, handling properties.
 
-We will add a _username_ property and display it in the helloWorld component,
-then we will create a second component that will let the user change the default
-name to another one and notify the parent control about it.
+We will add a _username_ property and display it in the helloWorld component.
 
 We will take a startup point sample _01 Hello React_:
 

diff --git a/03 State/package.json b/03 State/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "samplereact",
+  "version": "1.0.0",
+  "description": "In this sample we are going to setup the basic plumbing to \"build\" our project and launch it in a dev server.",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-devserver --inline",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "typescript": "^2.0.3",
+    "webpack": "^1.13.2",
+    "webpack-devserver": "0.0.6"
+  },
+  "dependencies": {
+    "@types/react": "^0.14.41",
+    "@types/react-dom": "^0.14.18",
+    "bootstrap": "^3.3.7",
+    "css-loader": "^0.25.0",
+    "file-loader": "^0.9.0",
+    "html-webpack-plugin": "^2.22.0",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "style-loader": "^0.13.1",
+    "ts-loader": "^0.9.3",
+    "url-loader": "^0.5.7"
+  }
+}
diff --git a/03 State/readme.md b/03 State/readme.md
@@ -0,0 +1,26 @@
+# 02 Properties
+
+In this sample we will introduce a basic React concept, handling State.
+
+In this case scenario we will provide a default userName but let the user update
+it.
+
+
+We will take a startup point sample _02 Properties_:
+
+Summary steps:
+
+- An app component that will hold an state, this state will contain the current
+_username_ (by default assigned to "no user" value).
+- This app component will render the _HelloWorld_ component.
+- We will
+
+## Prerequisites
+
+Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0) if they are not already installed on your computer.
+
+> Verify that you are running at least node v6.x.x and npm 3.x.x by running `node -v` and `npm -v` in a terminal/console window. Older versions may produce errors.
+
+## Steps to build it
+
+- Copy the content from _01 HelloReact_ and execute _npm install_.
diff --git a/03 State/src/hello.tsx b/03 State/src/hello.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export const HelloComponent = (props: {userName : string}) => {
+  return (
+    <h2>Hello user: {props.userName} !</h2>
+  );
+}
diff --git a/03 State/src/index.html b/03 State/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <body>
+    <h1>Sample app</h1>
+    <div id="root">
+    </div>
+  </body>
+</html>
diff --git a/03 State/src/main.tsx b/03 State/src/main.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import {HelloComponent} from './hello';
+
+ReactDOM.render(
+  <HelloComponent userName="John" />
+  , document.getElementById('root'));
diff --git a/03 State/tsconfig.json b/03 State/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "declaration": false,
+    "noImplicitAny": false,
+    "jsx": "react",
+    "sourceMap": true,
+    "noLib": false,
+    "suppressImplicitAnyIndexErrors": true
+  },
+  "compileOnSave": false,
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/03 State/webpack.config.js b/03 State/webpack.config.js
@@ -0,0 +1,71 @@
+var path = require('path');
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+var basePath = __dirname;
+
+module.exports = {
+  context: path.join(basePath, "src"),
+  resolve: {
+      extensions: ['', '.js', '.ts', '.tsx']
+  },
+
+  entry: [
+    './main.tsx',
+    '../node_modules/bootstrap/dist/css/bootstrap.css'
+  ],
+  output: {
+    path: path.join(basePath, 'dist'),
+    filename: 'bundle.js'
+  },
+
+  devtool: 'source-map',
+
+  devServer: {
+       contentBase: './dist', //Content base
+       inline: true, //Enable watch and live reload
+       host: 'localhost',
+       port: 8080,
+       stats: 'errors-only'
+  },
+
+  module: {
+    loaders: [
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        loader: 'ts-loader'
+      },
+      {
+        test: /\.css$/,
+        loader: 'style-loader!css-loader'
+      },
+      // Loading glyphicons => https://github.com/gowravshekar/bootstrap-webpack
+      // Using here url-loader and file-loader
+      {
+        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url?limit=10000&mimetype=application/font-woff'
+      },
+      {
+        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url?limit=10000&mimetype=application/octet-stream'
+      },
+      {
+        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'file'
+      },
+      {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url?limit=10000&mimetype=image/svg+xml'
+      }
+    ]
+  },
+  plugins: [
+    // Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html', // Name of file in ./dist/
+      template: 'index.html', // Name of template in ./src
+      hash: true
+    })
+  ]
+}