├── index.jsx ├── .gitignore ├── public └── index.html ├── README.md ├── LICENSE ├── package.json └── webpack.config.js /index.jsx: -------------------------------------------------------------------------------- 1 | require("./node_modules/bootstrap/dist/css/bootstrap.min.css") 2 | import React from 'react'; 3 | 4 | export class App extends React.Component { 5 | render() { 6 | return ( 7 |
Simple React + Babel + Bootstrap + Webpack
8 | ); 9 | } 10 | } 11 | 12 | React.render(, document.querySelector("#myApp")); 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Webpack Babel App 7 | 8 | 9 | 10 |
11 |
12 |

Jumbotron

13 |

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

14 |

Learn more

15 |
16 |
17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-webpack-babel 2 | Simple React Webpack Babel Starter Kit 3 | 4 | 5 | This is a simple [React](https://facebook.github.io/react/), [Webpack](http://webpack.github.io/) and [Babel](https://babeljs.io/) application with nothing else in it. 6 | 7 | ### What's in it? 8 | 9 | Just a simple [index.jsx](./index.jsx), [webpack.config.js](./webpack.config.js) and [index.html](./public/index.html) file. 10 | 11 | ### To run 12 | 13 | Install webpack and the development server: 14 | 15 | ``` 16 | > $ npm i webpack-dev-server webpack -g 17 | ``` 18 | 19 | You can simply run webpack build using this command: 20 | 21 | ``` 22 | > $ npm run build 23 | ``` 24 | 25 | If you want to run with webpack-dev-server simply run this command: 26 | 27 | ``` 28 | > $ npm run dev 29 | ``` 30 | 31 | Open the web browser to `http://localhost:8080/` 32 | 33 | Please contribute to the project if you think this can be done better in anyway even for this README :) 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Ali Al Dallal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-webpack-babel", 3 | "version": "0.0.2", 4 | "description": "React Webpack Babel Starter Kit", 5 | "main": "''", 6 | "scripts": { 7 | "build": "webpack --progress --profile --colors", 8 | "dev": "webpack-dev-server --progress --profile --colors --hot" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/alicoding/react-webpack-babel" 13 | }, 14 | "keywords": [ 15 | "React", 16 | "Webpack", 17 | "Babel", 18 | "Starter", 19 | "template" 20 | ], 21 | "author": "Ali Al Dallal", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/alicoding/react-webpack-babel/issues" 25 | }, 26 | "homepage": "https://github.com/alicoding/react-webpack-babel#readme", 27 | "dependencies": { 28 | "bootstrap": "^3.3.5", 29 | "react": "^0.13.3" 30 | }, 31 | "devDependencies": { 32 | "babel-core": "^5.5.8", 33 | "babel-loader": "^5.1.4", 34 | "css-loader": "^0.18.0", 35 | "file-loader": "^0.8.4", 36 | "react-hot-loader": "^1.2.7", 37 | "style-loader": "^0.12.4", 38 | "url-loader": "^0.5.6", 39 | "webpack": "^1.9.11", 40 | "webpack-dev-server": "^1.9.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var path = require('path'); 3 | 4 | module.exports = { 5 | entry: [ 6 | 'webpack-dev-server/client?http://0.0.0.0:8080', // WebpackDevServer host and port 7 | 'webpack/hot/only-dev-server', 8 | './index.jsx' // Your appʼs entry point 9 | ], 10 | devtool: process.env.WEBPACK_DEVTOOL || 'source-map', 11 | output: { 12 | path: path.join(__dirname, 'public'), 13 | filename: 'bundle.js' 14 | }, 15 | resolve: { 16 | extensions: ['', '.js', '.jsx'] 17 | }, 18 | module: { 19 | loaders: [ 20 | { 21 | test: /\.jsx?$/, 22 | exclude: /(node_modules|bower_components)/, 23 | loaders: ['react-hot', 'babel'], 24 | }, 25 | 26 | { 27 | test: /\.css$/, 28 | loader: 'style-loader!css-loader' 29 | }, 30 | { 31 | test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 32 | loader: "file" 33 | }, 34 | { 35 | test: /\.(woff|woff2)$/, 36 | loader: "url?prefix=font/&limit=5000" 37 | }, 38 | { 39 | test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 40 | loader: "url?limit=10000&mimetype=application/octet-stream" 41 | }, 42 | { 43 | test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 44 | loader: "url?limit=10000&mimetype=image/svg+xml" 45 | }, 46 | { 47 | test: /\.gif/, 48 | loader: "url-loader?limit=10000&mimetype=image/gif" 49 | }, 50 | { 51 | test: /\.jpg/, 52 | loader: "url-loader?limit=10000&mimetype=image/jpg" 53 | }, 54 | { 55 | test: /\.png/, 56 | loader: "url-loader?limit=10000&mimetype=image/png" 57 | } 58 | 59 | ] 60 | }, 61 | devServer: { 62 | contentBase: "./public", 63 | noInfo: true, // --no-info option 64 | hot: true, 65 | inline: true 66 | }, 67 | plugins: [ 68 | new webpack.NoErrorsPlugin() 69 | ] 70 | }; 71 | --------------------------------------------------------------------------------