add babel & react

quangv · Nov 24, 2015 · 3d07a30 · 3d07a30
1 parent 8f7d5d3
commit 3d07a30
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 4 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "es2015"]
+}
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,2 @@
 node_modules
-public/build
+public/bundle.js
diff --git a/__tests__/app.js b/__tests__/app.js
@@ -0,0 +1,15 @@
+jest.dontMock('../containers/App');
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-addons-test-utils';
+
+import App from '../containers/App';
+
+describe('App', function(){
+  it('should exists', function(){
+    let app = TestUtils.renderIntoDocument(<App />);
+    expect(TestUtils.isCompositeComponent(app)).toBeTruthy();
+    expect(true).toBeTruthy();
+  });
+})
diff --git a/containers/App.jsx b/containers/App.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class App extends React.Component {
+  render(){
+    return  <h1>In App</h1>
+  }
+}
+
+//export default App
+module.exports = App
diff --git a/entry.js b/entry.js
@@ -1 +1,9 @@
-console.log('Hello app');
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './containers/App'
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app')
+);
diff --git a/package.json b/package.json
@@ -24,8 +24,26 @@
   },
   "homepage": "https://github.com/quangv/shirt-sizes#readme",
   "devDependencies": {
+    "babel-core": "^6.2.1",
+    "babel-jest": "^6.0.1",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.1.18",
+    "babel-preset-react": "^6.1.18",
     "jest-cli": "^0.8.0",
+    "react": "^0.14.3",
+    "react-addons-test-utils": "^0.14.3",
+    "react-dom": "^0.14.3",
     "webpack": "^1.12.8",
     "webpack-dev-server": "^1.12.1"
+  },
+  "jest": {
+    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
+    "moduleFileExtensions": ["js", "jsx"],
+    "unmockedModulePathPatterns": [
+      "<rootDir>/node_modules/react",
+      "<rootDir>/node_modules/react-dom",
+      "<rootDir>/node_modules/react-addons-test-utils",
+      "<rootDir>/node_modules/fbjs"
+    ]
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,6 @@
 <body>
   <h1>Select a Shirt Size</h1>
   <div id="app"></div>
-  <script src="./build/bundle.js"></script>
+  <script src="./bundle.js"></script>
 </body>
 </html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,9 +1,24 @@
 module.exports = {
   entry: './entry.js',
   output: {
-    path: 'public/build',
+    path: 'public',
     filename: 'bundle.js'
   },
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        exclude: /(node_modules|bower_components)/,
+        loader: 'babel',
+        query: {
+          presets: ['react', 'es2015']
+        }
+      }
+    ]
+  },
   devServer: {
     contentBase: './public'
   }