Created
December 24, 2018 08:20
-
-
Save miluna/f6af22dd1ee53091c3939009bf0fa442 to your computer and use it in GitHub Desktop.
React Initializer using Parcel as bundler
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
: ' | |
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment