Created
August 10, 2023 23:47
-
-
Save schpet/b3c27b268a6255b9c82a61e6cf0e424b to your computer and use it in GitHub Desktop.
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
| From 263700b42d405f4c5330406511f0720f79f6f353 Mon Sep 17 00:00:00 2001 | |
| From: Peter Schilling <peter@tanookilabs.com> | |
| Date: Thu, 10 Aug 2023 16:45:56 -0700 | |
| Subject: [PATCH] React | |
| --- | |
| .../{application.ts => application.tsx} | 14 ++++++++++++++ | |
| app/views/layouts/application.html.erb | 2 +- | |
| package.json | 4 ++++ | |
| 3 files changed, 19 insertions(+), 1 deletion(-) | |
| rename app/frontend/entrypoints/{application.ts => application.tsx} (76%) | |
| diff --git a/app/frontend/entrypoints/application.ts b/app/frontend/entrypoints/application.tsx | |
| similarity index 76% | |
| rename from app/frontend/entrypoints/application.ts | |
| rename to app/frontend/entrypoints/application.tsx | |
| index b679e2a..f4ac5e2 100644 | |
| --- a/app/frontend/entrypoints/application.ts | |
| +++ b/app/frontend/entrypoints/application.tsx | |
| @@ -1,3 +1,5 @@ | |
| +import { createRoot } from "react-dom/client"; | |
| + | |
| // To see this message, add the following to the `<head>` section in your | |
| // views/layouts/application.html.erb | |
| // | |
| @@ -26,3 +28,15 @@ console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify | |
| // Example: Import a stylesheet in app/frontend/index.css | |
| // import '~/index.css' | |
| + | |
| +const App = () => { | |
| + return <div>my react app {1 + 3}</div> | |
| +}; | |
| + | |
| +const rootEl = document.getElementById("react-root") | |
| +if (rootEl) { | |
| + const root = createRoot(rootEl) | |
| + root.render(<App />) | |
| +} else { | |
| + console.log("no react-root") | |
| +} | |
| diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb | |
| index a961656..5045868 100644 | |
| --- a/app/views/layouts/application.html.erb | |
| +++ b/app/views/layouts/application.html.erb | |
| @@ -8,7 +8,7 @@ | |
| <%= vite_stylesheet_tag "application" %> | |
| <%= vite_client_tag %> | |
| - <%= vite_typescript_tag 'application' %> | |
| + <%= vite_typescript_tag 'application.tsx' %> | |
| <!-- | |
| If using a TypeScript entrypoint file: | |
| vite_typescript_tag 'application' | |
| diff --git a/package.json b/package.json | |
| index 5c226e1..fde0bf8 100644 | |
| --- a/package.json | |
| +++ b/package.json | |
| @@ -7,6 +7,8 @@ | |
| "autoprefixer": "^10.4.14", | |
| "foundation-emails": "^2.4.0", | |
| "postcss": "^8.4.27", | |
| + "react": "^18.2.0", | |
| + "react-dom": "^18.2.0", | |
| "sass": "^1.65.1", | |
| "tailwindcss": "^3.3.3", | |
| "typescript": "^5.1.6", | |
| @@ -14,6 +16,8 @@ | |
| }, | |
| "devDependencies": { | |
| "@tsconfig/vite-react": "^2.0.0", | |
| + "@types/react": "^18.2.20", | |
| + "@types/react-dom": "^18.2.7", | |
| "eslint": "^8.46.0", | |
| "eslint-config-react-app": "^7.0.1", | |
| "vite": "^4.3.0", | |
| -- | |
| 2.41.0 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment