Full project setup.
{ | |
"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" | |
}); |
const merge = require("webpack-merge"); | |
const baseConfig = require("./webpack.config.base"); | |
module.exports = merge(baseConfig, { | |
mode: "production" | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment