Created
September 9, 2018 02:08
-
-
Save eli-oat/343fd535c02f8ee2ef6629120319fa56 to your computer and use it in GitHub Desktop.
A quick and dirty way to start a simple React project
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment