Last active
October 10, 2020 21:50
-
-
Save br3akzero/1f527a30fb8f4d9c2af400a940e65f0c to your computer and use it in GitHub Desktop.
Setup react app with parcel
This file contains hidden or 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
| # init npm | |
| npm init -y | |
| # Add start script to package.json -> scripts | |
| "start": "parcel public/index.html" | |
| # Install dependencies | |
| yarn add react | |
| yarn add react-dom | |
| yarn add --dev parcel-bundler | |
| # Create public, src and app folder | |
| mkdir public src app | |
| # Create index.html in public | |
| touch public/index.html | |
| # Add HTML template to public/index.html | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script src="../src/index.jsx"></script> | |
| </body> | |
| </html> | |
| # Create index.jsx in public | |
| touch src/index.jsx | |
| # Add react template to src/index.jsx | |
| import React from "react"; | |
| import ReactDOM from "react-dom"; | |
| import App from "./app/App"; | |
| const root = document.getElementById("root"); | |
| ReactDOM.render(<App />, root); | |
| # create App component in app | |
| touch app/App.jsx | |
| # Add component template to app/App.jsx | |
| import React from "react"; | |
| const App = () => <h1>Hello World!</h1>; | |
| export default App; | |
| # start project | |
| yarn start |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment