├── styles ├── home.scss └── application.scss ├── .babelrc ├── .jshintrc ├── src ├── App.jsx └── index.jsx ├── index.html ├── .eslintrc ├── server.js ├── webpack.config.js ├── README.md ├── LICENSE ├── .gitignore └── package.json /styles/home.scss: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: tomato; 3 | } 4 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "newcap": false 6 | } 7 | -------------------------------------------------------------------------------- /styles/application.scss: -------------------------------------------------------------------------------- 1 | // This is the top-level scss file. Import all other files in here. 2 | @import 'home'; 3 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | 3 | class App extends Component { 4 | render() { 5 | return ( 6 |

Hello React :)

7 | ); 8 | } 9 | } 10 | export default App; 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello React 6 | 7 | 8 |

9 | 10 | 11 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | // Application entrypoint. 2 | 3 | // Load up the application styles 4 | require("../styles/application.scss"); 5 | 6 | // Render the top-level React component 7 | import React from 'react'; 8 | import ReactDOM from 'react-dom'; 9 | import App from './App.jsx'; 10 | 11 | ReactDOM.render(, document.getElementById('react-root')); 12 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parserOptions": { 3 | "sourceType": "module", 4 | "ecmaFeatures": { 5 | "jsx": true 6 | } 7 | }, 8 | "env": { 9 | "browser": true, 10 | "node": true 11 | }, 12 | "rules": { 13 | "quotes": [2, "single"], 14 | "strict": [2, "never"], 15 | "react/jsx-uses-react": 2, 16 | "react/jsx-uses-vars": 2, 17 | "react/react-in-jsx-scope": 2 18 | }, 19 | "plugins": [ 20 | "react" 21 | ], 22 | "extends": ["eslint:recommended", "plugin:react/recommended"] 23 | } 24 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var WebpackDevServer = require('webpack-dev-server'); 3 | var config = require('./webpack.config'); 4 | 5 | new WebpackDevServer(webpack(config), { 6 | publicPath: config.output.publicPath, 7 | watchOptions: { 8 | aggregateTimeout: 300, 9 | poll: 1000, 10 | ignored: /node_modules/ 11 | } 12 | }) 13 | .listen(3000, '0.0.0.0', function (err, result) { 14 | if (err) { 15 | console.log(err); 16 | } 17 | 18 | console.log('Running at http://0.0.0.0:3000'); 19 | }); 20 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | devtool: 'eval', 6 | entry: [ 7 | 'webpack-dev-server/client?http://localhost:3000', 8 | './src/index.jsx' 9 | ], 10 | output: { 11 | path: path.join(__dirname, 'dist'), 12 | filename: 'bundle.js', 13 | publicPath: '/build/' 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.jsx?$/, 19 | loader: 'babel-loader', 20 | include: path.join(__dirname, 'src') 21 | }, 22 | { 23 | test: /\.scss$/, 24 | use: [ 25 | 'style-loader', 26 | 'css-loader', 27 | 'sass-loader' 28 | ] 29 | } 30 | ] 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | React Boilerplate 2 | ===================== 3 | 4 | A minimal and light dev environment for ReactJS. 5 | 6 | ### Usage 7 | 8 | Clone the boilerplate and create your own git repo. 9 | 10 | ``` 11 | git clone git@github.com:lighthouse-labs/react-simple-boilerplate.git 12 | cd react-simple-boilerplate 13 | git remote rm origin 14 | git remote add origin [YOUR NEW REPOSITORY] 15 | # Manually update your package.json file 16 | ``` 17 | 18 | Install the dependencies and start the server. 19 | 20 | ``` 21 | npm install 22 | npm start 23 | open http://localhost:3000 24 | ``` 25 | 26 | ### Static Files 27 | 28 | You can store static files like images, fonts, etc in the `build` folder. 29 | 30 | For example, if you copy a file called my_image.png into the build folder you can access it using `http://localhost:3000/build/my_image.png`. 31 | 32 | ### Linting 33 | 34 | This boilerplate project includes React ESLint configuration. 35 | 36 | ``` 37 | npm run lint 38 | ``` 39 | 40 | ### Dependencies 41 | 42 | * React 43 | * Webpack 44 | * [babel-loader](https://github.com/babel/babel-loader) 45 | * [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 46 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Noah-Jerome Lotzer 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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | .DS_Store 4 | dist 5 | 6 | ### PhpStorm ### 7 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 8 | 9 | *.iml 10 | 11 | ## Directory-based project format: 12 | .idea/ 13 | # if you remove the above rule, at least ignore the following: 14 | 15 | # User-specific stuff: 16 | # .idea/workspace.xml 17 | # .idea/tasks.xml 18 | # .idea/dictionaries 19 | # .idea/shelf 20 | 21 | # Sensitive or high-churn files: 22 | # .idea/dataSources.ids 23 | # .idea/dataSources.xml 24 | # .idea/sqlDataSources.xml 25 | # .idea/dynamic.xml 26 | # .idea/uiDesigner.xml 27 | 28 | # Gradle: 29 | # .idea/gradle.xml 30 | # .idea/libraries 31 | 32 | # Mongo Explorer plugin: 33 | # .idea/mongoSettings.xml 34 | 35 | ## File-based project format: 36 | *.ipr 37 | *.iws 38 | 39 | ## Plugin-specific files: 40 | 41 | # IntelliJ 42 | /out/ 43 | 44 | # mpeltonen/sbt-idea plugin 45 | .idea_modules/ 46 | 47 | # JIRA plugin 48 | atlassian-ide-plugin.xml 49 | 50 | # Crashlytics plugin (for Android Studio and IntelliJ) 51 | com_crashlytics_export_strings.xml 52 | crashlytics.properties 53 | crashlytics-build.properties 54 | fabric.properties 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-simple-boilerplate", 3 | "version": "1.0.0", 4 | "description": "Simple and lightweight Boilerplate for ReactJS projects", 5 | "scripts": { 6 | "lint": "eslint --ext .jsx,.js src", 7 | "start": "node server.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/noahlotzer/react-simple-boilerplate.git" 12 | }, 13 | "keywords": [ 14 | "react", 15 | "reactjs", 16 | "boilerplate", 17 | "reload", 18 | "live", 19 | "edit", 20 | "webpack" 21 | ], 22 | "author": "Noah-Jerome Lotzer ", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/noahlotzer/react-simple-boilerplate/issues" 26 | }, 27 | "homepage": "https://github.com/noahlotzer/react-simple-boilerplate", 28 | "engines": { 29 | "node": ">=6.0.0" 30 | }, 31 | "devDependencies": { 32 | "babel-core": "6.23.1", 33 | "babel-loader": "6.3.1", 34 | "babel-preset-es2015": "6.22.0", 35 | "babel-preset-react": "6.23.0", 36 | "babel-preset-stage-0": "6.22.0", 37 | "css-loader": "0.26.1", 38 | "eslint": "3.15.0", 39 | "eslint-plugin-react": "6.9.0", 40 | "node-sass": "4.5.0", 41 | "sass-loader": "6.0.0", 42 | "sockjs-client": "^1.1.2", 43 | "style-loader": "0.13.1", 44 | "webpack": "2.2.1", 45 | "webpack-dev-server": "2.3.0" 46 | }, 47 | "dependencies": { 48 | "react": "15.4.2", 49 | "react-dom": "15.4.2" 50 | } 51 | } 52 | --------------------------------------------------------------------------------