accio-react-app.sh

## accio-react-app.sh
#!/bin/bash

# ACCIO REACT APP!
# A quick and dirty way to start a simple React project
# NOTE! This script assumes you are using Yarn
# Author: Eli (https://eli.li)
# License: unlicense (https://unlicense.org/)

read -p 'What is the name of your new project? ' PROJECTNAME

echo 'Creating new project, ' $PROJECTNAME
mkdir $PROJECTNAME
cd $PROJECTNAME

echo 'Now yarn is gonna do *A LOT* of stuff all at once, including initiating a new project, and pulling in a number of dependencies. This may take a few minutes.'
yarn init -y
yarn add react
yarn add react-dom
yarn add react-router-dom
yarn add node-sass
yarn add --dev parcel-bundler
yarn add --dev babel-preset-env
yarn add --dev babel-preset-react

echo 'Next is a slight modification to package.json, adding a `start` and a `build` script'
SCRIPT=',"scripts": {"start": "parcel index.html", "build": "parcel build index.html --out-dir dist" }'
printf '%s\n' H 17i "$SCRIPT" . wq | ed -s package.json

echo 'Making `.babelrc`!'
touch '.babelrc'
echo '{"presets": ["env", "react"]}' >> .babelrc

echo 'Making `.gitignore`!'
touch '.gitignore'
echo '/node_modules' >> .gitignore
echo '/dist' >> .gitignore
echo '/.cache' >> .gitignore
echo '.DS_Store' >> .gitignore

echo 'For our next trick!? Time to make the project scaffolding.'
mkdir 'src'
mkdir 'src/components'
mkdir 'src/scss'
mkdir 'src/static'
touch 'src/index.js'
touch 'src/components/HelloWorld.js'
touch 'src/scss/main.scss'
touch 'index.html'
touch 'README.md'

echo '<!doctype html>' >> index.html
echo '<html lang="en">' >> index.html
echo '<head>' >> index.html
echo '<meta charset="UTF-8">' >> index.html
echo '<meta name="viewport"' >> index.html
echo 'content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">' >> index.html
echo '<meta http-equiv="X-UA-Compatible" content="ie=edge">' >> index.html
echo '<title>'$PROJECTNAME'</title>' >> index.html
echo '<link rel="stylesheet" href="./src/scss/main.scss">' >> index.html
echo '</head>' >> index.html
echo '<body>' >> index.html
echo '<div id="root"></div>' >> index.html
echo '<script src="./src/index.js"></script>' >> index.html
echo '</body>' >> index.html
echo '</html>' >> index.html

echo 'import React from "react";' >> src/index.js
echo 'import ReactDOM from "react-dom";' >> src/index.js
echo 'import {BrowserRouter as Router, Route} from "react-router-dom"' >> src/index.js
echo 'import HelloWorld from "./components/HelloWorld"' >> src/index.js
echo '  ' >> src/index.js
echo 'let Root = document.getElementById("root");' >> src/index.js
echo '  ' >> src/index.js
echo 'ReactDOM.render(' >> src/index.js
echo '<Router>' >> src/index.js
echo '<main>' >> src/index.js
echo '<Route exact strict path="/" component={HelloWorld}/>' >> src/index.js
echo '</main>' >> src/index.js
echo '</Router>,' >> src/index.js
echo 'Root' >> src/index.js
echo ')' >> src/index.js

echo 'import React from "react"' >> src/components/HelloWorld.js
echo '  ' >> src/components/HelloWorld.js
echo 'export default class HelloWorld extends React.Component {' >> src/components/HelloWorld.js
echo 'constructor(props) {' >> src/components/HelloWorld.js
echo 'super(props);' >> src/components/HelloWorld.js
echo '}' >> src/components/HelloWorld.js
echo '  ' >> src/components/HelloWorld.js
echo 'render() {' >> src/components/HelloWorld.js
echo 'return (' >> src/components/HelloWorld.js
echo '<div>' >> src/components/HelloWorld.js
echo '<h1>Hello World!</h1>' >> src/components/HelloWorld.js
echo '</div>' >> src/components/HelloWorld.js
echo ')' >> src/components/HelloWorld.js
echo '}' >> src/components/HelloWorld.js
echo '}' >> src/components/HelloWorld.js

echo 'body {padding: 3em; color: pink}' >> src/scss/main.scss

echo '#' $PROJECTNAME >> README.md
echo '  ' >> README.md
echo '(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧' >> README.md
echo 'Built w/a very little bit of magic!' >> README.md
echo '  ' >> README.md
echo '  ' >> README.md
echo 'Run: w/either:' >> README.md
echo '```' >> README.md
echo '$ yarn start' >> README.md
echo '```' >> README.md
echo 'OR, if using NPM' >> README.md
echo '```' >> README.md
echo '$ npm start' >> README.md
echo '```' >> README.md

yarn start