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