Gennnji · January 11, 2019 15:54 · Gennnji · Jan 11, 2019 · Gennnji · Jan 11, 2019
diff --git a/containers_App.js b/containers_App.js
 import React, {Component} from 'react';

 export default class App extends Component {
    render () {
        return <p>This is my new react app</p>
    }
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <title> Ideal React Seed </title>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="/bundle.js"></script>
    </body>
 </html>
diff --git a/index.js b/index.js
 import React from 'react';
 import ReactDOM from 'react-dom';

 // main app
 import App from './containers/App';

 ReactDOM.render(<App />, document.getElementById('app'))
diff --git a/install-babel.sh b/install-babel.sh
 npm install --save-dev babel-cli babel-core babel-loader babel-plugin-transform-object-rest-spread babel-preset-es2015 babel-preset-react babel-preset-stage-0 babel-register
diff --git a/install-react.sh b/install-react.sh
 npm install --save react react-dom
diff --git a/install-style-loaders.sh b/install-style-loaders.sh
 npm install --save-dev style-loader css-loader less-loader
 npm install --save-dev less
diff --git a/install-webpack.sh b/install-webpack.sh
 npm install --save webpack webpack-dev-server
diff --git a/package-babel.json b/package-babel.json
 "babel": {
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ],
    "plugins": [
      "transform-object-rest-spread"
    ]
 }
diff --git a/packages.json.partial b/packages.json.partial
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js"
 }
diff --git a/project.sh b/project.sh
 mkdir reactProject
 cd reactProject
 npm init // start a node project
diff --git a/touch-app.sh b/touch-app.sh
 mkdir containers
 cd containers
 touch App.js
diff --git a/webpack-dir.sh b/webpack-dir.sh
 mkdir webpack
 cd webpack
 touch webpack.dev.config.js
diff --git a/webpack.dev.config.js b/webpack.dev.config.js

 var webpack = require('webpack');
 var path = require('path');

 var parentDir = path.join(__dirname, '../');

 module.exports = {
    entry: [
        path.join(parentDir, 'index.js')
    ],
    module: {
        loaders: [{
            test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },{
                test: /\.less$/,
                loaders: ["style-loader", "css-loder", "less-loader"]
            }
        ]
    },
    output: {
        path: parentDir + '/dist',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: parentDir,
        historyApiFallback: true
    }
 }
	import React, {Component} from 'react';

	export default class App extends Component {
	render () {
	return <p>This is my new react app</p>
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title> Ideal React Seed </title>
	</head>
	<body>
	<div id="app"></div>
	<script type="text/javascript" src="/bundle.js"></script>
	</body>
	</html>
	import React from 'react';
	import ReactDOM from 'react-dom';

	// main app
	import App from './containers/App';

	ReactDOM.render(<App />, document.getElementById('app'))
	npm install --save-dev style-loader css-loader less-loader
	npm install --save-dev less
	"babel": {
	"presets": [
	"es2015",
	"react",
	"stage-0"
	],
	"plugins": [
	"transform-object-rest-spread"
	]
	}
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"dev": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js"
	}
	mkdir reactProject
	cd reactProject
	npm init // start a node project

	var webpack = require('webpack');
	var path = require('path');

	var parentDir = path.join(__dirname, '../');

	module.exports = {
	entry: [
	path.join(parentDir, 'index.js')
	],
	module: {
	loaders: [{
	test: /\.(js\|jsx)$/,
	exclude: /node_modules/,
	loader: 'babel-loader'
	},{
	test: /\.less$/,
	loaders: ["style-loader", "css-loder", "less-loader"]
	}
	]
	},
	output: {
	path: parentDir + '/dist',
	filename: 'bundle.js'
	},
	devServer: {
	contentBase: parentDir,
	historyApiFallback: true
	}
	}