diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..674c9fb Binary files /dev/null and b/.DS_Store differ diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..396b894 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,10 @@ +{ + "extends": "airbnb", + "globals": { + "describe": false, + "it": false, + "expect": false, + "jasmine": false, + "beforeEach": false, + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 04c01ba..660e523 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules/ -dist/ \ No newline at end of file +dist/ +npm-debug.log* diff --git a/README.md b/README.md index 19b4557..413faa5 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ A barebones repo to get you started with Webpack, Babel, and React. ## Installation -`git clone https://github.com/naomiajacobs/reactBoilerplate` +`git clone https://github.com/kmeraz/reactBoilerplate` then diff --git a/client/.DS_Store b/client/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/client/.DS_Store differ diff --git a/client/app.jsx b/client/app.jsx index b938cb7..ca337c7 100644 --- a/client/app.jsx +++ b/client/app.jsx @@ -1,17 +1,17 @@ - 'use strict'; - import React from 'react'; -import { render } from 'react-dom'; -var App = React.createClass({ +class App extends React.Component { + + constructor(props) { + super(props); + this.state = { + }; + } render() { return

Hello, World

; - }, + } -}); +} -render ( - , - document.getElementById('app') -); \ No newline at end of file +export default App; diff --git a/client/index.html b/client/index.html index 71adb8c..a7bf844 100644 --- a/client/index.html +++ b/client/index.html @@ -6,6 +6,6 @@
- + \ No newline at end of file diff --git a/client/index.jsx b/client/index.jsx new file mode 100644 index 0000000..c5d10c8 --- /dev/null +++ b/client/index.jsx @@ -0,0 +1,8 @@ +import React from 'react'; +import App from './app.jsx'; +import { render } from 'react-dom'; + +render( + , + document.getElementById('app') +); diff --git a/package.json b/package.json index beedd55..742a717 100644 --- a/package.json +++ b/package.json @@ -1,33 +1,48 @@ { - "name": "reactboilerplate", + "name": "ReactBoilerplate", "version": "1.0.0", - "description": "Boilerplate repo for React/Webpack/Babel apps", + "description": "Boilerplate repo for React/Webpack/Babel app", "main": "./client/index.html", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", + "test": "karma start", "start": "webpack-dev-server --inline --hot --content-base client/" }, "repository": { - "type": "git", - "url": "git+https://github.com/naomiajacobs/reactBoilerplate.git" + "type": "git" }, - "author": "Naomi Jacobs", - "license": "ISC", + "license": "MIT", "bugs": { - "url": "https://github.com/naomiajacobs/reactBoilerplate/issues" }, - "homepage": "https://github.com/naomiajacobs/reactBoilerplate#readme", "dependencies": { + "autoprefixer": "^6.3.6", "babel": "^6.1.18", "babel-core": "^6.2.1", "babel-loader": "^6.2.0", "babel-preset-es2015": "^6.1.18", "babel-preset-react": "^6.1.18", - "react": "^0.14.3", - "react-dom": "^0.14.3", - "webpack": "^1.12.9" + "eslint": "^2.7.0", + "eslint-config-airbnb": "^7.0.0", + "eslint-loader": "^1.3.0", + "eslint-plugin-jsx-a11y": "^0.6.2", + "eslint-plugin-react": "^4.3.0", + "extract-text-webpack-plugin": "^1.0.1", + "jasmine-core": "^2.4.1", + "node-sass": "^3.4.2", + "nodemon": "^1.9.1", + "react": "^15.0.0", + "react-dom": "^15.0.0", + "redux": "^3.4.0", + "webpack": "^1.12.14" }, "devDependencies": { - "webpack-dev-server": "^1.14.0" + "jasmine": "^2.4.1", + "karma": "^0.13.22", + "karma-chrome-launcher": "^0.2.3", + "karma-firefox-launcher": "^0.1.7", + "karma-jasmine": "^0.3.8", + "karma-sourcemap-loader": "^0.3.7", + "karma-spec-reporter": "0.0.26", + "karma-webpack": "^1.7.0", + "react-addons-test-utils": "^15.0.0" } } diff --git a/webpack.config.js b/webpack.config.js index 43387ef..736261d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,14 +7,14 @@ module.exports = { // the top-level file that then `requires` some other files, which then // `require` some other files, etc. Webpack pulls these all into a modularized // bundle. - entry: './client/app.jsx', + entry: './client/index.jsx', // `output` is an object with options for the bundle that Webpack creates // out of your source files. output: { // `path` is a path to the directory where your bundle will be written. - path: 'dist', + path: 'client/dist', // `publicPath` is optional. It allows you to set a separate path that will // be used by any lazy-loading in your Webpack scripts to load more chunks @@ -22,7 +22,7 @@ module.exports = { // your bundle will be written, while `publicPath` tells your Webpack modules // where your bundle can be requested from the server. In this repo, `publicPath` // tells the webpack-dev-server that it's ok to serve the files in the dist folder. - publicPath: 'dist', + publicPath: 'client/dist', // `filename` tells Webpack what to call the file/files it outputs. filename: 'bundle.js', @@ -55,7 +55,7 @@ module.exports = { // this object requires 'babel-loader' to do the transformation. // We could actually apply multiple loaders here by using the property `loaders` // instead of `loader`, which takes an array of loader names. - // + // // When you're declaring loaders in this field, you can leave off the `-loader` part // of the package name. Webpack will interpret `babel` as `babel-loader` here, // `coffee` as `coffee-loader`, etc. But you can also just write out `babel-loader`, @@ -69,9 +69,15 @@ module.exports = { // loader: 'babel?presets[]=react,presets[]=es2015' query: { presets: ['react', 'es2015'], - } + }, }, - ] - } + + { + test: /\.jsx?$/, + loader: 'eslint-loader', + exclude: /node_modules/, + }, + ], + }, };