mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-04 01:00:21 +08:00
feat(templates): updated react template to latest CRA implementation
This commit is contained in:
Tim Kipp
Lea Anthony
parent
01a1288364
commit
9d5280d4d6
@ -5,8 +5,8 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.4",
|
||||
"react": "^16.13.0",
|
||||
"react-dom": "^16.13.0",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"wails-react-scripts": "3.0.1-2",
|
||||
"react-modal": "3.11.2",
|
||||
"@wailsapp/runtime": "^1.0.10"
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.1 KiB |
@ -1,10 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Web site created using create-react-app" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
@ -20,8 +23,9 @@
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="app"></div>
|
||||
<!--
|
||||
@ -34,5 +38,6 @@
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
cmd/templates/create-react-app/frontend/public/logo192.png
Normal file
BIN
cmd/templates/create-react-app/frontend/public/logo192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
cmd/templates/create-react-app/frontend/public/logo512.png
Normal file
BIN
cmd/templates/create-react-app/frontend/public/logo512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
@ -6,6 +6,16 @@
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@ -3,11 +3,16 @@
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
|
||||
@ -1,48 +1,35 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import Modal from 'react-modal';
|
||||
|
||||
class HelloWorld extends React.Component {
|
||||
constructor(props, context) {
|
||||
super();
|
||||
this.state = {
|
||||
showModal: false
|
||||
};
|
||||
function HelloWorld() {
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [result, setResult] = useState(null);
|
||||
|
||||
this.handleOpenModal = this.handleOpenModal.bind(this);
|
||||
this.handleCloseModal = this.handleCloseModal.bind(this);
|
||||
}
|
||||
const handleOpenModal = () => {
|
||||
setShowModal(true);
|
||||
|
||||
handleOpenModal () {
|
||||
this.setState({ showModal: true });
|
||||
window.backend.basic().then((result) => setResult(result));
|
||||
};
|
||||
|
||||
window.backend.basic().then(result =>
|
||||
this.setState({
|
||||
result
|
||||
})
|
||||
);
|
||||
}
|
||||
const handleCloseModal = () => {
|
||||
setShowModal(false);
|
||||
};
|
||||
|
||||
handleCloseModal () {
|
||||
this.setState({ showModal: false });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { result } = this.state;
|
||||
return (
|
||||
<div className="App">
|
||||
<button onClick={this.handleOpenModal} type="button">
|
||||
Hello
|
||||
</button>
|
||||
<Modal
|
||||
isOpen={this.state.showModal}
|
||||
contentLabel="Minimal Modal Example"
|
||||
>
|
||||
return (
|
||||
<div className="App">
|
||||
<button onClick={() => handleOpenModal()} type="button">
|
||||
Hello
|
||||
</button>
|
||||
<Modal
|
||||
appElement={document.getElementById("app")}
|
||||
isOpen={showModal}
|
||||
contentLabel="Minimal Modal Example"
|
||||
>
|
||||
<p>{result}</p>
|
||||
<button onClick={this.handleCloseModal}>Close Modal</button>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<button onClick={() => handleCloseModal()}>Close Modal</button>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HelloWorld;
|
||||
|
||||
@ -3,9 +3,20 @@ import ReactDOM from 'react-dom';
|
||||
import 'core-js/stable';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
|
||||
import * as Wails from '@wailsapp/runtime';
|
||||
|
||||
Wails.Init(() => {
|
||||
ReactDOM.render(<App />, document.getElementById('app'));
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById("app")
|
||||
);
|
||||
});
|
||||
|
||||
// If you want your app to work offline and load faster, you can change
|
||||
// unregister() to register() below. Note this comes with some pitfalls.
|
||||
// Learn more about service workers: https://bit.ly/CRA-PWA
|
||||
serviceWorker.unregister();
|
||||
|
||||
@ -14,7 +14,7 @@ const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
// 127.0.0.0/8 are considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
@ -100,7 +100,9 @@ function registerValidSW(swUrl, config) {
|
||||
|
||||
function checkValidServiceWorker(swUrl, config) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
fetch(swUrl, {
|
||||
headers: { 'Service-Worker': 'script' },
|
||||
})
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
const contentType = response.headers.get('content-type');
|
||||
@ -128,8 +130,12 @@ function checkValidServiceWorker(swUrl, config) {
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
navigator.serviceWorker.ready
|
||||
.then(registration => {
|
||||
registration.unregister();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "React JS",
|
||||
"version": "1.0.0",
|
||||
"shortdescription": "Create React App v3 template",
|
||||
"description": "Create React App v3 standar tooling",
|
||||
"shortdescription": "Create React App v4 template",
|
||||
"description": "Create React App v4 standard tooling",
|
||||
"install": "npm install",
|
||||
"build": "npm run build",
|
||||
"author": "bh90210 <ktc@pm.me>",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user