Skip to content

Instantly share code, notes, and snippets.

@Tevinthuku

Tevinthuku/.babelrc

Last active Aug 27, 2019
Embed
What would you like to do?
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