From a4ed62da476682083b8a6c30ef768e9619e5b345 Mon Sep 17 00:00:00 2001 From: Yuval Adam Date: Tue, 8 Dec 2015 17:17:57 +0200 Subject: React+babel is working --- .babelrc | 3 +++ index.js | 19 +++++++++++++++++-- package.json | 9 +++++++++ webpack.config.js | 7 ++++--- 4 files changed, 33 insertions(+), 5 deletions(-) create mode 100644 .babelrc diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..93fbaa3 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015", "stage-0", "react"] +} \ No newline at end of file diff --git a/index.js b/index.js index 993e9a9..f82e7c8 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,18 @@ -require("./style.css"); +import './style.css' -document.write("It works."); \ No newline at end of file +import React from 'react' +import ReactDOM from 'react-dom' + +class Note extends React.Component { + render() { + return
Hai!
+ } +} + +main(); + +function main() { + const app = document.createElement('div') + document.body.appendChild(app) + ReactDOM.render(, app) +} \ No newline at end of file diff --git a/package.json b/package.json index e9cc590..d0dd9ed 100644 --- a/package.json +++ b/package.json @@ -11,5 +11,14 @@ "devDependencies": { "webpack": "^1.12.9", "webpack-dev-server": "^1.14.0" + }, + "dependencies": { + "babel-core": "^6.3.15", + "babel-loader": "^6.2.0", + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "babel-preset-stage-0": "^6.3.13", + "react": "^0.14.3", + "react-dom": "^0.14.3" } } diff --git a/webpack.config.js b/webpack.config.js index 2ccc988..945d633 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,12 +1,13 @@ module.exports = { - entry: "./index.js", + entry: './index.js', output: { path: __dirname, - filename: "bundle.js" + filename: 'bundle.js' }, module: { loaders: [ - { test: /\.css$/, loader: "style!css" } + { test: /\.js$/, loader: 'babel' }, + { test: /\.css$/, loader: 'style!css' } ] } }; \ No newline at end of file -- cgit v1.3.1