A quick and dirty way to start a simple React project
#!/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