Tevinthuku/.babelrc

## .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-transform-react-jsx", { "pragma": "createElement" }], // tell the babel plugin which function it needs to use for createElement. it defaults to React.createElement
    ["@babel/plugin-proposal-class-properties"]
  ]
}

## index.html
<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

## index.js
/**
/src/index.js = > this is the path of the file
**/

// we are importing createElement below because its the function
// that is needed by the "@babel/plugin-transform-react-jsx" plugin to standin as the replacement
// for React.createElement.

import { render, createElement, Component } from "tevreact";

  class App extends Component {
        constructor(props) {
          super(props);
          this.state = { movieName: "John Wick" };
        }
        render() {
          const { movieName } = this.state;
          const { userName } = this.props;

          return [
            <h1>Hello {userName},</h1>,
            <h1>Have you watched {movieName}?</h1>
          ];
        }
      }

render(<App userName={"Tev"}/>, document.querySelector("#app"));

## package.json
{
  "name": "tevreact-demo",
  "version": "1.0.0",
  "description": "demo app with tevreact and webpack",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.prod.js",
    "dev": "webpack-dev-server --open --config webpack.config.dev.js",
    "start": "serve -s dist"
  },
  "author": "tevin thuku",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.4",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/preset-env": "^7.4.4",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "react-hot-loader": "^4.8.4",
    "style-loader": "^0.23.1",
    "svg-inline-loader": "^0.8.0",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1",
    "webpack-merge": "^4.2.1"
  },
  "dependencies": {
    "tevreact": "^1.0.0",
    "serve": "^11.0.0"
  }
}

## webpack.config.base.js
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.bundle.js",
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/
      },
      {
        test: /\.(?:png|jpg|gif|svg)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "assets/[hash].[ext]"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html"
    })
  ]
};

## webpack.config.dev.js
const merge = require("webpack-merge");

const baseConfig = require("./webpack.config.base");

module.exports = merge(baseConfig, {
  mode: "development",
  devServer: {
    port: 9000,
    historyApiFallback: true
  },
  devtool: "source-map"
});

## webpack.config.prod.js
const merge = require("webpack-merge");

const baseConfig = require("./webpack.config.base");

module.exports = merge(baseConfig, {
  mode: "production"
});
	{
	"presets": [
	[
	"@babel/preset-env",
	{
	"targets": {
	"node": "current"
	}
	}
	]
	],
	"plugins": [
	["@babel/plugin-transform-react-jsx", { "pragma": "createElement" }], // tell the babel plugin which function it needs to use for createElement. it defaults to React.createElement
	["@babel/plugin-proposal-class-properties"]
	]
	}
	<!-- src/index.html -->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	</head>
	<body>
	<div id="app"></div>
	</body>
	</html>
	/**
	/src/index.js = > this is the path of the file
	**/

	// we are importing createElement below because its the function
	// that is needed by the "@babel/plugin-transform-react-jsx" plugin to standin as the replacement
	// for React.createElement.

	import { render, createElement, Component } from "tevreact";

	class App extends Component {
	constructor(props) {
	super(props);
	this.state = { movieName: "John Wick" };
	}
	render() {
	const { movieName } = this.state;
	const { userName } = this.props;

	return [
	<h1>Hello {userName},</h1>,
	<h1>Have you watched {movieName}?</h1>
	];
	}
	}

	render(<App userName={"Tev"}/>, document.querySelector("#app"));
	{
	"name": "tevreact-demo",
	"version": "1.0.0",
	"description": "demo app with tevreact and webpack",
	"main": "index.js",
	"scripts": {
	"build": "webpack --config webpack.config.prod.js",
	"dev": "webpack-dev-server --open --config webpack.config.dev.js",
	"start": "serve -s dist"
	},
	"author": "tevin thuku",
	"license": "ISC",
	"devDependencies": {
	"@babel/cli": "^7.4.4",
	"@babel/core": "^7.4.4",
	"@babel/plugin-proposal-class-properties": "^7.4.4",
	"@babel/plugin-syntax-dynamic-import": "^7.2.0",
	"@babel/plugin-transform-react-jsx": "^7.3.0",
	"@babel/preset-env": "^7.4.4",
	"babel-loader": "^8.0.5",
	"css-loader": "^2.1.1",
	"html-webpack-plugin": "^3.2.0",
	"react-hot-loader": "^4.8.4",
	"style-loader": "^0.23.1",
	"svg-inline-loader": "^0.8.0",
	"webpack": "^4.31.0",
	"webpack-cli": "^3.3.2",
	"webpack-dev-server": "^3.3.1",
	"webpack-merge": "^4.2.1"
	},
	"dependencies": {
	"tevreact": "^1.0.0",
	"serve": "^11.0.0"
	}
	}
	const path = require("path");
	const htmlWebpackPlugin = require("html-webpack-plugin");

	module.exports = {
	entry: "./src/index.js",
	output: {
	path: path.join(__dirname, "dist"),
	filename: "app.bundle.js",
	publicPath: "/"
	},
	module: {
	rules: [
	{
	test: /\.js$/,
	loader: "babel-loader",
	exclude: /node_modules/
	},
	{
	test: /\.css$/,
	use: ["style-loader", "css-loader"],
	exclude: /node_modules/
	},
	{
	test: /\.(?:png\|jpg\|gif\|svg)$/i,
	use: [
	{
	loader: "file-loader",
	options: {
	name: "assets/[hash].[ext]"
	}
	}
	]
	}
	]
	},
	plugins: [
	new htmlWebpackPlugin({
	template: "./src/index.html"
	})
	]
	};
	const merge = require("webpack-merge");

	const baseConfig = require("./webpack.config.base");

	module.exports = merge(baseConfig, {
	mode: "development",
	devServer: {
	port: 9000,
	historyApiFallback: true
	},
	devtool: "source-map"
	});