├── .gitignore
├── LICENSE
├── README.md
├── html
└── index.html
├── js
└── main.js
├── package.json
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .idea
3 | node_modules
4 |
5 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Axel Rauschmayer
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 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React starter project
2 |
3 | A minimal project to get started with React:
4 |
5 | * webpack and webpack-dev-server
6 | * ES6 and JSX via Babel
7 | * hot module reloading via [React Hot Loader](https://github.com/gaearon/react-hot-loader)
8 |
9 | Installation:
10 |
11 | ```
12 | git clone git@github.com:rauschma/react-starter-project.git
13 | cd react-starter-project
14 | npm install
15 | ```
16 |
17 | Thanks to `npm run`, everything is installed locally!
18 |
19 | Development:
20 |
21 | * Build once: `npm run webpack`
22 | * Run dev server: `npm start`
23 | * Web page: http://localhost:8080/
24 | * Keep the console open to see errors and warnings
25 |
26 | You can check out hot reloading by making changes to the JavaScript source code. You’ll see the results of those changes in the browser right away.
27 |
28 | No support for testing, yet, I’m still in the process of figuring out what I want there.
--------------------------------------------------------------------------------
/html/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React starter project
6 |
7 |
8 |
9 | React starter project
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {render} from 'react-dom';
3 |
4 | class Main extends React.Component {
5 | constructor() {
6 | super();
7 | this.state = {
8 | clickCount: 0,
9 | };
10 | }
11 | render() {
12 | return ;
15 | }
16 | handleClick(event) {
17 | event.preventDefault();
18 | this.setState({
19 | clickCount: this.state.clickCount + 1,
20 | });
21 | }
22 | }
23 |
24 | render((
25 |
26 | ), document.getElementById('main'));
27 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-starter-project",
3 | "version": "1.0.0",
4 | "description": "",
5 | "scripts": {
6 | "webpack": "webpack",
7 | "start": "webpack-dev-server --hot --inline"
8 | },
9 | "author": "Axel Rauschmayer",
10 | "license": "MIT",
11 | "devDependencies": {
12 | "babel-core": "^6.1.21",
13 | "babel-preset-es2015": "^6.1.18",
14 | "babel-preset-react": "^6.1.18",
15 | "babel-loader": "^6.1.0",
16 |
17 | "webpack": "^1.12.6",
18 | "copy-webpack-plugin": "^0.2.0",
19 | "webpack-dev-server": "^1.12.1",
20 | "react-hot-loader": "^1.3.0"
21 | },
22 | "dependencies": {
23 | "react": "^0.14.2",
24 | "react-dom": "^0.14.2"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /* global __dirname */
2 |
3 | var path = require('path');
4 |
5 | var webpack = require('webpack');
6 | var CopyWebpackPlugin = require('copy-webpack-plugin');
7 |
8 | var dir_js = path.resolve(__dirname, 'js');
9 | var dir_html = path.resolve(__dirname, 'html');
10 | var dir_build = path.resolve(__dirname, 'build');
11 |
12 | module.exports = {
13 | entry: path.resolve(dir_js, 'main.js'),
14 | output: {
15 | path: dir_build,
16 | filename: 'bundle.js'
17 | },
18 | devServer: {
19 | contentBase: dir_build,
20 | },
21 | module: {
22 | loaders: [
23 | {
24 | loader: 'react-hot',
25 | test: dir_js,
26 | },
27 | {
28 | loader: 'babel-loader',
29 | test: dir_js,
30 | query: {
31 | presets: ['es2015', 'react'],
32 | },
33 | }
34 | ]
35 | },
36 | plugins: [
37 | // Simply copies the files over
38 | new CopyWebpackPlugin([
39 | { from: dir_html } // to: output.path
40 | ]),
41 | // Avoid publishing files when compilation fails
42 | new webpack.NoErrorsPlugin()
43 | ],
44 | stats: {
45 | // Nice colored output
46 | colors: true
47 | },
48 | // Create Sourcemaps for the bundle
49 | devtool: 'source-map',
50 | };
51 |
--------------------------------------------------------------------------------