miluna/react-parcel-script.sh

## react-parcel-script.sh
: '
Author:		Miguel Angel Luna
Description: 	This is a script to create a quickstart react project using Parcel as bundler
Instructions:
		Run the script using "sh react-parcel-script.sh" inside your project folder.
        If you are running on Windows, use Git Bash as terminal and execute the command.
'

# Create src dir
mkdir src

# Create package.json file
cat > package.json << EOF0
{
  "name": "react-parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel src/index.html",
    "build": "parcel build src/index.html",
    "build-rm": "rm -rf dist && npm run build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1"
  }
}

EOF0

# create index.html
cat > src/index.html << EOF1
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React App</title>
</head>

<body>
    <div id="root"></div>
    <script src="./index.js"></script>
</body>

</html>

EOF1

# create index.js
cat > src/index.js << EOF2
import React from 'react';
import ReactDOM from 'react-dom';
import BrowserRouter from 'react-router-dom/BrowserRouter';
import App from './App';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.querySelector("#root")
);

EOF2

# create App.js
cat > src/App.js << EOF3
import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
          Hello World
      </div>
    )
  }
}

EOF3

# install dependencies
npm install

# thanks the user
echo "#####################"
echo "Thanks for using the react-parcel-script from Miguel Angel Luna"
echo "Happy development!"
echo "#####################"

# remove the script
rm react-parcel-script.sh
	: '
	Author: Miguel Angel Luna
	Description: This is a script to create a quickstart react project using Parcel as bundler
	Instructions:
	Run the script using "sh react-parcel-script.sh" inside your project folder.
	If you are running on Windows, use Git Bash as terminal and execute the command.
	'

	# Create src dir
	mkdir src

	# Create package.json file
	cat > package.json << EOF0
	{
	"name": "react-parcel",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"start": "parcel src/index.html",
	"build": "parcel build src/index.html",
	"build-rm": "rm -rf dist && npm run build"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"dependencies": {
	"react": "^16.7.0",
	"react-dom": "^16.7.0",
	"react-router": "^4.3.1",
	"react-router-dom": "^4.3.1"
	}
	}

	EOF0

	# create index.html
	cat > src/index.html << EOF1
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>React App</title>
	</head>

	<body>
	<div id="root"></div>
	<script src="./index.js"></script>
	</body>

	</html>

	EOF1

	# create index.js
	cat > src/index.js << EOF2
	import React from 'react';
	import ReactDOM from 'react-dom';
	import BrowserRouter from 'react-router-dom/BrowserRouter';
	import App from './App';

	ReactDOM.render(
	<BrowserRouter>
	<App />
	</BrowserRouter>,
	document.querySelector("#root")
	);

	EOF2

	# create App.js
	cat > src/App.js << EOF3
	import React, { Component } from 'react'

	export default class App extends Component {
	render() {
	return (
	<div>
	Hello World
	</div>
	)
	}
	}

	EOF3

	# install dependencies
	npm install

	# thanks the user
	echo "#####################"
	echo "Thanks for using the react-parcel-script from Miguel Angel Luna"
	echo "Happy development!"
	echo "#####################"

	# remove the script
	rm react-parcel-script.sh