diff --git a/02 Properties/readme.md b/02 Properties/readme.md
index b4764dc..265db25 100644
--- 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
new file mode 100644
index 0000000..1c2dfaf
--- /dev/null
+++ 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
new file mode 100644
index 0000000..a8b8249
--- /dev/null
+++ 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
new file mode 100644
index 0000000..5636921
--- /dev/null
+++ b/03 State/src/hello.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export const HelloComponent = (props: {userName : string}) => {
+ return (
+ Hello user: {props.userName} !
+ );
+}
diff --git a/03 State/src/index.html b/03 State/src/index.html
new file mode 100644
index 0000000..4b32a83
--- /dev/null
+++ b/03 State/src/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+ Sample app
+
+
+
+
diff --git a/03 State/src/main.tsx b/03 State/src/main.tsx
new file mode 100644
index 0000000..8e4358b
--- /dev/null
+++ 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(
+
+ , document.getElementById('root'));
diff --git a/03 State/tsconfig.json b/03 State/tsconfig.json
new file mode 100644
index 0000000..3cd7705
--- /dev/null
+++ 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
new file mode 100644
index 0000000..e16553d
--- /dev/null
+++ 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
+ })
+ ]
+}