Skip to content

Instantly share code, notes, and snippets.

@appwebtech
Last active March 10, 2019 21:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save appwebtech/78e26a37085322b76fbed521b6a8ccd7 to your computer and use it in GitHub Desktop.
Save appwebtech/78e26a37085322b76fbed521b6a8ccd7 to your computer and use it in GitHub Desktop.
JS Bin// source https://jsbin.com/hetipaw
// Webpack Configuration Latest Amendment; Modules changed to rules as shown below.
// The loader references babel-loader and NOT just babel.
module.exports = {
entry: "./app/js/main.js",
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
}
}
// Import both React && React DOM within main.js
// const app = document.getElementById('app');
// app.innerHTML = "Hello ES6!"
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
React.createElement("p", null, "Hello React!"),
document.getElementById('app')
);
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
// Webpack Configuration Latest Amendment; Modules changed to rules as shown below.
// The loader references babel-loader and NOT just babel.
module.exports = {
entry: "./app/js/main.js",
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
}
}
// Import both React && React DOM within main.js
// const app = document.getElementById('app');
// app.innerHTML = "Hello ES6!"
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
React.createElement("p", null, "Hello React!"),
document.getElementById('app')
);
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Webpack Configuration Latest Amendment; Modules changed to rules as shown below.
// The loader references babel-loader and NOT just babel.
module.exports = {
entry: "./app/js/main.js",
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
}
}
// Import both React && React DOM within main.js
// const app = document.getElementById('app');
// app.innerHTML = "Hello ES6!"
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<p>Hello React!</p>,
document.getElementById('app')
);
</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment